今回はBloggerの記事への画像の入れ方や仕様についてのお話です。
Bloggerは画像の挿入にちょっとしたクセがあるのでどんな仕様であつかわれているかを知っておくとカスタマイズの時にやりやすくなるんですよ。
というわけで画像を挿入するとどんなことが起こっているかを解説していきますね。
Bloggerの画像の挿入方法
前置きとして画像の挿入のやり方から解説していきます。
初期状態は中サイズ。数値で言うと幅が320pxです。
画像はGoogleフォトのアルバムから読み込めますが、Bloggerに使った画像はGoogleアルバムアーカイブという場所に自動で保管されるのでGoogleフォトの画像を捨てたとしてもブログに影響はありません。
画像の大きさを変える
Bloggerで挿入した画像の大きさは４種類+元の大きさで切り替える事ができます。
もちろん任意の大きさにする事もできますがいちいち数値を入れるのはめんどうなので画像メニューで切り替えた方が簡単です。
「小」「中」「大」「特大」と「元のサイズ」。
- 小 - 200px
- 中 - 320px
- 大 - 400px
- 特大 - 640px
元のサイズを選択すると最大値の1600pxになってしまい、テンプレートの幅よりはみ出す事もありますのであまり使う事はないかもしれません。
画像を挿入した時のコードを見てみる
画像を挿入すると自動でコードが生成されます。
どんな内容なのか確認することでどうしたら制御できるかも見えてくるので簡単に説明しておきますね。
<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>
これが画像を挿入した時に作られるコードです。<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>
画像のアドレスは長くなるのでxxxで省略しています。
Bloggerの画像は３つのタグから成り立っていて、使われているのはdiv、a、img。まずはdivから見ていきましょう。
<div class="separator" style="clear: both; text-align: center;">
・・・・・
</div>
クラス名として「separator」が使われているのでCSSで記事内の画像だけ指定する場合に利用することができますね。・・・・・
</div>
「clear: both;」はfloatの回り込みを解除するという意味です。
「text-align: center;」は画像をセンタリング(中央寄せ)。
自動的にfloat解除、中央寄せが組み込まれているんですね。
ただ、このtext-align: center;は結構邪魔で、テンプレートのCSSで画像にtext-align: left;で左寄せしようとしても記事側の画像のプロパティの方が優先されるのでCSSは無視されてしまうんですよね。
Vaster2はCSSでimgにdisplay:block;が設定されているので、画像は強制的に左寄せになります。その辺はテンプレートによってまちまちなのでCSSでimgをどんな風にあつかっているのか確認してみるといいでしょう。
<a href="https:xxx/s1600/xxx.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">・・・</a>
次は元の画像へのリンクの<a>タグ。厳密には変換された最大サイズの画像へのリンクです。Bloggerは自動的に画像を変換して取り込んでいるようで幅の最大値は1600px。幅1600px以上のものは縮小してくれるのでサイズの大きい画像でも特に意識しなくても容量が重くなりすぎる事はないようですね。
ちなみに画像のファイル名の前にあるs1600というのが解像度を表しています。
<img border="0" data-original-height="1600" data-original-width="1600" height="212" src="https:xxx/s320/xxx.jpg" width="320" />
一番は<img>タグ。こちらは記事の中で表示させる画像になります。この中で見ておくところは最後のwidth="320"。これが表示される画像のサイズを決めています。その手前に解像度を示すs320という数値がありますね。これはwidthとイコールにしておく必要があり、仮にwidthより小さいと拡大されてボケた画像になってしまいますし、数値が大きいと見た目は変わりませんが無駄に容量の重い画像となってしまいます。
手動でwidthの幅を変える場合は/s○○○/の数値も変更しておきましょう。
s0にすると元の画像の解像度になりますが豆知識程度なので覚えなくても問題ありません。
まとめ
今回の記事で知っておくと便利なのは画像に「separator」というクラス名が設定してある事。テンプレートでCSSを書く時に.img{ではなく.separator img{とすれば記事内の挿入した画像だけが対象にできるからです。
それからtext-align: center;のプロパティが挿入した画像には自動的に入っていること。左寄せにしたい場合にCSSで画像にtext-align: left;入れてもなぜ機能しないのか悩まなくてすむからです。
今日のお話はここまで！
それではまたお会いしましょう〜
