トップ・アイキャッチを背景画像で表示する

トップ・アイキャッチを背景画像で表示する

前回、トップページのアイキャチをimgで設定しました。今回は背景画像として設定してみます。
テンプレートタグ<?php bloginfo(‘template_url’); ?>を使って画像のURLを指定しました。テンプレートタグはphpファイルでしか作動しません。
例えば外部スタイルシートの中でテンプレートタグを記述しても何も起こりません。
この場合は一手間かけて外部スタイルシートをphpファイルにして使っていきますが、今回は外部スタイルシートでは無く直接index.phpなどphpファイルの中にCSSを記述してみます。
まずはindex.phpの中のアイキャッチの部分のタグを

<div class="eye-catch">
    image
</div>

にします。
<div class=”eye-catch”>にstyle属性を記述します。

<div class="eye-catch" style="background-image: url(<?php bloginfo('template_url'); ?>/images/eye-catch.jpg">
    image
</div>

これでクラス名eye-catchの背景に画像が表示されます。
外部スタイルシートの中には

.eye-catch{
  height: 400px;
  color:transparent;
  background-color:lightgray;
  background-size: cover;
}

と背景全体を覆い尽くすようbackground-size: cover;を追記しています。
背景画像として設定できるようになりました。

外部スタイルシートもカスタムリンクできますが…

また外部スタイルシートも同じように<?php bloginfo(‘template_url’); ?>を使って直接URLを指定できますがテーマとして登録する場合はstyle.cssを必ず使用しないといけません。
テンプレートタグも決まっていて<?php bloginfo(‘stylesheet_url’); ?>と記述するとstyle.cssという名前のCSSにリンクします。どうせstyle.cssを使用するのであればstyle.cssの中に@import url(“任意のcss”);でリンクした方が効率的です。

トップ・アイキャッチにはスライダープラグインもある

このようにデザイン上必要な画像などはテンプレートタグの<?php bloginfo(‘template_url’); ?>を使って直接リンクします。条件として画像が動的に変化せず固定されるものに限られると思います。
この逆でトップ・アイキャッチを動的に切り替えて表示させたい場合はスライダー・プラグインを使います。