WordPressマンツーマンレッスン後記
今日２件目のレッスンは、画面の横いっぱいに広がる背景画像の設置。
トップページに大きな画像が入れられるテンプレートは多いですが、
各固定ページに独自の画像が入れられるテンプレートでない場合は、
自力で設置しなければなりません。
考え方１
まず、画像を入れたい場所が、固定ページの編集画面で入れた内容が
表示されるエリアの中か外かを見極める必要があります。
通常、WordPressの投稿や固定ページの編集画面からタイトルと本文を
登録すると、テンプレートファイルにあらかじめ仕組まれている所定の
場所に入るようになっています。
具体的には、the_title() や the_content() というWordPress独自の
関数がテンプレートファイルにPHPで書かれているからです。
通常、本文が入るエリアは画面の横いっぱいに広がるようなレイアウト
にはなっていませんので、
「固定ページの編集欄に画像を貼り付けたらいいのでは？」
という考え方は間違いです。
テンプレートファイルに書かれているHTML構造と、そこに割り当てて
あるスタイルシート（CSS）の対応関係や設定内容を読解して、
「画面の横いっぱいに広がっているエリアを探し出す」
ことが必須です。
もしそのようなエリアがテンプレートファイルに書いてなければ、
自分でテンプレートファイルに画像の表示エリアとなる枠組み
（一般には＜div＞タグでボックス化します）
を追加します。
考え方２
HTMLをある程度わかっている方は、＜div＞＜img＞＜/div＞のように
直接画像タグをテンプレートファイルに書きこめば良いと思うでしょう。
ただし、追加したい画像の表示エリアが、header.php のように全ページ
共通のテンプレートファイル内に含まれている場合は、＜img＞タグを
書き込んでしまうと全ページに同じ画像が表示されることになります。
特定のページに、そのページ専用の画像を表示したいならば、
共通のテンプレートファイルに＜img＞タグで画像を固定する考え方は
使えません。
この場合は、＜div class="bg"＞＜/div＞のように空っぽの枠だけを
テンプレートファイルに追加し、画像はスタイルシート（CSS）で背景
画像として敷き詰める考え方をとります。
WordPressには、各ページのHTMLの＜body＞タグに、ページの種類や
ページ固有のID、カテゴリーやタグなどといった識別情報を、class名
として列挙したものが挿入される仕組みがあります。
もちろんWordPressのコアシステムのPHPプログラムで、データベースの
情報を照合して適切な class名 の列挙を埋め込むように作ってある
からなのですが。
この原理を利用すると、＜body class="single single-page postid-12"＞
のように、ページIDをスタイルシート（CSS）で利用できることから、
.postid-12 .bg {
background: url(....);
}
といった、特定のページだけに適用されるスタイルを定義することが
できます。
完全マンツーマンのオンラインレッスンのご案内
2015年、パソコンジャンル評価1位
≫ ページ内の「先生に聞いてみる」ボタンでお気軽にご相談ください。
※平日の夜は予約が埋まりやすいのでお早めにご相談ください。
※Facebookでもプログラミング＆コーディングの本質を投稿しています。
Facebook（友達限定のプライベート投稿で本質的な情報発信中）
