【はてなブログ】中央寄せの記事を書く方法！記事ごとに設定もOK

今回は、「はてなブログで中央寄せの記事を書く方法」について紹介します。

CSSを使わずに実装もできるので簡単です。

また、「記事ごとに中央寄せ」を設定したい時にも使えるのでチェックしてみてください。

はじめに

今回紹介する内容は「はてなブログで中央寄せの記事を書く方法」です。

実装方法は「CSSを使った方法」と「記事本文から設定する方法」があるので、どちらか選んでカスタマイズしてみてください。

それぞれの違いは以下の通り。

どちらも超簡単にカスタマイズできるので、早速チェックしていきましょう。

CSSを使って中央寄せにする

まずは、CSSを使って「記事本文を中央寄せにする方法」です。

はてなブログの「デザインCSS」に以下のような記述を追加してください。

.entry-content p {
  text-align: center;
}

このようにすることで、「entry-content（記事本文）内のテキスト」を中央寄せにすることができました。

ただし、このカスタマイズでは「全ての記事」が中央寄せになるので、特定の記事や「部分的に」中央寄せにしたい場合は次の方法を使った方が簡単です。

記事本文から中央寄せを設定する

特定の記事や部分的に中央寄せをカスタマイズしたい場合、「centerタグ」を使うことで超簡単に実装可能なんです。

「全体」のテキストを中央寄せにしたい時は、記事の最初と最後に以下のタグを追加します。

<center>
  ここに記事本文
</center>

たったこれだけ。

「＜center>」と「＜/center>」の間にいつも通り記事を書くことで、中央寄せの記事になりました。

注意点としては「Markdownモード」でCenterタグを使うと、1行にまとめられてしまうので注意してください。

ですので、このような使い方をするときは「見たままモード」で書くのがオススメです。

また、部分的に「テキストを中央寄せ」にしたい場合は以下のようになります。

記事本文
<center>
  ここだけ中央寄せになる
</center>
記事本文

基本的な使い方は先ほどと同じですね。

「centerタグ」の中に書かれたテキストだけが中央寄せになりました。

全記事に適用させる場合と、特定の記事に適用させる場合でどちらか選んでみてください。

画像の中央寄せも可能

余談ですが、過去に紹介した「画像の中央寄せ」も同じ方法を使っています。

【はてなブログ】画像を中央寄せにする方法！見た目とバランスが良くなるかも!?

2017.7.29

今回は、はてなブログで表示した画像を中央寄せにして、真ん中に表示させる方法を紹介します。 画像の表示方法をちょっと変えるだけで、より目立たせたり見やすくなったりするので使いこなしてみてください。...

その他に「アドセンスの中央寄せ」もできるので、合わせてチェックしてみてください。

【はてなブログ】アドセンスを中央寄せにしたらバランス良いデザインになった！

2017.8.4

今回は、はてなブログで設置した「Googleアドセンス」を中央寄せで表示する方法を紹介します。 この方法を使えば、左右のバランスが取れたデザインになるのでぜひ試してみてください。...

まとめ

今回紹介した方法を使うことで、簡単に「記事を中央寄せ」にすることができました。

「centerタグ」を使う方法であれば「CSS」を使わずに「記事の雰囲気を調整」できるので、ぜひ試してみてください。

【CSS】特定の画像だけに適用させるセレクタ！ドメインや拡張子で条件分岐できる！

2018.6.1

  今回は、CSSを使って「特定のsrcを持つ画像」だけ見た目を調整する方法を紹介します。 特定のドメインだけ見た目をカスタマイズしたり、任意の文字列が入っていれば調整できました。 WordPressやはてなブログのカスタマイズで活用できるので、ぜひ試してみてください。...

ではまた。