ホームページ作成/文字や画像の動的変更 (HTML,CSS,JavaScript)

毎日自動更新。「今日のおすすめ」欄を作る(3ページ目)

たくさんある「お勧め」の中から、毎日1つを自動的に選んで表示する「今日のお勧め」機能を作ってみましょう。1日の間、誰が何度見ても同じ内容が表示されます。翌朝9時に自動的に次の項目に変化します。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

作ったJavaScript(関数)を呼び出して表示する

最後に、前ページで作成したJavaScriptを使って、「今日のおすすめ」欄を表示させましょう。 HTML内で「今日のおすすめ」欄を表示させたい位置に、下記のソースを記述します。 (ページ内にいくつでも書けます。)

<script type="text/javascript"><!--
   DailyImageLink();
// --></script>

上記のソースに続けて、以下のような感じで「JavaScriptが使えない環境で閲覧された場合」用の記述も加えておきましょう。

<noscript>
   <p><a href="list.html">お勧めリストへ</a></p>
</noscript>

noscript要素の内容は、スクリプトが実行できない環境でのみ表示されます。 上記では、お勧めしたいページのリストを記述した「list.html」というページがあるとして、そこへのリンクを表示させています。 スクリプトが実行できなくても、望みのページへ誘導できる(もしくは望みの画像が表示できる)ように書いておきましょう。

ソースのまとめと装飾

これで、「今日のおすすめ」欄を作る作業は完了です。

次のページに、すべてのソースをまとめて掲載しておきます。コピー&ペーストして使ってみる際などにご活用下さい。

すべてのソースのまとめへ >>

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます