[ブログデザインのカスタマイズ記録] ランダムヘッダー画像の上下に見出し的なものをつける

(これは私はこうやった、というメモ程度の内容です。しつこいようですがけっこう７めんどうなことをしているので関係なければ読まなくてもいいような内容です)

ヘッダー画像をランダムで表示する方法そのものは検索で見つかりますが、

ブログ名テキストを非表示にしてそれを普通にやるとblogのタイトルが何か理解んなくなります。

そこで、上下に無理矢理blogのタイトルっぽい画像を入れることで処理することを考えました。

/*tpp画像*/

/*タイトル部*/

#frame {

padding-top:75px;/*画像1の縦幅*/

background-image: url(ランダムヘッダー画像の上に配置する画像1);

background-repeat:no-repeat;/*繰り返さない*/

}

/*タイトル部画像の題名*/

#overHeader {

background-image: url(ランダムヘッダー画像の下に配置する画像2);

padding-bottom:40px;/*画像2のうち、題名部分の幅*/

background-repeat:no-repeat;/*繰り返さない*/

}

/*tpp画像=ランダムヘッダー可変用*/

#header {

background-image: url(ダミーの画像);

background-repeat:no-repeat;/*繰り返さない*/

height: 600px;/*ランダムヘッダー画像の縦幅*/

}

/*tpp画像x=固定ヘッダー画像*/

#wrap {

padding-top:570px;/*(画像xの縦幅)+5*/

background-image: url(画像xのURL);

background-repeat:no-repeat;/*繰り返さない*/

}

このblogの場合、

現在「@CagedCyborg」となっている800×75のものが画像1、
その下にランダムヘッダー画像が被さっている下にある800×640のものが画像2、

画像2のうち、実際に表示できる部分の縦幅は40、
ランダムで表示させる画像のサイズは800×600。

これで、ランダムで表示させる画像の上下にblogタイトルが見えるような表示になりました。

相変わらずなんでそうなるのか理解ってませんが、とにかくそうなるのです。

ちなみに、画像xの記述を追加し、その画像の横幅を目いっぱいに設定すると、

ヘッダー画像が2枚ある感じになります。

ランダムヘッダー画像がレースクイーン写真集的なものだったころは意味があるスペースだったかと。

X∞