ソースのまとめ

今回の記事で作ったすべてのソースを以下にまとめて掲載しておきます。 HTMLファイルへコピー&ペーストして試してみる際などにご活用下さい。

■head要素内に書くJavaScript

<script type="text/javascript"><!--
   // 画像・URLリストを配列で作る
   var imglist = [
      [ "photoA.jpg", "写真A", "pageA.html" ] ,
      [ "photoB.jpg", "写真B", "pageB.html" ] ,
      [ "photoC.jpg", "写真C", "pageC.html" ] ,
      [ "photoD.jpg", "写真D", "pageD.html" ] //注
   ];

   // 1つ選んで表示する関数
   function DailyImageLink() {
      // 日付を元にどれか1つを選ぶ
      var selectnum = Math.floor((new Date()).getTime() / (1000*60*60*24)) % imglist.length;
      // 画像とリンクを生成
      var output =
         '<a href="' + imglist[selectnum][2] + '">' +
         '<img src="' + imglist[selectnum][0] + '"' +
         ' alt="' + imglist[selectnum][1] + '"><br>' +
         imglist[selectnum][1] + '</a>';
      // 生成したHTMLを出力
      document.write(output);
   }
// --></script>

※「 // 注 」の部分(7行目)には、カンマを付けないようご注意下さい。
詳細は、前回の記事の2ページ目をご参照下さい。

■装飾のためのスタイルシート(例)

この部分は書かなくても問題ありません。ただ、冒頭のサンプルのように装飾して表示させるためのものです。

<style type="text/css"><!--
/* 全体の囲み */
div.box {
   border: 1px solid #0000cc; /* 全体を囲む枠線 */
   width: 240px; /* 囲みの横幅 */
   margin: auto; /* 中央寄せ */
}
/* 囲みの内側 */
div.box p {
   padding: 0.3em; /* 内側の余白 */
   text-align: center; /* 中央寄せ */
   margin: 0px; /* 外側の余白をゼロに */
}
/* 囲み上部のタイトル部分 */
div.box p.title {
   background-color: #0000cc; /* 背景色 */
   color: white; /* 文字色 */
}
/* 画像の表示 */
div.box p img {
   border: 0px; /* リンク画像の枠線を消す */
   vertical-align: middle; /* 下線が見える場合の対策 */
}
--></style>

■実際に表示したい箇所に記述するHTML

<div class="box">
   <p class="title">今日のおすすめ</p>
   <p>
      <script type="text/javascript"><!--
         DailyImageLink();
      // --></script>
   </p>
   <noscript>
      <p><a href="list.html">お勧めリストへ</a></p>
   </noscript>
</div>

※最低限必要なのは、script要素とnoscript要素の部分だけです。

上記のソースをすべて表示

上記のソースをすべて使って表示させると、以下のように見えます。

今日のおすすめ

9時0分~翌日8時59分までは、常に同じ画像が表示されます。 また、日付設定さえ正しければ、誰が見ても同じ画像が表示されます。

1つのページ内に複数個記述することもできます。(表示される内容はすべて同じです。)
※スクリプトは1回だけ書きます。HTMLを複数書けば、複数表示できます。

おわりに

今回は、たくさんある「お勧め」の中から、毎日1つを自動的に選んで表示する「今日のおすすめ」欄を作るJavaScriptをご紹介いたしました。 毎日1つのコーナーを紹介したり、1つのイラストや写真を紹介したりするのに使うとおもしろそうです。 ぜひ、ご活用下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。