タイトルの背景画像をランダムで切り替える方法

タイトルが表示されている場所であるヘッダーの背景画像を指定した画像の中からランダムで選択し表示する方法の紹介です。

方法はいろいろ考えられますが、今回はstyle(CSS)をJavascriptでいじる方法を紹介します。

下記のソースを[レイアウト]⇒[ページ要素]からページ要素として追加します。
『ページ要素の追加』をクリックして『HTML/JavaScript』を選択して下さい。

※『画像のURL-?』部分を使用する画像のURLに変更してください。

[HTMLの編集]から直接ソースに追加しても構いません。

<script type="text/javascript">
<!--
rdmimg=new Array();
rdmimg[0]="画像のURL-1";
rdmimg[1]="画像のURL-2";
rdmimg[2]="画像のURL-3";
rdmimg[3]="画像のURL-4";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#header-inner{background:#000 url('+rdmimg+') top center no-repeat;margin: 0; padding: 0;width:900px;height:120px;}</style>');
// -->
</script>

使用する画像の数に応じて
『rdmimg[?]="画像のURL-?";』
の部分を追加or 削除して下さい。

widthとheightの値も適宜変更して下さい。

次にヘッダーを編集します。
[レイアウト]⇒[ページ要素]からページ要素のヘッダー(Header)の[編集]をクリックして今まで使用していたヘッダーの背景画像を削除します。

ここで画像を削除してしまうとタイトルに設定した文字が表示されるようになりますが、タイトルと説明の代わりに画像を使用している場合、タイトル、説明に設定している文字は表示したくありません。

そこで[HTMLの編集]からタイトル、説明を隠すようソースを編集します。

ctrl + Fキーを押して次の二つの文字を検索します。

『#header h1』
『.description』

それぞれの{}内に下記の一文を追加します。
『visibility:hidden;』

以下は例です

#header h1 {
...
height:0px;
display:none;
  visibility:hidden;
}

.description {
 ...
visibility:hidden;
}

これで終わりですが使用しているテンプレートによってはうまくいかない場合もあります。