前回、フレキシブルな背景画像の設定はテンプレートにはないと言いましたが、テンプレートをじっくり読んでいたら、ありました！
間違ったこと言ってごめんなさい🙇
なので、今回は背景画像の設定を変更する方法についてご紹介します。
（前回：『背景画像のしくみと提供元表示 ～Blogger テンプレートを作るよ！ (23)～』）
設定箇所はココ！
背景画像を画面の大きさに合わせて変更している箇所は、 <b:template-skin> の次にありました。こんなコードです↓<b:if cond='data:skin.vars.body_background.image.isResizable and data:features.responsiveBackgrounds'>
<b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: "body" }' name='responsiveImageStyle'/>
</b:if>[Ctrl] + [F] で検索ウィンドウを出し、『responsiveImageStyle』 を検索するとこの場所に一発で飛べると思います。
このコードの意味
body.background という名前の変数に書かれている画像がリサイズ対応で、レスポンシブ・バックグラウンドが有効な時、かつプレビュー表示ではないときに responsiveImageStyle という名前のパーツが差し込まれるようです。そのパーツがブラウザの幅によって使用する画像を切り替える <style> だったということですね。
前回調査した時はこれに気づけませんでした。
しかし、探してもテンプレート内に responsiveImageStyle の定義が見つかりませんでした。おそらく、Blogger 側で最初から用意しているものなのでしょう。他にも、テンプレートに <b:includable> が載っていないのに使える <b:include> は存在します。
単語から、背景の変数名に .image を付けると画像を取得することができ、 さらに .isResizable を付けるとリサイズできるか否かを取得できるのだろうという推察は立ちます。
しかし、 features.responsiveBackgrounds のON/OFFをどこで切り替えられるのかは分かりません。知っている人が居たら教えてください！
詳しく調べてみる
ここで、<b:include> の data 属性で、そのスタイルでどの画像をどこに使用するかを記述しています。空白が多いのと、ダブルクォーテーションが " に変換されているので、少し読みやすくしてみましょう。
{
image: data:skin.vars.body_background.image,
selector: "body"
}『image: ～～』 で使用する背景画像を選択しています。デフォルトでは、<b:skin> 内にある body.background という名前の変数に書かれている画像を指定しています。
『selector: "～～"』 でその画像を背景として設定する要素を指定します。デフォルトでは body 要素になっています。おそらく css のセレクタの事だと思います。
実験
試しに selector の部分を書き換えてみましょう。メニューの背景にしてみます。{
image: data:skin.vars.body_background.image,
selector: ".navigation-outer"
}上のコードは見やすいように変形したものなので、実際のコードは以下のようになります。
<b:if cond='data:skin.vars.body_background.image.isResizable and data:features.responsiveBackgrounds'>
<b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: ".navigation-outer" }' name='responsiveImageStyle'/>
</b:if>すると、以下のようになりました。
 |
| メニューの背景に、ブログの背景画像が表示されるようになった |
確かに、ブラウザの大きさを変えると画像の大きさも変動します。
しかし、このままでは <b:skin> 内で背景画像を body に設定している箇所がそのままなので、今まで通り body に背景画像が表示されます。また、<b:include> に書かれた条件（cond 属性の条件）から、プレビュー画面ではメニューに背景画像が表示されません。
なので、変更する時はもう一か所、<b:skin> 内で普通に背景画像を設定している箇所も併せて変更する必要があります。
まとめ：背景画像を body 以外に使用する方法
背景画像を body 以外に使用する時に注意するべきポイントは、書き換えるべき場所は二か所あるという事ですね。１つは、以下のように <b:skin> 内の body に対して行っていた background 関係の設定を、別の場所に変えること。
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);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
}
.navigation-outer {
background: $(body.background);
$(body.background.override)
}もう１つは、今回発見した設定箇所の、『selector』 に設定する内容を変えることです。[ctrl] + [F] で検索ウィンドウを出して 『responsiveImageStyle』 で検索すると該当箇所まで一発で飛べるはずです。
<b:if cond='data:skin.vars.body_background.image.isResizable and data:features.responsiveBackgrounds'>
<b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: "body" }' name='responsiveImageStyle'/>
</b:if>
↓書き換える
<b:if cond='data:skin.vars.body_background.image.isResizable and data:features.responsiveBackgrounds'>
<b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: ".navigation-outer" }' name='responsiveImageStyle'/>
</b:if>おまけ１：大きさが変わらない背景にしたい
このレスポンシブ・バックグラウンド・スタイルというものが不要だというケースもあると思います。features.responsiveBackgrounds を OFF にする方法が見つからないうちは、 <b:if> ～ </b:if> を消してしまうのが一番手っ取り早いです。
ただ、消してしまうと後から復活させるときにどこかからコピーしてこなくてはならないので、条件だけ無効化して残しておきたいという人もいると思います。その場合は以下のように、 false and と付けておけば true になることはありません。
cond='false and not data:view.isPreview'おまけ２：背景色だけは body にも設定したい
background の設定を body から他の箇所に移すと、 body に設定される予定だった背景色まで消えてしまいます。背景色は body にも設定されてほしい！ という場合、一つ設定を追加しましょう。body {
font: $(body.font);
color: $(body.text.color);
background-color: $(body.background.color);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
} |
| メニューには背景画像を使い（左）、body にも背景色を設定した（右上） |
0 件のコメント :
コメントを投稿