タイトルバナーの下にもう一つタイトルバナー！？-第3弾

怒濤の連続投稿第3弾！

タイトルを画像にすると（背景画像で無く）文字のタイトルやサブタイトルが出なくなりますが、タイトル画像を貼った場合でも、タイトルバナー欄をふたたび出せることに気がつきました。

上記のちいさなうさぎがはねているところがその部分です。ここに以前試した「アニメーションなサブタイトル」のようにサブタイトルを利用してうさぎをはねさせても良かったのですが、今回は、サブタイトルは普通に文字表示に使って、うさぎは背景画像として領域の中央下に置く設定で貼り付けてあります。

このカスタムCSSは

#banner {
             display: block;
            }

#banner h1 {
            display: none;
            }

です。
これは一度消された#bannerを復活させて、タイトルとサブタイトルが表示されます。しかしタイトルはすでに画像にあるのでタイトルにあたる #banner h1だけをふたたび消しているわけです。

応用としては、画像にすでにタイトル文字が含まれているとき、ココログの文字のタイトルはダブるので表示したくない、しかしサブタイトルは表示させたい、というときなども使えます。
ちょっと面倒ですが、タイトル画像を上下二つに分け、上の部分はタイトル画像としてアップロードし、下半分は先ほどのCSSでアップロードした画像の下にできる領域に背景として貼り付けます。
そうすることによって、太字のタイトル文字を消しても、トップページへのリンクは上部の画像部分で確保され、下半分の画像部分にサブタイトルが入れられる、というわけです。一応実験してうまく行くことは試しました。
一見普通の画像タイトルだけど奥が深いかも。

なんて無責任に書いちゃいましたが、あまりにもにわか勉強なもので正直自分でも自信はありません。きっぱり。
なんの保証もできませんのであしからず。きゃっ。

おわり