画像をランダムに表示することはJavascriptを使ってあっさり設置。バナー以外にも使い道がありそう。
1. ランダム表示させたい画像を準備
なにげにこれが一番大変。せっせと画像をつくってファイルマネージャーに保存。
バナーの様に使いたいならば大きさをそろえるのがいいかも。デザイン的に崩れません。
2. Javascriptのダウンロード
基本となるJavascriptをダウンロード
-> bannerchenge.js
windowsなら上のリンクを右クリックして「対象をファイルに保存」
macなら上のリンクをctrlを押しながらクリック"リンク先のファイルをダウンロード"（らしい）
適当なとこに保存して、メモ帳で開く
2行目から1番で保存した画像のURLをせっせと書いていきます。
img[0] = "http://xxx.seesaa.net/image/xxx.jpg";
img[1] = "http://xxx.seesaa.net/image/xxx.gif";
img[1] = "http://xxx.seesaa.net/image/xxx.gif";
画像の分だけimg[*]の数字を増やして書くべし。
3. Javascriptのアップロード
2番でダウンロードして修正したJavascriptファイルを、ファイルマネージャーでアップロード。
どうやらimageフォルダにはアップロードできないらしいので、別名のフォルダをつくってそこにアップ！
自分は"js"というフォルダをつくってそこにアップロードしてます。
4. Javascriptを組み込む
[デザイン]→[HTML]で、Javascriptを組み込ませます。
初めてHTMLをいじる場合は、[HTMLの追加]で新規に作成してからそれを修正。
HTML編集で、上の方に入れ込む（<% if:blog.has_foaf -%>の上あたりが手頃かも）
<script language="JavaScript" src="http://xxx.seesaa.net/js/bannerchange.js"></script>
赤文字のところは3番で自分でアップしたJavascriptのURLを記入。
5. コンテンツに埋め込む
デザイン→コンテンツで、画像を表示するコンテンツを自由形式で作成します。
コンテンツの自由入力欄で以下を記入
<script language="JavaScript">
<!--
setBanner();
// -->
</script>
<noscript>
<img src="http://xxx.seesaa.net/image/xxx.png" border="0">
</noscript>
<!--
setBanner();
// -->
</script>
<noscript>
<img src="http://xxx.seesaa.net/image/xxx.png" border="0">
</noscript>
ポイントは赤字の箇所。Javascriptを無効にしているブラウザでは画像が表示されなくなっちゃうので、無効の時に表示する画像を書いときます。
あとは再構築して表示を確認。とりあえずトップページだけ再構築して、うまく表示されてOKならば全ページ再構築するとよろしいかと。
僕はバナー画像をランダム表示してるわけですが、全然ちがう画像が表示されるととまどうかなぁと思ってどの画像にも招き猫をいれてみてます。
これが結構恥ずかしいわけですよ。街中になんでか招き猫を撮ってるヤツ。写真をもっと増やしたいけどそれだけが難関。
| 
そろそろランダム画像増やしたいなぁ。
何か良い方法はないでしょうか？もし良ければ教えていただけると助かります！
検索エンジンでこのページまでたどり着きなんとか「ランダム表示」が出来るようにはなったのですが、表示画像が右に寄ってて直し方がわかりません。
もしよければ直し方をご伝授願えませんでしょうか？
よろしくお願い致します。
以下のアドレスのブログです。
http://hyt.seesaa.net/
#bannerで指定している
padding:0px 0px 0px 60px;
が悪さしてるようです。
paddingは上、右、下、左の順で値をしているすので、ぴったりにしたい場合は
padding: 0px;
でうまくいきます。
その下の文字は左にずらしたいのであれば、h1とdescriptionのpaddingで調整すればOKです！
cssはハマルと止まらないので休憩しつつがんばってくださーい。