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

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

<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 ()」を使い回せばイイんじゃないかと思いました。というのも、動作確認するまで気付かなかったのだけれど、カテゴリー用のアイキャッチ画像以外に、その記事専用のアイキャッチ画像を保存した場合、当たり前だけどその画像がヘッダーに配置されます。それがなかなかインパクトがあって良い。

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

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

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

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

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

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

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

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

飽きたら止めます。

2017-05-07 ＞ VPS＆WordPress引っ越しメモ