1748跡地

　てぃーだブログにログインして「デザイン」→「オリジナルデザインの登録」へ。

「スタイルシート」「トップページ」「個別記事」「アーカイブ」の4つが表示される。今回は「スタイルシート」は数値を見るだけで、ほかの3つを加工していく。

　まずはトップ画像の大きさを調べる。「スタイルシート」から、以下の部分を探し出す。

#container{ font-size:12px;
width:740px;
background-color:#ffffff;
margin:0px auto;
text-align:left;
border-left:1px solid #8c0000;
border-right:1px solid #8c0000;
}

#banner,#subbanner{
background:#D20900 url(xxx);
padding:0px 10px 10px 10px;
height: 200px;}

　これは僕の場合の例で、数値はそれぞれ違ったり、ないモノもあるかもしれないが、必要なのは2カ所。#containerのところにあるwidth:●●pxの数値がトップ画像の幅で、#banner,#subbannerのところにあるheight: ●●pxの数値がトップ画像の高さになる。

　実際には、周囲のマージンの分になるのか、この数値よりも縦横20ピクセルくらい大きめに作った方が良い。背景になるので、タグを使った縮小表示などが出来ないため、大きさに合わせた画像を作らないといけない。

　また、トップに画像の入っていないテンプレートは、先を読み進んでいくと画像を加える事が出来るが、変則的な形に画像の入っているテンプレートは、申し訳ないが今回は対象外。ブラウザの幅100％に表示するテンプレートも、幅が可変になってしまうので画像の大きさを決められず、適していない。

　どうしてもやりたかったら、ひと思いにテンプレートごと変えるとか・・・？

　画像の加工に関しては、以前に書いた「ブログのトップ画像を作る」や画像処理関係の本やサイトを参考に。

　ランダムに表示を変えるので、最低でも2枚以上のトップ画像が必要。この作った画像に「01.jpg」「02.jpg」「03.jpg」「04.jpg」・・・と01から連番を振って保存。管理画面の「記事の投稿」→「画像・動画の登録、一覧、削除」から画像だけアップロードしておく。

　gifとjpgの混在は出来ないので、gifの場合はjpgに変換して保存する。すべてgifの場合には、次のところで拡張子を書き換えても良い。

　この画像は出来たという事を前提に、次へ進む。

<div id="banner">

「オリジナルデザインの登録」の「トップページ」から、上の1行を探し出し、以下のモノと差し替える。

<!--　■■トップ画像表示■■　-->
<SCRIPT LANGUAGE="JavaScript">
<!--
e = Math.floor(Math.random() * 9)
i = e + 1
document.write('<div id="banner" style="background:url(//img01.ti-da.net/usr/kusano/0'+i+'.jpg);padding:0px 10px 10px 10px;height: 180px;">');
-->
</SCRIPT>
<noscript><div id="banner"></noscript>
<!--　■■トップ画像表示、ここまで■■　-->

　一部修正が必要で・・・

　赤い数字の部分に、アップロードした画像の数を入れる。3枚なら3を入れるし、僕は9枚作ったので、9を入れた。

　青い文字の部分は僕の場合の例で、実際には自分のブログのIDが入る。

　それから、height:180pxの数値を変えると、画像が表示される高さを変える事も出来る。ただし、画像が縮小される訳ではなく、小さくすると上で書いたように画像の下が切れていく。

　どこがどうなっているかの詳しい内容は省略するが、乱数を発生させて、連番を振った画像名を表示するという仕組みのJavaScript。最初と最後の行は、どこを加工したのか解りやすいようにするためのコメント行で、省いても良いし、■やその中の文字は変えて構わない。

　最後に緑の行だが、ブラウザで無効にしてあったりしてJavaScriptに対応しない場合の対処。ランダム表示は出来ないが「ブログのトップ画像の変更」で表示させた画像が表示される。なので、万全を期す場合には、「ブログのトップ画像の変更」もやった方が良いという事になる。

　問題なのは、いくつかのブラウザの場合に、JavaScript無効だとレイアウトが崩れてしまう事がある。書き方は合ってるはずなのに、そこだけが謎のまま。確率的には僅かに1〜2％だろうけど、気になるなぁ。

　変更が終わったら「トップページ」を保存、同じように「個別記事」「アーカイブ」も同じ部分を探し出し、書き換えて保存。

　と、まぁ、これで出来たはず。

　読んでみても難しくて出来そうになかったり、どうしてもうまく行かなかったりした場合には、単純に画像を変更するだけの「ブログのトップ画像の変更」の方を試してみると良いかも。

　ちなみに、てぃーだブログでは、ひとつのIDで5個ブログを作れて、非公開にする事も出来る。なので、公開しているブログと別にブログを作って、非公開で実験してみるとイイ。僕は何日も非公開で実験して完成したし。

　あ、それから、このままで出来るのは画像の数が1桁（9個まで）の時で、2桁以上になると、また違ってくる。これは、希望があったら書くかも。

　あと、良く読んで、何度やっても、うまく行かない場合の質問は、一応コメントなどにて受け付け。ただ、僕も完全には理解していないJavaScriptが含まれるので、あんまり難しい事は聞かないでね。