Bloggerの画像を左寄せや中央寄せにするやり方解説。

みなさんこんにちは、soeパパです！
今回はBloggerの画像の制御方法についてのお話です。

記事の画像を左に寄せたり中央に寄せたりしたいのに上手くいかないで悩んだ方も少なからずいらっしゃいますよね。私も最初のころテンプレートをカスタマイズする時や記事を書いていてけっこう頭を悩ませました。

というわけでBloggerの写真の挿入位置を制御する方法を解説していきますね。
それと日本語テンプレートのVaster2を使っていて写真が中央によらないという声もいただいたので合わせて説明します。

Bloggerの画像は基本的に中央寄せ

<div class="separator" style="clear: both; text-align: center;">
<a href="https://xxx/s1600/xxx.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1600" height="212" src="https://xxx/s320/xxx.jpg" width="320" /></a></div>

これは画像を挿入した時に生成されるコードです。

div要素の中にa要素、a要素の中にimg要素がありますね。このdiv要素のプロパティにtext-align: center;とありますが、これが勝手に中央寄せになる悩みの正体。

これが結構やっかいで、テンプレートにCSSでimgにtext-align: left;指定しても画像はセンタリングされたまま。これはCSSは後に記入されたものが優先される決まりからテンプレートより後に読み込まれる記事のtext-align: center;が使用されてしまうからなんです。

a要素に入っているstyle="margin-left: 1em; margin-right: 1em;"も地味にめんどくさいです。勝手に両側にmarginを取るのできっちり左右センターにきてくれないんですよ。画像をきれいなセンターに持ってくるには強引なやり方かもしれないですがマイナスで相殺します。margin:0 -1em;ですね。

Bloggerの画像を左寄せするには

画像ごとに左寄せを設定する方法が２つと、テンプレートをカスタマイズして記事内の画像を全部左寄にしてしまう方法があります。

画像メニューから左寄せする

挿入した画像をクリックするとこんなメニューが出てきますよね。真ん中辺りに「左 - 中央 - 右」とありますが「左」をクリックすると画像を左に寄せることができます。

ただし、この方法はあまり好ましくありません。

<div class="separator" style="clear: both; text-align: center;">
<a href="https://xxx/s1600/xxx.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="212" src="https://xxx/s320/xxx.jpg" width="320" /></a></div>

float: left;というプロパティが追加されているのがわかりますでしょうか。
画像メニューからの左寄せはfloatによるものなんです。

floatを使うと起こるのはテキストの回り込み。意図的に回り込ませたい時以外は迷惑でしかありません。

ちなみに画像が連続で並んでいてこの方法でfloatを追加しても、div要素のプロパティにclear: both;が入っているのでこれを消さないと画像を横に並べる事はできません。

メニューの配置から左寄せにする

メニューバーには「配置」というボタンがあります。このボタンを展開させると４種類の項目があって、一番上の「左揃え」をクリックすると画像が左に寄せられます。

今度は文章が回り込む事無く画像が左寄せになりました。先ほどとは何が違うのでしょうか？

<div class="separator" style="clear: both; text-align: left;">
<a href="https://xxx/s1600/xxx.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="213" src="https://xxx/s320/xxx.jpg" width="320" /></a></div>

text-align: center;からtext-align: left;に変化していますね。
当然「右揃え」をクリックすると右寄せにすることも可能です。

画像を個別に左寄せにしたいという場合はこの方法がオススメです。

テンプレートをカスタマイズする方法

「display」というプロパティがあるのですが、imgタグの初期値はinline(インライン)。
インラインの性質のひとつに、横の配置を指定できるtext-alignと、縦の配置を指定できるvartical-alignが使えるというものがあります。

これにより画像の位置をtext-align: center;でセンタリングしたりtext-align: left;で左寄せにしたりできるのですが、このをtext-alignを無効化する事で全部の画像を左寄せにする方法があります。

displayの値には「inline」の他に「block」「inline-block」「none」というものがあり、要素のほとんどは「inline」か「block」に属します。「inline-block」はinlineとblock中間、「none」を指定するとその要素は非表示になります。

ここで使うのはblockの値です。
値がblockのものは強制的に縦並びになる性質があるのでtext-alignとvartical-alignは効きません。指定したとしても無視されてしまいます。

前置きが小難しくなりましたが、テンプレートでCSSを使ってimgのdisplayの値をinlineからblockに変えてあげれば全部の画像が左寄せになります。

img{display: block;}

この一行をCSSに組み込むだけでOK。
ただしこの設定だと全てのimgタグに影響してしまうので記事内だけのimgに範囲を絞ることにしましょう。

.separator img{display: block!important;}

挿入された画像にはクラス名が指定してあるのでコレを利用します。これでBloggerで挿入でされた画像は全て左寄せになるはずです。

CSSに追記した位置によってはそれより下にimgに関する記述があった場合そちらが優先されるので強制的に最優先にする「!important;」も追加しています。

ひとつだけ注意点としては全ての画像が左寄せになってしまうことですが、separatorでクラス名を指定しているので画像のdiv要素から「class="separator"」を削除してしまえばその画像だけ中央寄せにすることも可能です。

要約するとこんな感じです。
display: blockだと位置の指定ができず左に寄る。text-alignなどは無視される。
display: inlineだと位置の指定ができる。初期値は左寄せだがbloggerは画像に中央寄せの指定が入っているので中央寄せになる。

Vaster2は左寄せが初期設定

img, video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
display: block;
}

日本語テンプレートの代表Vaster2は上記のように元々imgにdisplay: block;が指定してあるので変更する必要はないでしょう。つまりVaster2は自動的に画像が左寄せになるようになっているということですね。
逆に中央寄せにしたい場合があると思いますがその場合はこの下に追加します。

.separator img{
display: inline-block;
margin: 15px -1em;
}

inlineは縦方向のmarginが使えないので縦と横のmarginが指定できるinline-blockを使用します。15pxで上下に空きを作って、-1emで自動で入る左右のmarginを相殺しています。

まとめ

いかがでしたか？
おすすめは自動で左寄せできて個別に中央寄せや右寄せもできるようになる、テンプレートのカスタマイズでseparatorのクラス名を指定したものです。これで画像の制御を自由にできるようになったと思います。色々と試してみてくださいね！

今日のお話はここまで！
それではまたお会いしましょう〜

Blogger カスタマイズ 知ってると役立つコト