「STUDIOでページを開くたびにトップ画像をランダム表示したい！」
そんなことを思ったことはありませんか？
実際にYouTubeの視聴者さんから、
「STUDIOでトップ画像を更新するたびに画像を変わるようにしたいと思っています。色々試しましたが上手くいかず、可能でしたらそのような動画があると嬉しいです。」
というご質問をいただきました。
そこで今回は、STUDIOでホームページを開くたびに画像をランダム表示する方法をご紹介します。
この方法を使えば、
- 季節ごとの写真をランダム表示
- 制作実績を毎回違う順番で表示
- 商品画像をランダムで切り替える
など、ホームページに動きや新鮮さを加えることができます。
🎥動画で見たい方はこちら
この記事の内容は、YouTubeでも実際の画面を使って詳しく解説しています。
動画を見ながら一緒に作業したい方は、ぜひこちらをご覧ください。
完成イメージ
完成すると、ホームページを更新するたびに登録した画像の中から1枚がランダムで表示されます。
例えば、
- 1回目は画像A
- 更新すると画像B
- もう一度更新すると画像C
というように、ページを開くたびに違う画像が表示されるようになります。
活用例
このカスタマイズは、さまざまなホームページで活用できます。
- 季節ごとのメインビジュアル
- 制作実績のランダム表示
- 商品写真の切り替え
- キャンペーン画像の表示
- スタッフ写真の切り替え
ホームページを訪れるたびに違う印象を与えられるため、リピーターにも新鮮な印象を与えることができます。
STUDIOで準備するもの
まずはSTUDIOでページを用意します。
ページを更新するたびに登録した画像の中からランダムで1枚表示されます。
季節ごとの写真や制作実績、商品画像など、さまざまな用途で活用できます。
準備するもの
① ヘッダーを追加する
② ヒーローセクションを追加する
③ Blankを追加する
これで準備は完了です。
今回はヒーローセクションの画像は使用せず、「Blank」を使用します。
BlankはHTML・CSS・JavaScriptを書けるパーツなので、通常のSTUDIOでは実現できないカスタマイズも可能です。
ヒーロー画像は後に削除します。Blankを画像のようにヒーロー画像の上に追加してください。
コードを貼り付ける
Blankを開き、Iframeのコードを削除し、
以下のコードをそのまま貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
/* 画面いっぱいに画像を広げる設定 */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#random-bg {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="random-bg"></div>
<script>
// 1. あなたが用意した画像のURLリスト（何枚でも増やせます）
const images = [
'1枚目の画像のURLを入れる',
'2枚目の画像のURLを入れる',
'3枚目の画像のURLを入れる'
];
// 2. ランダムに1枚選ぶ
const randomIndex = Math.floor(Math.random() * images.length);
// 3. 背景として表示
document.getElementById('random-bg').style.backgroundImage = `url('${images[randomIndex]}')`;
</script>
</body>
</html>続いて、
画像URLをご自身の画像URLへ変更します。
設定が終わったら保存してください。
画像のURL
画像のURLはSTUDIOにアプロードをした画像を一度、追加からimageのブロックを使って配置してみてください。
上記の画像のように右側にURLが出てきます。こちらをコピーしてください。
「DOCTYPEから書いても大丈夫？」という疑問
Blankを使うと、
「ページの途中なのにDOCTYPEから書いて大丈夫なの？」
と思う方もいるかもしれません。
結論からお伝えすると、
SEOやホームページ全体への悪影響はありません。
その理由はiframeだから
STUDIOのBlankはiframeという仕組みで動いています。
iframeとは、
ホームページの中に、別のホームページを埋め込む仕組み
です。
今回書くHTMLやJavaScriptは、
Blankという小さなページの中だけで動いています。
STUDIOが自動生成しているホームページ本体とは完全に分離されているため、
- SEOが下がる
- ページ全体が壊れる
- HTML構造がおかしくなる
といった心配はありません。
iframeは身近な技術です
実は皆さんも普段からiframeを利用したページを見ています。
例えば、
- YouTube動画
- Googleマップ
- X（旧Twitter）の投稿I
- nstagramの投稿
これらもiframeを利用して表示されています。
家で例えると…
イメージしやすく例えると、
STUDIOで作ったホームページが「家」だとします。
Blankは、
壁に取り付けられたデジタルフォトフレーム
です。
今回のJavaScriptは、
そのフォトフレームの中だけで写真をランダム表示しています。
フォトフレームの設定を変更しても、
家そのものには影響しません。
そのため、安心して利用できます。
知っておきたい2つの注意点
① ネット環境が遅い場合
通信速度が極端に遅い環境では、
画像を読み込むまでの一瞬だけ背景が白く表示される場合があります。
通常の通信環境では、ほとんど気になることはありません。
② 画像の上に文字を配置する場合
タイトルやキャッチコピーを画像の上に配置する場合は、
レイヤー（重なり順）の設定が必要になります。
設定によっては、
文字が画像の下へ隠れてしまうことがあります。
ヒーロー画像を削除
もともと入ってるヒーロー画像を削除します。
上記の画像のように、元の画像を選択すると右側に表示されます。
青くなっている部分。こちらのURLを削除すると消えます。
最後にBlankを選択し
右側に表示された、ボックスを選択。
幅と高さを100％に変更すれば完成です。
動作確認
右上のにLIVEプレビューを押すと下記のようにURLが出てきます。
URLをクリックしてLIVEプレビューを見てみましょう。
更新を押して、登録した画像の中からランダムで1枚表示されれば成功です。
まとめ
今回は、STUDIOでページを開くたびにトップ画像をランダム表示する方法をご紹介しました。
JavaScriptと聞くと難しく感じるかもしれませんが、今回のようにコードを貼り付けるだけで実現できるカスタマイズもたくさんあります。
ぜひ、ご自身のホームページでも試してみてください。
関連動画
STUDIOの使い方やカスタマイズについて、YouTubeでも分かりやすく解説しています。
ぜひチャンネル登録もよろしくお願いします！
コメント募集中！
「こんなこともSTUDIOでできる？」
「この機能も解説してほしい！」
という内容がありましたら、ぜひコメントで教えてください。
今後の記事やYouTube動画で取り上げさせていただくかもしれません。
最後までご覧いただき、ありがとうございました！
コメント