4/4 毎日自動更新。「今日のおすすめ」欄を作る [ホームページ作成] All About

ソースのまとめ

今回の記事で作ったすべてのソースを以下にまとめて掲載しておきます。 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要素の部分だけです。