Bloggerで時間帯別に画像やテキストを自動で変化させる記述

サイトの管理者の皆さんは…

挨拶文やバナーなどの画像を…

時間帯によって違うものを使いたいと…

思った事はないでしょうか？

例えば…朝、昼、晩と…

雰囲気の違うバナーにしたい…ってなように…

しかし…公式の機能には…

Blogger をはじめ他のブログにも…

そんな機能はありません…たぶん…

そんな途方に暮れている…

私のような５０過ぎのオヤヂ世代の為の記事です…

例によって前置が長くなりそうなので…

自重してそろそろいきますか…

当サイトの header-wrapper を例として…

バナーの上からウエブ リボンを掛けて…

ウエブ リボンを指定時間毎に変化させてみましょう…

カスタマイズ後は以下のようになります

00:00 - 03:59 までの表示
ウエブ リボン画像1

04:00 - 08:59 までの表示
ウエブ リボン画像2

09:00 - 16:59 までの表示
ウエブ リボン画像3

17:00 - 18:59 までの表示
ウエブ リボン画像4

19:00 - 23:59 までの表示
ウエブ リボン画像5

先ずはウエブ リボンを作成しましょう…

勿論描画ソフトで自作しても良いですが…

QuickRibbon.com　
2016年5月の時点で
暗号化接続に未対応なのでリンクを削除

…が、お便利です…

150x150 のサイズで出来上がりますが…

タブやナビゲーション、リンクなどに被ると…

クリック出来なくなりますのでサイズ調整を…

描画ソフトで行って下さい…

ウエブ リボン画像は…

お好きなサーバーにホストしておきます…

次に「デザイン」で…header-wrapper に…

「HTML/JavaScript」ガジェットを追加します…

 Bloggerで全ての場所にガジェットを追加できるようにする

私は先々バナーも色々と弄るつもりなので…

default の Header ではバナー画像を指定せずに…

「HTML/JavaScript」ガジェットを使っています…

追加した「HTML/JavaScript」ガジェットの「編集」から…

「コンテンツ」に以下の javascript を貼り付けて…

「保存」して完了です…

時間帯別に画像やテキストを自動で変化させる「JavaScript」

<script type="text/javascript">
var msg1 = '<img src="ウエブ リボン画像1のURL" width="130" height="130" alt="Midnight Ribbon" style="position: absolute; top: 0px; right: 0px;"/>';
var msg2 = '<img src="ウエブ リボン画像2のURL" width="130" height="130" alt="Morning Ribbon" style="position: absolute; top: 0px; right: 0px;"/>';
var msg3 = '<img src="ウエブ リボン画像3のURL" width="130" height="130" alt="Working Ribbon" style="position: absolute; top: 0px; right: 0px;"/>';
var msg4 = '<img src="ウエブ リボン画像4のURL" width="130" height="130" alt="Twilight Ribbon" style="position: absolute; top: 0px; right: 0px;"/>';
var msg5 = '<img src="ウエブ リボン画像5のURL" width="130" height="130" alt="PrimeTime Ribbon" style="position: absolute; top: 0px; right: 0px;"/>';

var now = new Date();
var hour = now.getHours();

if(hour >= 0 && hour <= 3){
document.write(msg1);
}
if(hour >= 4 && hour <= 8){
document.write(msg2);
}
if(hour >= 9 && hour <= 16){
document.write(msg3);
}
if(hour >= 17 && hour <= 18){
document.write(msg4);
}
if(hour >= 19 && hour <= 23){
document.write(msg5);
}
</script>

ピンクの文字列はご自身に合わせて変えて下さい…

時間指定の半角数字は「～以上、～以下」で指定します…

画像サイズはご自身の画像サイズ、alt 属性、画像表示位置は任意で…

項目も任意で増減して下さい…

画像の代わりにテキスト文字も表示出来ます…

 HTML をルートディレクトリに書ければ、どのブログでも実装できます…

 表示位置は「表示されたウインドウの右上」なので…

ウインドウサイズを変えても右上に表示されます…

 現在は殆どのリンクで…

target="_blank" を使わない設定に変更しましたので…

style="position: absolute; top: 80px; left: 650px;" として…

outer-wrapper に float: left; を書いて…

ヘッダーの右上から動かないようにしています…

現在は「img」タグを使わない記述にしています…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】

Tips Universal Sidebar Main Footer Current-Label : Header