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

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

レイヤー化

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

１．ヘッダーＡ（無地の背景色　＆　カテゴリーの表記）
２．ヘッダーＢ（無地の背景色　＆　検索フォーム）

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

１．ヘッダーＡ（カテゴリー画像の表示）
２．ヘッダーＢ（無地の背景色）
３．カテゴリーの表記（positonでヘッダーA内へ送り飛ばす）
４．検索フォーム（positionでヘッダーＢ内へ送り飛ばす）

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

<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;」にして表示上は消してしまいます）。まあ、雑なメモ書きなので、何をやっているか数年後の自分に雰囲気だけ伝わりさえすれば。

/* カテゴリー表記＿＿＿＿＿＿＿＿＿*/
#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;
}

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

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