はてなブログでは、他のCMSにあるような「左寄せ」「中央寄せ」「右寄せ」のボタンがありません。
この記事では、記事本文中のテキストや画像を部分的に「左寄せ」「中央寄せ」「右寄せ」する方法について紹介します。
divタグのalign属性を使って「左寄せ」「中央寄せ」「右寄せ」に利用するタグ
今回は、divタグを使った方法をご紹介します。
※中央寄せの時にcenterタグを使った方法もありますが、centerタグはHTML5で非推奨となっていますのでdivタグを使った方法を推奨します。
まずは、利用するdivタグを確認します。
左寄せ
利用しているテーマの記事が左寄せになって入れば、左寄せを使うことはありませんが、テーマの記事全体が中央寄せになっていて、部分的に左寄せを使う場合などに使います。
記事の左寄せにしたいテキストや画像の部分に、以下のタグを使います。
左寄せの場合は、align属性をleftにします。
<div align="left">左寄せにしたいテキストまたは画像</div>
中央寄せ
中央寄せの場合は、align属性をcenterにします。
<div align="center">中央寄せにしたいテキストまたは画像</div>
右寄せ
右寄せの場合は、align属性をrightにします。
<div align="right">右寄せにしたいテキストまたは画像</div>
はてなブログの編集モードが見たままモードの場合
はてなブログの編集モードは「見たまま」「はてな記法」「markdown」「HTML」の4つがあります。
「markdown」や「HTML」モードであれば、上記のタグで寄せたいテキストや画像のタグを挟めばOKです。
「見たまま」モードの場合は、「HTML編集」タブに切り替えて作業する必要があります。今回は、「見たまま」モードの場合の「中央寄せ」する方法を具体的に解説します。
「見たまま」モードでテキストを中央寄せする場合
1. 「見たまま」モードの場合は、編集画面の上部「HTML編集」のタブをクリックして、HTML編集画面にします。
2. 中央寄せしたい部分に先ほどの<div align="center">中央寄せにしたいテキスト または 画像</div>をコピペします。
3. 中央寄せしたい部分のテキストを入力します。
4. 「見たまま」モードに戻ってみてください。中央寄せになっているのが確認できます。
「見たまま」モードで画像を中央寄せする場合
「見たまま」モードで今度は画像を中央寄せしてみましょう。
1. 見たままモードのまま画像を挿入します。編集オプションの「 写真を投稿」を選択して、挿入する画像を貼り付けます。
2. 記事の編集画面上部の「HTML編集」タブをクリックします。画像のURLは<img src=”htt~”>となっていますから、先ほどのタグで挟みます。
<div align="center"> <img src="https://~"> </div>
3. 編集画面の上部の「見たまま」をクリックしてみてください。
中央寄せになっているのが確認できます。
定型文に登録しておくとすぐに使えて便利
「左寄せ」「中央寄せ」「右寄せ」の時に、いちいち手入力するのは少し面倒です。
そういう場合は、はてなブログの定型文を利用すると、簡単にタグが挿入できるのでお勧めします。
それでは、今度ははてなブログの定型文の作り方を解説します。
「左寄せ」「中央寄せ」「右寄せ」タグの定型文の作り方
定型文貼り付けの使い方を説明します。
はてなブログの記事編集画面の右側にアイコンが並んでます。その中に「 定型文貼り付け」という項目がありますので、選択します。
もし、 定型文貼り付けが表示されていなければ、アイコンの下の「」（追加）を押して、編集サイドバーに表示させてください。
「 定型文貼り付け」の「定型文を作成する」を選択します。
今回は、「中央寄せ」の定型文を作成してみましょう。
タイトルに「中央寄せ」、その下の枠に先ほどの<div align="center">中央寄せにしたいテキスト または 画像</div>をコピペし、「保存する」をクリックします。
同様に、「左寄せ」「右寄せ」も登録しておきましょう。
定型文の使い方
では、実際に定型文を使ってみましょう。
「見たまま」モードの場合は「HTML編集」のタブをクリックして、HTML編集画面にします。
HTML編集画面で
- 編集サイドバーの「 定型文貼り付け」を選択します。
- 定型文一覧から先ほど作った「左寄せ」「中央寄せ」「右寄せ」いずれか利用したいものを選択します。
- 「選択した定型文を貼り付け」をクリックします。
簡単にタグが挿入できることが確認できます。
まとめ
はてなブログでのテキスト、画像の「左寄せ」「中央寄せ」「右寄せ」について解説しました。
- はてなブログでテキストや画像を「左寄せ」「中央寄せ」「右寄せ」する場合はdivタグを使う
- はてなブログの「定型文貼り付け」機能を使うと簡単にタグが挿入できる
備考：はてなブログで画像にキャプションを入力すると自動的に中央寄せになります。
いかがでしたでしょうか？
少しでも参考にしていただけるとうれしいです。
