ブログポータルサイト構築 ASP サービス CLOG
新しいテンプレートが大体出来たんで反映中っすよ。(まだ未完成)                 テーマも統一性もない やりたい放題のステキデザインっすよ。                 見やすさとか全然気にしてないっすよ、作った私も見づらいっすよ。                トップページは 1 記事しか表示されない嫌がらせ仕様っすよ。 サイドバーの項目が増えたんで 2 記事表示されるようにしたっすよ。                カテゴリーとか月別だと 15 件表示されるっすよ。
てぃーだブログ › エトゥ日記 › 役に立つかもよ。 › ヘッダー画像をランダムで変えようぜ!

2007年08月23日

ヘッダー画像をランダムで変えようぜ!

エトウの 「役に立つかもよブログ」 第二回目っす。


今回は 『ヘッダー画像をランダムで変える方法』 を教えていきます。

テンプレートをちょいちょい変えている人ならサクッと終わるくらい簡単っすよ。

-----------------------------------------
【1】 まず、ヘッダー用の画像を 2 枚以上用意しましょう。

いや、別に 1 枚だけでも良いんだけどさ、
1 枚をランダム表示させてもその 1 枚の画像が回ってるだけだから
実際に変わってるかなんて視覚で分からないでしょ?

だから 2 枚以上用意してくださいって事っすよ。
でも、20 枚とか 50 枚とかは作るの面倒だし、ブログ全体が重くなるハズなので (多分...)、
3~10 枚程度が良いくらいかと思います。( 12 枚まではアリかな...とは思います)
ってか、それくらいで抑えてください。


あと、画像 1 枚のファイル容量は 100KB 以下(大きくても 150KB 以下) にしてください。
容量が重ければ重いほど、読み込むのに時間がかかってしまいますので。。。。


-----------------------------------------
【2】 それをてぃーだにアップロード!

・・・さすがにこれのやり方は分かりますよね?


「わたしぃ、そんなのわかんなぁい~」 とかキモ・・・・  かわいらしいこと言う人は、

てぃーだブログのヘルプ 「記事に複数の画像を入れるには?」 を読んでください。




は? ヘルプどこにあるか分からんって?

片っ端から投げ飛ばすぞ!!
基本が出来てから応用はやりなさい!!


えっと...ヘルプの場所は、管理画面の右上にありますよ。
一応、画像も載せまスね。

ヘッダー画像をランダムで変えようぜ!


-----------------------------------------
【3】 ランダム表示の記述をテキストに貼る!

下記の javascript を メモ帳、秀丸エディタなどのテキストにコピーして貼り付けてください。

これを少し手直ししてからブログテンプレートに貼り付けていきます。
慣れてる人は、直接テンプレートに貼り付けても良いんですが、こっちが多分楽です。

<script type="text/javascript">
<!--
rdmimg=new Array();
rdmimg[0]="ヘッダー画像の URL (一枚目)";
rdmimg[1]="ヘッダー画像の URL (二枚目)";
rdmimg[2]="ヘッダー画像の URL (三枚目)";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#banner{background:#000 url('+rdmimg+') top center no-repeat;}</style>');
// -->
</script>


※こちらは三枚の画像をランダム表示させる場合の記述です。
  画像数を増やしたい場合は、

rdmimg[3]="ヘッダー画像の URL (四枚目)";
rdmimg[4]="ヘッダー画像の URL (五枚目)";

  という感じで rdmimg[x]=" ・・・・・・"; の数を増やしてください。

※画像が重い・多いと読み込むのに (多分) 時間がかかりますので、入れ過ぎないように...

【訂正】
システムチームの人に聞いたら、「この記述だったら、登録している画像すべてを読み込み
する動きはしないよ」 って言われたので、何枚でも何百枚でも登録大丈夫みたいです。

【私が思っていた上記のランダム表示記述の動き方】
  1.「一度、記述している画像を全部読み込む」 → 2.「ランダムで選ばれた画像を表示させる」

【システムの人が言った上記の記述の動き方】
  1.「記述でランダムに表示する画像が選ばれる」 → 2.「その画像だけを読み込みんで表示」


-----------------------------------------
【4】 javascript にヘッダー画像の URL を入れる!

まず画像一覧ページを開いて、さっきアップロードしたヘッダー画像の URL を確認します。


画像一覧にアップされた画像が表示されているので、それをクリックしてくだされ。

ヘッダー画像をランダムで変えようぜ!

すると、別ページが開いてその画像が原寸大で表示されます。
そのページの 「アドレス」 に記載されている URL がその画像の URL です。

ヘッダー画像をランダムで変えようぜ!

この URL をコピーして、javascript 内の ヘッダー画像の URL (一枚目) と入れ替えてください。
このとき、ヘッダー画像の URL (一枚目) を挟んでいる "" を消さないようにしてください。

二枚目、三枚目も同じようにやってくださいまし。
全部入れ替えたら、ランダム表示の javascript は出来上がりです。

ちなみに、私の場合は下記となりました。

<script type="text/javascript">
<!--
rdmimg=new Array();
rdmimg[0]="//img04.ti-da.net/usr/yamigeme/shinjyuku_001.jpg";
rdmimg[1]="//img04.ti-da.net/usr/yamigeme/kusunoki.jpg";
rdmimg[2]="//img04.ti-da.net/usr/yamigeme/kinjyou_001.jpg";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#banner{background:#000 url('+rdmimg+') top center no-repeat;}</style>');
// -->
</script>

※赤くなっている部分が貼り付けたヘッダー画像の URL です。
  変更箇所が分かり易いように赤くしただけなので、実際は色つきません。


-----------------------------------------
【5】 作成した javascript をテンプレートに貼り付ける。

これでやったら終わりでスので、

テンプレートのカスタマイズページの 「トップページ 」「個別記事」「アーカイブ」 の枠から
下記の部分を探してください。結構上の方にあります。

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body>
<!-- HEADER -->


見つかったかね?
では次に </head> の上を改行してください。

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

</head>
<body>
<!-- HEADER -->


で、改行して空いた箇所に javascript を貼ってください。

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
<!--
rdmimg=new Array();
rdmimg[0]="//img04.ti-da.net/usr/yamigeme/shinjyuku_001.jpg";
rdmimg[1]="//img04.ti-da.net/usr/yamigeme/kusunoki.jpg";
rdmimg[2]="//img04.ti-da.net/usr/yamigeme/kinjyou_001.jpg";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#banner{background:#000 url('+rdmimg+') top center no-repeat;}</style>');
// -->
</script>

</head>
<body>
<!-- HEADER -->


貼り付けたら、下の登録を押してテンプレート編集を保存してください。

※赤くなっている部分がテンプレートに追記した javascript の記述です。
  変更箇所が分かり易いように赤くしただけなので、実際は色つきません。

-----------------------------------------


はい、これでランダム表示の設定は終了です。
きっと思ってたよりは簡単だったんじゃないっすかね?


大体のテンプレートはこれでヘッダー画像のランダム表示が出来ますが、
このやり方では上手くいかないテンプレートもあると思います。

その場合は、一度これが対応しているテンプレートに変えてからやって頂くか、
css や javascript の勉強してやってください。




最後に...

「この設定したから変なになった!責任取れ!」
「私の日常返して欲しいわ!」

などの苦情は 一切受け付けません。

テンプレート編集に関しては 全てご本人さまの自己責任となります。



てぃーだには 「テンプレートを複数保存」 という素敵な機能が御座います。

もし、テンプレートのカスタマイズに自信の無い人は、現在使用しているテンプレートをコピーして、
カスタマイズ前のものを残した状態にして頂ければと思います。
「ちゃんとバックアップして、カスタマイズを間違っても元に戻せるようにする」 と言う事です。

元に戻せるように準備を怠っていなければ、苦情なんてありえない...と言うワケです。



また、「やり方が難しくて分からない!」 などの問い合わせは華麗にスルーとなります。
ご了承下しさいまし。




時間があったら、何か役に立ちそうな事、また書きまスね。
ここまでお読み頂き、ありがとう御座いました。


これの前に書いた 「CSS、簡単にいじれますよ。」 も良かったら見て下しまし。
http://yamigeme.ti-da.net/e1176959.html

では。。。



友達の the you が初プロモ作りよったんで、ヨロシクっすよ。



エトウの役に立つかも記事
■ Web Developer でスタイルシートを簡単にカスタマイズしようか? ※かなり長い
■ Javascript でヘッダー画像をランダムにしてみっか?
■ Javascript でヘッダー画像をランダムにしてみっか? ~補足~
■ ブログに地図貼ってみたくないか?
■ Jtrim 使って写真を加工してヘッダー画像にしてみるかい? ~基本~
■ Jtrim 使って写真を加工してヘッダー画像にしてみるかい? ~応用1~
■ Jtrim 使って写真を加工してヘッダー画像にしてみるかい? ~応用2~
■ 大きい画像をモブログしてもデザイン崩れないんだぜ? ※かなり長い
■ 画像編集ソフト AzPainter New!

※まとめ : ブログの役に立つかもよ。

同じカテゴリー(役に立つかもよ。)の記事
Jackson Pollock
Jackson Pollock(2007-11-28 19:55)


この記事へのコメント
出来ました!!
すごく分かりやすかったです☆
ありがとうございました♪
Posted by ☆JUNGO☆☆JUNGO☆ at 2007年08月30日 16:58
> ☆JUNGO☆ さん

無事に出来たのでしたら何よりっすよ。
ってか、記事を役立ててくれて、どうもありがとうっス!

これからも、たま~~~~~~~~~に役に立ちそうな情報を載せてきまス。
Posted by エトウエトウ at 2007年08月31日 09:15
ありがとうございます。
私も何とかできました。
画像の処理の仕方から
分らなかったんですが
記事のおかげで無事出来ました
ありがとうございます
Posted by たかかず at 2008年02月11日 19:11
> たかかず さん

はじめまして、こんにちわっす。

何とかカスタマイズが出来たんっしたら何よりっすよ。
何も分からないところから画像処理も出来たんっしたら上出来っすよ、いやマジで。

最近は仕事が忙しいので、中々更新出来ないんすけど、
たま~~~~~~~~~~~~~に役に立ちそうな情報載せてきマス。
Posted by エトウエトウ at 2008年02月12日 15:30
初めてコメントさせていただきます Toshigallagherと申します

エトウさんの記事を参考にさせて頂いて、自分のブログの画像も換えてみました 
大変参考&勉強になりました 有難うございました!
m(_ _)m
Posted by Toshigallagher at 2008年05月28日 17:13
>>>>> Toshigallagher さん (どう読むんすか?)

はじめましてっすよ。

役に立ったのなら何よりっすよ。
他にも役に立ったり立たなかったりの記事があるんで、Toshigallagher サンの Blog Life に役に立てて頂けたらっすよ。
Posted by エトウエトウ at 2008年06月01日 10:17
『エトウ』さん、はじめまして^^;

はるばる兵庫からやってきました~
ブログのカスタマイズをいろいろ調べていたらたどり着きました^^

早速、参考にさせていただき改造してみました~

ありがとうございました^^

ちょくちょく遊びに来ます!
Posted by 『わっち』 at 2008年06月11日 13:32
>>>>> 『わっち』 さん

はじめましてっす。

遠路はるばるお越しいいただきありがとうっすよ。
役に立ったんしたら何よりっスよ。

特に面白いのも載ってないっすけど、暇がありましたらまたどうぞっす。
Posted by エトウ at 2008年06月13日 09:26
こんばんわ&お久し振りです

Toshigallagherは「トシギャラガー」と読みます というか、読むと思います

大好きなアーティスト「Oasis」の中心メンバーの名字をパクって名乗ってて、その名字が確か「ギャラガー」と訳されているので、「トシギャラガー」となってるはずですw


これからも色々と参考にさせて頂きます
また遊びにきますね~
Posted by ToshigallagherToshigallagher at 2008年07月12日 02:39
>>>>> Toshigallagher さん

トシギャラガーって読むんすね。
あんま参考になる事は書いてないすけど、お暇なときにでもどうぞっすよ。
Posted by エトウ at 2008年07月15日 15:49
はじめまして。
ヘッダー背景のランダム表示はやってたんですが、
表示させたいheader部分に書くんだと思ってました。
こちらの記事で、<head>~</head>内に書くだけでOKだ!と分かって、
外部ファイル化が進んで、助かりました。
不勉強で恥ずかしいです。
他の記事も面白かったので、またお邪魔いたします。
有難うございました。
Posted by まぁ at 2008年07月27日 03:38
>>>>> まぁ さん

はじめましてっすよ。

<head> ~ </head> じゃなくて <body> の中でも大丈夫と思うっすけど、
慣例というか、住み分けというか、Javascript の記述は <head> 内なんすよ。

てぃーだブログスタッフなんで、「てぃーだブログでの動作するか」 が載せてく規準なんで、
もしかしたら、他のブログサービスさんでは思ったように動かないのもあるかもっすよ...

最近は、前以上に仕事やら生活やらが忙しいので、しばらくは役に立ちそうな記事あげないんすけど (それに充てれる時間が無いんすよ...)、ものすぐ内容の無い記事ばっかっすけど、色々やって他にやる事がもう無いくらい暇な時間にでも遊びに来てくれたらありがたいっすよ。



ってか、そろそろ何かブログ Life の役に立つものあげたいっすね~
Posted by エトウ at 2008年07月28日 15:35
※会員のみコメントを受け付けております、ログインが必要です。
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

てぃーだオフィシャルブログ
沖縄の食べ歩き・グルメ情報
沖縄そばを食べ歩く
沖縄タコスブログ
沖縄ファーストフードブログ
オキナワンアイスクリーム
沖縄のお菓子ブログ!
沖縄グルメめぐり
通堂ラーメン三昧ブログ
沖縄を食べつくす!
沖縄カフェ特集
沖縄料理店ブログ
沖縄ステーキ特集
パン屋さん巡り
沖縄暮らし・スポット情報
沖縄ビジネスホテルレポート
沖縄リゾートホテルブログ
沖縄県ゲストハウスレポート
沖縄ビーチマニアックス
沖縄県立博物館・美術館
沖縄夜景スポット!
沖縄道の駅ブログ
ぶらり「ゆいレール」の旅
沖縄ダム巡り
沖縄ダイビングショップ
沖縄マリンレジャー特集
沖縄のヒトビト BY てぃーだ
てぃーだ検索マニアブログ
暮らしや生活とビジネスに役立つネタ帳
沖縄イベント情報!
てぃーだオフ会告知ブログ
沖縄のスクール・お稽古特集
てぃーだGW特集
ホワイトデー ショップガイド
沖縄レンタカー特集
沖縄エステ・ネイル&リラクゼーション
みんなで作ろう!うちなー口辞典
てぃーだの特別企画ブログ
てぃーだオフィシャルブログ
てぃーだプレジデントブログ
島々ブログ
那覇祭りスペシャル!!
中城長雨被災応援メッセージ
オフィシャルブログ
「ネタ」提供ブログ
MOBLOG-モブログ委員会
てぃーだピックアップブログ
てぃーだブログ スタッフブログ 
てぃーだショップブログ
てぃーだブロガーズマガジン
てぃーだラジオポッドキャスト
沖縄のプレスリリースブログ!
ミュージックLIVE リリース!
FaQブログ
てぃーだスタッフの日常
沖縄スタッフの日常
タイ・イサーン好きのブログ
北京の情報をお伝えします
てぃーだブログ 商品開発部!
沖縄ブログ村
沖縄ブログ村
与論島(ゆんぬ)ブログ村
宮古島(みゃーく)ブログ村