■ 画像をランダム表示する

posted at 2005-09-15 14:20
このblogでは、バナー(左上の招き猫の画像)をランダム表示させて見るたびにかえるようにしてます。見るたびに微妙に変化すると楽しいかなぁというが初めの考え。flickrのバーをつけてるのも同じ理由。

画像をランダムに表示することは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[*]の数字を増やして書くべし。


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>

ポイントは赤字の箇所。Javascriptを無効にしているブラウザでは画像が表示されなくなっちゃうので、無効の時に表示する画像を書いときます。


あとは再構築して表示を確認。とりあえずトップページだけ再構築して、うまく表示されてOKならば全ページ再構築するとよろしいかと。


僕はバナー画像をランダム表示してるわけですが、全然ちがう画像が表示されるととまどうかなぁと思ってどの画像にも招き猫をいれてみてます。
これが結構恥ずかしいわけですよ。街中になんでか招き猫を撮ってるヤツ。写真をもっと増やしたいけどそれだけが難関。
posted by hirotomo | ☀ | permalink | Comment(6) | TrackBack(0) | カスタマイズ
comments
救われました〜ありがとうございます!!
Posted by ++++ at 2006-03-13 17:17
こんなことでよかったら!

そろそろランダム画像増やしたいなぁ。
Posted by ヒロトモ at 2006-03-16 09:08
検索でこのブログを発見してランダム表示が出来るまでにはなったのですが、画像が右に寄ってて直し方がわかりません。
何か良い方法はないでしょうか?もし良ければ教えていただけると助かります!
Posted by sato at 2006-12-13 16:13
突然の書き込み失礼致します。
検索エンジンでこのページまでたどり着きなんとか「ランダム表示」が出来るようにはなったのですが、表示画像が右に寄ってて直し方がわかりません。
もしよければ直し方をご伝授願えませんでしょうか?
よろしくお願い致します。

以下のアドレスのブログです。
http://hyt.seesaa.net/
Posted by sato at 2006-12-13 16:19
こんばんは。

#bannerで指定している
 padding:0px 0px 0px 60px;
が悪さしてるようです。

paddingは上、右、下、左の順で値をしているすので、ぴったりにしたい場合は

 padding: 0px;

でうまくいきます。


その下の文字は左にずらしたいのであれば、h1とdescriptionのpaddingで調整すればOKです!


cssはハマルと止まらないので休憩しつつがんばってくださーい。
Posted by ヒロトモ at 2006-12-14 00:56
直りました!助かりました。ありがとうございます!
Posted by sato at 2006-12-14 09:50

post a comment
name: [必須入力]

e-mail:

URL:

保存しますか?

comment:

認証コード: [必須入力]


・画像の中の文字を半角で入力してください



・半角英数字のみのコメントは投稿できません



×

この広告は180日以上新しい記事の投稿がないブログに表示されております。