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

 前回からの続き。CSSでは関数を扱うことが出来ない…という世間では常識らしい衝撃を喰らったあと、しばし呆然として虚空を見つめ、途中でシティローストの珈琲を濃いめに淹れ、大好きな花林糖と一緒に味わいつつ、さらにぼんやりと眼前の白い壁を見つめ時間を浪費しながら、その間に彼方此方彷徨った思考の経路はざっとこんな感じ。
 今回の問題が生じているのは、ページトップの画像を「背景画像」で扱おうとしたところにあるのではないか。背景としてではなく、普通に画像扱いとして表面に直置きすれば、以前作成した関数を少し手直しするだけで再利用出来るハズ。では当初なぜ背景画像で処理しようとしたのかと言えば、参考にした記事がそうしていたからという理由もあるけれど、ヘッダーに表示するカテゴリーのテキストと画像が干渉するから…。じゃあ、そのテキストはレイヤー化して通常画像の上に配置すれば良いのではないか!?

 …とまあ、別に斬新でもない、相変わらずビギナーな思いつきを経て、ではそれを早速実験してみることにします。

レイヤー化

 まずはレイヤー化です。これまでのヘッダー周辺の配置は、ざっくりと下記の1〜2の順番で並べていてとってもシンプルでした。

1.ヘッダーA(無地の背景色 & カテゴリーの表記)
2.ヘッダーB(無地の背景色 & 検索フォーム)

 だいぶ昔に、ホームページ作成記事なんかでレイヤー機能を紹介したものがあったように記憶しているのですが、これ以上余計なものは組み入れたくないので、割と最近の記憶に新しい方法でまかなうことにします。上記のレイアウトを下記のような1〜4の順番に変更し、カテゴリー表記と検索フォームをヘッダー領域から外に出して、positonで希望の場所へ戻します。

1.ヘッダーA(カテゴリー画像の表示)
2.ヘッダーB(無地の背景色)
3.カテゴリーの表記(positonでヘッダーA内へ送り飛ばす)
4.検索フォーム(positionでヘッダーB内へ送り飛ばす)

 実際の記述はこんな感じ(主要素のみ)。カテゴリー表記の「section id=”code_name”」をheader_Aの外へ、検索フォームの「section id=”search”」をheader_Bの外へ出してしまいます。

header.phpの記述

<header>

<div id="header_A">
<img src="仮画像.jpg">
</div>

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

<section id="code_name">
</section>

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

</header>

 そして、CSSの方はpositonを使い、外側に出したカテゴリー表記と検索フォームをそれぞれ本来表示させたい「header_A」「header_B」の内側へイイ感じに来るように調整して戻します(その際、カテゴリー表記と検索フォームを囲んでいるエリアは「height: 0px;」にして表示上は消してしまいます)。まあ、雑なメモ書きなので、何をやっているか数年後の自分に雰囲気だけ伝わりさえすれば。

position: relative; で表示位置を調整


/* カテゴリー表記_________*/
#code_name h1 {
	text-align: right;
        margin-right: -100px;
	position: relative;
        top: -116px;
        right: 0px;
        left: 0px;
        bottom: 0px;
	text-align: right;
}

/* 検索フォーム_________*/
section#search {
	margin: 0px auto;
	position: relative;
        top: -42px;
        right: 0px;
        left: 0px;
}

 これでひとまず普通の画像(仮)を直置きしたヘッダーAと、無地のヘッダーBの上にそれぞれ、カテゴリー表記と検索フォームを従来通りに重ねて表示させることが出来ました。次回はカテゴリーID毎の画像呼び出し関数の設置について。