連載第131回
2017年5月7日
カテゴリー毎にヘッダ画像を変更したい(その3)

 前回からの続き。仮置きしていた画像を、既存の関数で呼び出す方式に置き換えて挙動をテストしてみたら、上図のように、アイキャッチ画像がそのままヘッダーに表示されました。参考にしたのは自分の書いた過去の記事。

 上の記事でカスタマイズした関数「post_icon ()」を、まずはヘッダーAにそのまま配置します。<h1>タグで括っているカテゴリー表記と検索フォームは、CSSのpositionを使って本来の配置場所に戻しています。

カテゴリーIDでヘッダー画像を変える(要点のみ記載)

<header>
<?php if(is_category()): ?><div id="header_A"><img id="ICON" src="<?php echo post_icon (); ?>"></div><?php endif; ?>

<div id="header_B">
</div>

<section id="code_name">
<h1>
<?php if(is_category()): ?><?php the_category(','); ?><a href="<?php echo home_url(); ?>"> ▲</a></h1><?php endif; ?>
</section>

<section id="search">
<?php get_search_form(); ?>
</section>

</header>

アイキャッチ画像用の関数を流用

 動作の結果を見て、既存のアイキャッチ画像用の関数は改造せず、そのまま「post_icon ()」を使い回せばイイんじゃないかと思いました。というのも、動作確認するまで気付かなかったのだけれど、カテゴリー用のアイキャッチ画像以外に、その記事専用のアイキャッチ画像を保存した場合、当たり前だけどその画像がヘッダーに配置されます。それがなかなかインパクトがあって良い。

 というわけで関数をいじる作業も無くなったところで画像の配置方法について調べました。今回やってみたいのは、例えばこんな感じの挙動を取るタイプ。

 この、ウィンドウ・サイズをグリグリ変化させても画像がフィットして、かつ縦横比が変わらないのって、どうやるんだろうか?と今さら疑問に思いググってみて、サラサラっと目を通して勉強になった参考サイト記事一覧はこちら。

 早速、次のような感じでアイキャッチ画像を作成してアップ、表示テストしてみました。

画像アップロード手順

  • 1024×1024の正方形jpg画像を作成。
  • アイキャッチ画像はCSSで円形にトリミングする方法を取る。
  • アイキャッチ画像として従来通り保存。
  • ヘッダー画像用のimgタグは【object-position: center center;】【object-fit: cover;】で表示領域にフィットさせる。

 ウィンドウをグリグリやっても画像が付いてくるプロパティは「cover」なのですね。また、CSSで円形トリミング出来るというのも驚きでした。そんな機能あったのか!もっと早く知りたかった!これらをまとめるとCSSはこんな感じ。

ヘッダー画像用のCSS

#header_A img {
	width: 100%;
	height: 420px;
	object-position: center center;
	object-fit: cover;
	margin: 0px;
	padding: 0px;
	background-color: #4d6a77;
}

4行目:画像の中央を表示エリアの中央に置く
5行目:縦横比を保ったまま表示エリアを埋める

アイキャッチ画像の円形トリミング

#post section#title img#ICON {
	display: block;
	width: 100px;
	height: 100px;
	margin: 0px 40px 0px -120px;
	vertical-align:bottom;
	float: left;
	border-radius: 200px;
}

8行目:画像サイズより大きい値で円形になる

 上記の設定で改めてテストしてみたのが下図となります。用意した画像は1024×1024の正方形1枚ですが、記事タイトル左横のアイキャッチはちゃんと円形にトリミングされ、ヘッダー画像はその表示エリア内にフィットしています。ウィンドウのサイズをグリグリ動かすと、追従してくれます。一度の手間で二度美味しい!しかもこの方法だとPhotoshop使わなくて済みます。

 ところで今回の課題で試行錯誤中、ちょっとヘマをして偶然にヘッダーBにもカテゴリー画像が表示されてしまったのですが、それがなんとなく80年代の安っぽいビデオエフェクトみたいな感じでウケたので、採用することに。ヘッダーAと同じプロパティで、ブレンドモードをいろいろ変えてみるとイイ感じに安っぽくなります。これで今回の作業は8割ほど終了しましたが、この後それぞれのカテゴリーに合った画像を用意するのに、まだもう少し時間がかかりそうです。

外部サイト参考記事
CSSブレンドモードで画像を彩ろう(Webクリエイターボックス)
CSS3のブレンドモードが素敵! (ICS MEDIA)

飽きたら止めます。