背景画像のしくみと提供元表示 ～Blogger テンプレートを作るよ！ (23)～

こんにちはー！

今回はそろそろメニュー以外のことも考えてみようと思います。

というわけで、まずは背景画像についてです！

（前回：『階層化メニューのコード ～Blogger テンプレートを作るよ！ (22)～』）

背景画像はどうなっている？

現状のこのブログでは、ブログ名のあるヘッダー部分に画像が使われています。

これは、テンプレートデザイナーで設定した背景画像です。

どういうことかというと、ページ全体の背景画像として画像が使用されており、その上に被さっているコンテンツのヘッダー部分のみ背景色が透明のため、画像が見えるという感じになっています。

ベースにしているテンプレートが元々そういう形で、今のところそれが気に入って使っています。

さて、その背景画像には実は仕掛けがしてあります。

実はフレキシブルな背景画像

実際にブログを表示させたとき、テンプレートには書かれていない <style> 要素がこっそり増えています。

<style>
    body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1nNL8h6pVEAwiUrJfTsgB67ZCtQwWnkAkAzXQXo6mm9NMjwQEcF_2boPF9xauc3AajiuF);}
    
@media (max-width: 200px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1nNL8h6pVEAwiUrJfTsgB67ZCtQwWnkAkAzXQXo6mm9NMjwQEcF_2boPF9xauc3AajiuF&options=w200);}}
@media (max-width: 400px) and (min-width: 201px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1nNL8h6pVEAwiUrJfTsgB67ZCtQwWnkAkAzXQXo6mm9NMjwQEcF_2boPF9xauc3AajiuF&options=w400);}}
@media (max-width: 800px) and (min-width: 401px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1nNL8h6pVEAwiUrJfTsgB67ZCtQwWnkAkAzXQXo6mm9NMjwQEcF_2boPF9xauc3AajiuF&options=w800);}}
@media (max-width: 1200px) and (min-width: 801px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1nNL8h6pVEAwiUrJfTsgB67ZCtQwWnkAkAzXQXo6mm9NMjwQEcF_2boPF9xauc3AajiuF&options=w1200);}}
/* Last tag covers anything over one higher than the previous max-size cap. */
@media (min-width: 1201px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1nNL8h6pVEAwiUrJfTsgB67ZCtQwWnkAkAzXQXo6mm9NMjwQEcF_2boPF9xauc3AajiuF&options=w1600);}}
  </style>

中身を一行目から順に日本語に直していくと、

背景画像にはこの画像を使うが、
幅が 200px 以下の時は幅 200px にリサイズした画像を使い、
幅が 400px 以下で 201px 以上の時は幅 400px にリサイズした画像を使い、
幅が 800px 以下で 401px 以上の時は幅 800px にリサイズした画像を使い、
幅が 1200px 以下で 801px 以上の時は幅 1200px にリサイズした画像を使い、
幅が 1201px 以上の時は幅 1600px にリサイズした画像を使う

という意味になります。ちょっとわかりにくいですね。

これを表にするとこんな感じです。

ブラウザの幅	画像の幅
～200px	200px
201px～400px	400px
401px～800px	800px
801px～1200px	1200px
1201px～	1600px

無駄に大きな画像を使わないようにするために、5段階にリサイズされた画像を使い分けているということですね。これにより、スマホやモバイル wifi とかでブログを見た場合、ブラウザの幅が小さければ通信量を抑えることができます。

試しにパソコンでブラウザの幅を伸ばしたり縮めたりすると、画像が切り替わるタイミングがよくわかります。

ちょっとした問題

しかし、この方法にはちょっとした欠点があります。最近のパソコンモニタは 1920px くらいの横幅のものが多く、ブラウザを画面いっぱいに広げるとそのサイズになりますね。ですが、この方法だと背景画像は最大でも幅 1600px までのものしか表示されません。

幅 1920px の画面に幅 1600px の画像を載せるので、320px の余白が生まれます。試しにブラウザを画面いっぱいに広げてみたところ、両サイドが途切れているのが見えました。

ブラウザを 1920px に広げたときの右端。
画像が途切れて薄ベージュ色の背景が見えている

せっかくフレキシブルなのになんだかもったいないですね。

自分で作った画像を使うとどうなる？

ちなみに、自分で作った画像をテンプレートデザイナーを使って背景画像にした場合、この部分の URL も変化します。

<style>
    body {background-image:url(http\:\/\/4.bp.blogspot.com\/-MC2tY9xHgRU\/WA9CHs284yI\/AAAAAAAAAW8\/4SyZqUnXuQsQppAd81rJsJ0tfRDlM1cXACK4B\/s1600\/DSC_0052.JPG);}
    
@media (max-width: 200px) { body {background-image:url(http\:\/\/4.bp.blogspot.com\/-MC2tY9xHgRU\/WA9CHs284yI\/AAAAAAAAAW8\/4SyZqUnXuQsQppAd81rJsJ0tfRDlM1cXACK4B\/w200\/DSC_0052.JPG);}}
@media (max-width: 400px) and (min-width: 201px) { body {background-image:url(http\:\/\/4.bp.blogspot.com\/-MC2tY9xHgRU\/WA9CHs284yI\/AAAAAAAAAW8\/4SyZqUnXuQsQppAd81rJsJ0tfRDlM1cXACK4B\/w400\/DSC_0052.JPG);}}
@media (max-width: 800px) and (min-width: 401px) { body {background-image:url(http\:\/\/4.bp.blogspot.com\/-MC2tY9xHgRU\/WA9CHs284yI\/AAAAAAAAAW8\/4SyZqUnXuQsQppAd81rJsJ0tfRDlM1cXACK4B\/w800\/DSC_0052.JPG);}}
@media (max-width: 1200px) and (min-width: 801px) { body {background-image:url(http\:\/\/4.bp.blogspot.com\/-MC2tY9xHgRU\/WA9CHs284yI\/AAAAAAAAAW8\/4SyZqUnXuQsQppAd81rJsJ0tfRDlM1cXACK4B\/w1200\/DSC_0052.JPG);}}
/* Last tag covers anything over one higher than the previous max-size cap. */
@media (min-width: 1201px) { body {background-image:url(http\:\/\/4.bp.blogspot.com\/-MC2tY9xHgRU\/WA9CHs284yI\/AAAAAAAAAW8\/4SyZqUnXuQsQppAd81rJsJ0tfRDlM1cXACK4B\/w1600\/DSC_0052.JPG);}}
  </style>

Blogger で最初から選べる画像とは保存の場所がだいぶ違うみたいですが、画像をアップロードすると自動的に 5 段階のリサイズ版の画像も同時に作られているみたいです。

選択できる画像は URL に 『?id=ファイル名&options=w200』 等と書いてありましたが、自分でアップロードした場合の画像は 『/w200/ファイル名』 というように、それぞれ s1600, w200, w400, w800, w1200, w1600 というフォルダに分けて同名のファイルが保存されているみたいです。

この設定を変更する場合

この設定はテンプレートの XML に書かれていない内容ですので、直接変更することができません。
（2016/10/29追記。ありました。次回の記事で詳しく説明します！）

もし w1920 とかの大きなものが必要であれば、javascript で既存のものを無効化し、別途 <style> を書くのが良いと思います。が、少し面倒ですよね。

両端が途切れないように画像を伸縮するだけでしたら、 <b:skin> の方で設定することが可能です。

変更前

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

変更後

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
background-size: 100% auto;
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

実は、背景画像を設定すると <b:skin> の中の $(body.background) の中にも背景画像の設定が含まれます。

しかしどのみち後から上書きされてしまう箇所ですので、ここを書き換えたところで背景画像は変わりません。

背景画像の提供元表示

そうそう、背景画像と言えば、ブログのフッター部分に画像の提供元が表示されています。

フッターに表示されるテキスト。画像提供者の DNY59 さんの名前がある

でもそんなコードがフッターに書かれているわけではないのに、不思議だなぁ……。そう思いながら背景画像を設定している場所を調べたら、実は <b:skin> の中のこんなところにありました。右の方にスクロールしてね。太字の箇所です。

<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left"
value="#e9e5dc url(//themes.googleusercontent.com/image?id=1nNL8h6pVEAwiUrJfTsgB67ZCtQwWnkAkAzXQXo6mm9NMjwQEcF_2boPF9xauc3AajiuF) no-repeat fixed top center /* Credit: DNY59 (http://www.istockphoto.com/googleimages.php?id=5253288&amp;platform=blogger) */"/>

この value の中の最後の方、 /* と */ の間にある部分が、何らかのプログラムを使ってフッターのところに追加されるようになっているみたいです。

背景画像を先ほどと同じくテンプレートデザイナーを使って変更すると、url() の中が新しい画像のファイルパスになり、 /* から */ までの部分がなくなっていました。

つまり、画像提供者の表示が無くなります。

自分用のブログなら自分で作った画像なので画像提供元の表示は不要です。

しかし、ネット上で公開されているフリー素材には、作者名の明記が必要なものもあります。そういった場合には必ず提供元をつけましょう。

提供元表示の付け方

まずテンプレートデザイナーで背景画像を変更し、[HTMLを編集] で <Variable name="body.background" ～> という要素を探します。そしたら、その value="～" の最後に以下のコードを書きます。

/* 名前 (名前に付けるリンク) */

ためしに、画像を差し替えて自分のブログ名を追加してみると以下のようになります。

/* まどうぐ工房 (https://madoug-kobo.blogspot.jp/) */

実行結果。名前が「まどうぐ工房」になっている

できました。些細なところですが、権利関係は気が付かないうちに違反していることもあるので、なるべく気にかけていきましょう。