明日は大事な試験なのに、何故か勉強せずに部屋のレイアウトを変え始めてしまったりする…。業績を上げるための革命的アイデアを練り出さねばならない時に、何故か配置転換・組織変更に手を付けたりする…。喩えればそんな行動と同様、まるで意味の無い理由で、良く言えばシンプルなこのブログ(↑)にも、Twitterやこんなレイアウトのサイトのようなヘッダ画像を置いてみたいと思いました(↓)。
今、flfl.meの方ではチマチマと制作している楽曲を「カテゴリー」としてまとめているのですが、その楽曲を連想させるようなイメージを置いておくと(音楽を画像と紐付けることの良し悪しは置いておく)、なんだか箱庭的でこぢんまりした雰囲気になるような気がするし、そうすることで何となく制作活動にも気合いが入るような気もするのです。まさに試験の前日に勉強せず掃除を始めてしまう理由であるな。
とりあえずググる
ブログ開設時に参考にした書籍では、残念ながらこれくらいの要求にも応えられるような説明は書かれていないので、素直にググる。ググればだいたい親切な人が解決方法を詳しく公開してくれています。そこでヒットする上位のサイトを幾つか目を通してみると、どれも同じような方法で対応しているようです。
WordPress カテゴリー毎にヘッダ画像をCSSで変更する方法(Web Designerのしおり)
要約すると「カテゴリーIDを取得して、あらかじめ準備していたそれぞれに対応する画像とCSSを読み込む」というもの。なるほど、うまいこと考えるなーと感心したのですが、しかしよく考えると、その方法だとCSSの方にカテゴリーの数だけダラダラと追記していかなくてはならなくなる。僕はいずれ訪れるであろう、肉体の限界・意欲の消失も含めた「創作が完全に出来なくなる瞬間」まで、楽曲(カテゴリー)を増やし続けたいと思っているので、一度作ったらなるべく放置可能なものにしておきたい。
CSSには関数使えないのか!という発見と絶望
そこで以前「WordPress(15)アイキャッチ画像のカテゴリー毎の使い回し」で四苦八苦していた記事を思い出して、それを応用すれば良いと考えました。ワイルドカードを利用して汎用性を持たせれば、追記の必要も無くなるハズ。自分が書いた3年前の記事に助けられる…今の自分には全く対処出来そうにないことを、当時の僕は苦も感じず夢中になって解決してたことに驚くと同時に羨ましくも思ったり。そんな感慨に浸りつつ、下記のようにCSSを書いてテストしてみた。
[id*="header_"] { width: 100%; height: 300px ; background:url(../../uploads/img/head_img '.<?php echo $cat->cat_ID; ?>.'.jpg) no-repeat; }
1行目:div id=”header_X”でワイルドカード対応
4行目:カテゴリーID番号を、画像ファイル名の末尾に文字として追加
しかし…である。全く反応が無い。いろいろ確認し直してみたけどダメ。そこでまたネットでアチコチ調べ回ってみたら何と、CSSでは関数は使えないという、実は常識らしい現実にぶち当たった!いまさら。次回につづく。
CSS内でPHPの変数を使いたい。(かもメモ)
背景画像の拡大・縮小 → background-size !(0から目指すWebマスター)
CSS – background-position(とほほのWWW入門)
CSS : positionの「absolute」「relative」「fixed」のリファレンス(CSS Lecture)
珍しい(?)CSSプロパティたち
CSSブレンドモードで画像を彩ろう(Webクリエイターボックス)
CSS3のブレンドモードが素敵! (ICS MEDIA)
CSS3 の border-radius を使って円形のサムネイルを作る方法2つ(WEB ROCKETS)
2017-05-04 > VPS&WordPress引っ越しメモ