【静的サイト制作】JavaScriptでリンク付きのサムネイル画像をランダムに表示する

　この記事では、静的なWebサイトにリンク付きのサムネイル画像をランダムに表示させる方法について説明します。

　あまり、頻繁にあるケースではないかもしれませんが、ご自身のWebサイトやブログ記事に、もしかしたら、個性を持たせる機能として取り込めるかもしれませんので、よろしかったらご覧ください。

1. リンク付きサムネイル画像をランダムに表示
2. JavaScriptでリンク付きサムネイル画像のランダム表示関数を作成
3. HTMLでJavaScriptの動作確認用テストページをつくる
4. WordPressの投稿記事に適用する
5. まとめ

1. リンク付きサムネイル画像をランダムに表示

　作成したのは、ページを開く(更新する)と、サムネイル画像をランダムに表示し、画像をクリックすると、対応したリンク先へと飛ぶことが出来る機能です。

　リンク付き画像のランダム表示は、JavaScriptで実現しています。

　以下の画像をクリックするとテストページへ飛びますので、動作を確認してみてください。

　以降では、本機能のJavaScript関数作成方法と、静的サイトのページ(HTMLファイル)へ適用する方法について説明します。

2. JavaScriptでリンク付きサムネイル画像のランダム表示関数を作成

　リンク付き画像のランダム表示を行うJavaScript関数(rand_output())のソースコードは、以下図2-1に示すとおりです。

　この例では、サムネイル画像の配列と、対応するリンク先URLの配列を指定し、表示選択された画像をクリックすることで、対応したリンク先に飛ばすことができるようにしてあります。

　ソースコード内番号の説明は、以下のとおりです。

➀：サムネイル画像の配列指定
➁：リンク先URLの配列指定
➂：Math.random()関数を使って、0以上1未満の範囲で､浮動小数点の擬似乱数を取得
➃：➂で取得した乱数を基にして、表示するサムネイル画像の配列番号を決定
➄：表示するサムネイル画像および、リンク先を指定したHTML文を作成
➅：➄で作成したHTML文をWebブラウザ上に表示

function rand_output(){
    // サムネイル画像配列
    var imglist = new Array(　　　　　　　　　　　　　・・・➀
        "https://hirokami1024.com/wp-content/uploads/2024/08/25413011-1.jpg",
        "https://hirokami1024.com/wp-content/uploads/2024/08/2176001-1.jpg",
        "https://hirokami1024.com/wp-content/uploads/2024/08/2176003-1.jpg",
        "https://hirokami1024.com/wp-content/uploads/2024/08/2176004-1.jpg",
        "https://hirokami1024.com/wp-content/uploads/2024/08/2176007-1.jpg",
        "https://hirokami1024.com/wp-content/uploads/2024/08/22300679.jpg",
        "https://hirokami1024.com/wp-content/uploads/2020/04/23260161.jpg",
        "https://hirokami1024.com/wp-content/uploads/2020/02/24512403.jpg",
        "https://hirokami1024.com/wp-content/uploads/2020/04/23215040.jpg");
    // リンク先配列
    var linklist = new Array(　　　　　　　　　　　　・・・➁
        "https://hirokami1024.com/seiza_tentai/",
        "https://hirokami1024.com/seiza-spring/",
        "https://hirokami1024.com/seiza-summer/",
        "https://hirokami1024.com/seiza-autumn/",
        "https://hirokami1024.com/seiza-winter/",
        "https://hirokami1024.com/12star/",
        "https://hirokami1024.com/hokuto7/",
        "https://hirokami1024.com/ophiuchus/",
        "https://hirokami1024.com/runaway-star/");
    // 0以上1未満の範囲で､浮動小数点の擬似乱数を返す
    var randno = Math.random();　　　　　　　　　　　・・・➂
    // (randnoを100倍して小数点を切り捨てた値 / 画像配列数)の余りを求めて
    // 表示対象のサムネイル画像を決定する
    var selectnum = Math.floor((randno * 100)) % imglist.length;　　・・・➃
    // HTML文の作成
    var output = "<p>" +
        "<A href=" + linklist[selectnum] + ">" +
        "<img border=0 src=" + imglist[selectnum] + " width=600 height=400></A></p>" ;　　・・・➄
    // Webブラウザ上に表示
    document.write(output);　　　　　　　　　　　　　・・・➅
}

図2-1 rand_output関数例(script_test.js)

3. HTMLでJavaScriptの動作確認用テストページをつくる

　動作確認用テストページのHTMLソースコードは、以下の図3-1に示すとおりです。

　JavaScript関数(rand_output())を呼び出すことで、リンク付きサムネイル画像のランダム表示を行っています。

　ソースコード内番号の説明は、以下のとおりです。

➀：JavaScriptの読みこみを行う。src=””には、読み込むJavaScriptソースファイルのパスを指定｡
➁：JavaScript関数(rand_output())を呼び出す。
➂：scriptが無効な場合、デフォルトの画像を表示。

<html>
  <!-- HEAD ココから -->
  <head>
    <title>test-1</title>
    <script type="text/javascript" src="js/script_test.js"></script>　・・・➀
  </head>
  <!-- HEAD ココまで -->
  <!-- BODY ココから -->
  <body>
  <h1 align="center"><b><font size="6">リンク付サムネイルをランダム表示</font></b></h1>
  <br/>
  <div align="center"><font size="3">
  <script>
    rand_output();　　　　　・・・➁
  </script>
  <noscript>
    <p><img class="p0" src="image/astro/DOUBLE_STAR/double_star_mid.jpg"></p>　　　・・・➂
  </noscript>
  画像をクリックしてください
  </font></div>
  </body>
  <!-- BODY ココまで -->
</html>

図3-1 テストページHTML(test-1.htm)