SSブログ

blogのバナー画像をランダムに変更する方法 [日記]

このblogへ何度も来て頂いている方はご存じと思いますが、
バナー画像(一番上の画像です)がアクセスする毎にランダム
に変わる仕組みを入れています。

今日は、その方法を簡単にご紹介します。

#・・・その前に、この記事を開いているとバナーが出ていないと思います。
#この記事のタグが悪さをしているだけなので、気にしないで構いません。
修正しました(10/7 23:23)

今回ご紹介する方法は、下記を参考(スクリプトは同じです)
にして、so-netでのやり方を記載しました。
ヘッダー画像をランダムで変えようぜ!


(1)画像を用意します。
 ランダムに変わるので、2枚以上用意してください。
 (私の画像の大きさは、770ドット×220ドットくらいです)


(2)blogのファイル管理や新規作成から、(1)で用意した画像をアップします。
 その際、その画像への相対パス+ファイル名を控えてください。
 メモ帳等にコピーしておくと良いでしょう。

 たぶん、こんな感じになるはずです。
  /_images/blog/_6f8/locke/eririn2-722bd.JPG


(3)「デザイン」→「テンプレート管理」を選択し、
 ”HTML編集”にある、「HTMLの追加」を押してください。
 randhead_1.jpg


(4)HTML編集が開きますので、HTML名を入力してください。
 HTML名は何でも良いです。
 randhead_2.jpg


(5)下記コードをコピーし、メモ帳等にペーストしてください。
 ペースト後、< (全角)を < (半角)へ変更してください。
 全部で5カ所あります。

-- ここから -----------
<script type="text/javascript">
<!--
gazou=new Array();
gazou[0]="";
gazou[1]="";
gazou[2]="";
gazouhead=Math.floor(gazou.length*Math.random());
gazou=gazou[Math.floor(gazouhead)];
document.write ('<style type="text/css">#banner{background:#000 url('+gazou+') top center no-repeat;height:150px;}</style>');
// -->
</script>
-- ここまで -----------

 次に、以下の部分の "" の間に、
  gazou[0]="ココです";

 (2)で入力したパス+ファイル名をコピーします。
  gazou[0]="/_images/blog/_6f8/locke/eririn2-722bd.JPG";


(6)同様に、複数枚の画像をgazou[1]、gazou[2]にも記載します。
 (1)で作成した画像が2枚の場合は、
 gazou[1]まで入力し、gazou[2]の行は削除します。
 4枚以上ある場合は、gazou[3]・・・を作ってください。
 その際、[]内の数値を上げていくことを忘れずに。

 ※height:150pxの150は、高さ220くらいの場合です。
  (9)の表示確認で正しく画像が表示されているか確認し、
  必要に応じて増減させてください。


(7) (5)(6)で作成したHTMLを、
  </head>
  の前の行へペースとします。
  randhead_3.jpg


(8)「保存」を押します。
  randhead_7.jpg


(9)「編集」を押します。
  randhead_4.jpg


(9)「表示確認」を押して、バナー画像が正しく表示されるか確認します。
 何度か確認して、他の画像が出ることも確認してください。
 正しく表示されない場合は、(5)~(7)までを再度確認してください。
 randhead_5.jpg


(10)作成したHTMLを適用してください。
  randhead_6.jpg

とまぁこんな感じです。


少し長くなりましたが、
1つ1つ確実にやれば、そんなに難しくないと思いますので、
みなさんもチャレンジしてみては如何でしょうか。


nice!(60)  コメント(30) 
共通テーマ:blog

nice! 60

コメント 30

takao

なるほど。こんな事をやっていたんですねw
参考になりました。
しかし,私はそんなに表示させたい画像がないので,あれですね。
やってみたくはあるのですがw
by takao (2010-10-07 22:24) 

竜眼寺暁

なるほど、分かりやすいご説明をありがとうございます。
時間が空いたら挑戦してみたいと思います。^^
by 竜眼寺暁 (2010-10-07 22:44) 

bapio

私はTOPの画像を変更させるだけで丸一日以上費やした気がしますw
ランダムもずっとやってみたいと思ってたんですけどね、丸一日費やす覚悟のある時じゃないと困るのでw

こういう風に紹介していただけると非常に助かりますね~w
『やり方教えてくれませんか?』って聞くのもいいんですが、こうも一から教えて頂くのって気が引けるんですよねw
『そこから教えないとわかんないの!?』みたいなw

これなら私でもできそうです!
今度是非活用させていただきまする!


by bapio (2010-10-07 22:54) 

リュウ

こんなことが出来るなんて!!

固定はどうやってやるんですか?
by リュウ (2010-10-07 23:37) 

qoo2qoo

フラッシュかと思ってました。自分も時間がある時に試してみたいです♪
by qoo2qoo (2010-10-07 23:41) 

睦月紫音

なるほど!
参考になりました、機会があればやってみようと思います^^
by 睦月紫音 (2010-10-07 23:42) 

カルディア

おー、こういうネタを定期的作ると喜ばれそうですね。
ソネブロはこれまで何度か大きな仕様変更がされてきたので、
検索してもひと昔前の仕様だったりするんだよね。
今の仕様で知りたいって方もいると思うので、
こうしたコピペとちょっとした調整だけで済む説明はいいですね~。

自分は固定派ですが、やりたくなったら参考にさせてもらいまっせ!
てかそろそろTOP絵新しくしよーっとw

by カルディア (2010-10-08 02:23) 

tonta

なるほど!勉強になりました、是非チャレンジしてみたいですね!(^-)b

by tonta (2010-10-08 21:32) 

バズ

おはようございます!
なるほど、今度やってみます。
外部のサーバーに画像を置いて、絶対パスで指定しようと
思っていましたが、
so-netのファイル置き場への相対パスというのは
まったく想像付きませんでした^^

・・・・ところで、まず画像作りですね(笑)
by バズ (2010-10-09 10:02) 

プラチナ

スクリプトが有効にならないブログもありますから、ソネブロはいいですよね。
by プラチナ (2010-10-09 10:30) 

ロック

takaoさん、コメントありがとうございます。

やり方そのものは比較的簡単・・ですよね。
何か良い画像があればですが(笑)、試してみるのも良いかも?
困ったらコメントいただければお手伝いしますよw


by ロック (2010-10-09 14:23) 

ロック

竜眼寺暁さん、コメントありがとうございます。

この記事が何かお役に照れば幸いです。
また10/8 23時過ぎに一度更新しましたので、お気をつけください。
チャレンジ結果、お待ちしています(^^)

by ロック (2010-10-09 14:23) 

ロック

bapioさん、コメントありがとうございます。

bapioさんは、既にマウスオーバー技も経験済みですので、
こちらの方が少し面倒だと思いますが、手順も1つ1つ書きましたので、
難なく出来ると思います。

bapioさんは、たっぷりと画像があって羨ましい・・・(^^;
是非是非、チャレンジしてくださいませ。

by ロック (2010-10-09 14:24) 

ロック

リュウさん、コメントありがとうございます。

固定方法ですが、この記事を利用する場合は、
(5)でgazou[0]だけ、画像を指定すればokです。

別なやり方もあるのですが、
「テンプレート選択 & CSS編集」からテンプレートを編集、
以下の#bannerに画像を追加すればokです。

#banner {
padding:140px 0 16px 0;
border-bottom:1px solid #333;
background-image: url("/_images/blog/_6f8/locke/eririn2-722bd.JPG");
}

こんな感じかと。

by ロック (2010-10-09 14:24) 

ロック

qoo2qooさん、コメントありがとうございます。

私にはフラッシュを作る技術はなかったりします(汗)
単なるjpg画像を乱数を使って表示させるだけなので、簡単だと思います。
是非チャレンジしてみてください。

by ロック (2010-10-09 14:27) 

ロック

睦月紫音さん、コメントありがとうございます。

睦月紫音さんもご自分でイラストを描かれるので、良いですね。
是非チャレンジしていただいて、色々な画像をランダムで公開してみて
ください。
これで+αの楽しみが出来るのではないかと思います(^^)

by ロック (2010-10-09 14:27) 

ロック

カルディアさん、コメントありがとうございます。

この記事のネタ自体は、以前から考えていたのですが、
ようやく実現することができました。
たまーにですが、やり方を探る検索がヒットしていたこともあって、
需要もあるのかと思いまして。

その他というと、マウスクリックとかですかね??
これもすぐに記事には出来るので、別途作成しようと思います。

カルディアさんのトップ画像は、3人で終わりでしたっけ?
しかし、自分で描ける人が羨ましいです・・・

by ロック (2010-10-09 14:28) 

ロック

tontaさん、コメントありがとうございます。

この記事が何かの参考になれば幸いです。
少し他人とは違ったことをするだけで、楽しさが増すと思いますので、
是非チャレンジしてみてください。

by ロック (2010-10-09 14:30) 

ロック

バズさん、コメントありがとうございます。

バズさんは知識がおありそうなので、
恐らく簡単にできるんじゃないかと思いますので、
是非チャレンジしていただきたい、と思います。

画像に関しては難しい問題ですね(^^;
デジカメで撮影した画像なども少し考えてはいるのですが、
なかなか実現に至ってないです(汗)

by ロック (2010-10-09 14:38) 

ロック

プラチナさん、コメントありがとうございます。

確かにそうですね。
それからソネブロでも、使用しているブラウザのJava-Scriptをoffに
してると動かないことを記事に書くのを忘れてましたw
まぁ、そういう人は少ないかなと思いますが。。。

by ロック (2010-10-09 14:41) 

凪

その昔,ロックさんがコレを始められたのを拝見し,真似してやってみたことを思い出しました。
その節はお世話になりました^^*

by (2010-10-10 04:53) 

バズ

できました!
ありがとうございます♪
ちょっと画像が重いみたいで、トップの表示が遅れますが(笑)
by バズ (2010-10-10 10:34) 

ロック

凪さん、コメントありがとうございます。

あの時は確か、コメントにちょっと書いただけで
あまり詳しくは書いていなかったんですよね。
(やり方は同じだったはずですが)

私もフィギュアの写真をバナーに使いたいのですが、
なかなか使うべき写真が撮影できていなかったりします。
また少し課題を決めて撮影頑張るか・・・

by ロック (2010-10-11 11:56) 

ロック

バズさん、コメントありがとうございます。

おお、できましたか!
この記事を書いてから、最初の成功ですね!
結果を教えていただき、ありがとうございました。
書いた甲斐がありました(^^)

参考にですが、
私の使っている画像(jpg)は、30kくらいですね。
これだとほぼラグなしでいけるかと思います。

by ロック (2010-10-11 11:56) 

白吉

ロックさん初めまして。
大変参考になります。
早速やってみます!
by 白吉 (2010-10-11 16:54) 

ロック

白吉さん、初めまして
コメントありがとうございます。

1つ1つ細かく説明したと思いますが、できましたでしょうか。
当記事が少しでもお役に立てれば幸いです(^^)

by ロック (2010-10-12 20:53) 

mana

ほんっと今更なコメントでスイマセンww
何気に今日、この記事みながらやってみました。

わ、私にも出来たwww

分かりやすい解説で、これなら誰でも出来ますね!
私が出来たんだから大丈夫ですww
ありがとうございました!w
by mana (2010-10-28 16:50) 

ロック

manaさん、コメントありがとうございます。

成功した!という書き込みが一番嬉しいですね。

丁寧には書いたつもりですが、実際知らない人が読んだら、
どうなのかな?という不安もありましたので。。。

manaさんを含め、何人かの人が成功したみたいで、
この記事を書いた甲斐がありました!

by ロック (2010-10-29 00:46) 

黒兎

すみません、こちらの記事を参考にぜひ、バナー画像を挿入させていただきます。
ブログってすごく難しいので参考になります!!
by 黒兎 (2010-12-14 23:53) 

ロック

黒兎さん、コメントありがとうございます。

是非是非チャレンジしてみてください!
もしうまく行かなかったら、コメントいただければ
出来る限りのことはお教えいたします。

なので、頑張って!!

by ロック (2010-12-15 00:36) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。