タイトル画像をランダムで変更させる：Type C

対象テンプレート
・ Ad-astra

HTMLの編集を行います。
HTMLの編集から、以下の部分を探してください。（上の方にあります）

<style type="text/css" media="all">
  @import "<%css_link>";
</style>

まず、この部分を次のように書き換えます。

<style type="text/css" media="all">
  @import "<%css_link>";
  #header {background-position : 50% 50%;}
</style>

この修正で、初期設定ではタイトル画像が右端にあわせて表示されるものを、タイトル領域の中央にあわせて表示させるようにしています。

さらに、この部分のすぐ後に、次の記述を追加してください。

  <script type="text/javascript">
   var imglist = new Array(
      "（画像のurl@1）",
      "（画像のurl@2）" );
   var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
   var output = '<style>#header { background-image : url("' + imglist[selectnum] + '"); }<\/style>';
   document.write(output);
  </script>

（画像のurl@1）、（画像のurl@2）という部分には使用したい画像のurlを入れます。使用したい画像が3個以上ある場合は、（画像のurl@1）の方の行をコピー・ペーストで増やしてください。このスクリプトでは画像は100個まで使用可能です。

なお、javascriptを使わないように設定されている環境で閲覧した場合、スタイルシートで設定されている画像が表示されますので、スタイルシート側の編集も必要です。
スタイルシート側は次のように編集します。編集箇所はナンバリングを参考に探してみてください。

/*[3.1]*/
#header {
  background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/adastra_title.jpg");
  background-repeat : no-repeat;
  background-position : 100% 0;
  padding : 170px 0 110px;
  color : #fff;
}

下線部分を、javascriptがオフの状態に表示させたい画像のurlに置き換えてください。