2026年1月の記事一覧

「ポップアップ（ライトボックス）」は、画像をクリックすると画面がふわっと暗くなり、その上に大きな画像が浮き出てくる演出です。

別ページを作らなくて済むので管理がとても楽ですし、ユーザーも「戻る」操作をせずに×ボタンや背景クリックで元に戻れるため、非常に使い勝手が良い方法です。

CMSの「HTML編集」にそのまま貼り付けられる、「外部ファイル不要・この1セットで完結」するコードを作成しました。

ポップアップ機能付き 2×2画像レイアウト
これをそのまま貼り付けて、画像URLを差し替えるだけで動きます。

HTML 
<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">

<div style="flex: 1 1 280px; max-width: 48%; min-width: 250px; text-align: center; cursor: pointer;">
<img src="小さな画像のURL①" onclick="openLightbox('大きな画像のURL①')" style="width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<p style="font-size: 14px; margin-top: 8px;">説明文①（クリックで拡大）</p>
</div>

<div style="flex: 1 1 280px; max-width: 48%; min-width: 250px; text-align: center; cursor: pointer;">
<img src="小さな画像のURL②" onclick="openLightbox('大きな画像のURL②')" style="width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<p style="font-size: 14px; margin-top: 8px;">説明文②（クリックで拡大）</p>
</div>

<div style="flex: 1 1 280px; max-width: 48%; min-width: 250px; text-align: center; cursor: pointer;">
<img src="小さな画像のURL③" onclick="openLightbox('大きな画像のURL③')" style="width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<p style="font-size: 14px; margin-top: 8px;">説明文③（クリックで拡大）</p>
</div>

<div style="flex: 1 1 280px; max-width: 48%; min-width: 250px; text-align: center; cursor: pointer;">
<img src="小さな画像のURL④" onclick="openLightbox('大きな画像のURL④')" style="width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<p style="font-size: 14px; margin-top: 8px;">説明文④（クリックで拡大）</p>
</div>

</div>

<div id="lightboxOverlay" onclick="closeLightbox()" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; cursor: pointer;">
<div style="position: relative; max-width: 90%; max-height: 90%;">
<img id="lightboxImage" src="" style="width: 100%; height: auto; max-height: 90vh; border: 3px solid #fff; border-radius: 4px;">
<div style="position: absolute; top: -40px; right: 0; color: #fff; font-size: 30px; font-weight: bold;">&times;</div>
<div style="color: #fff; text-align: center; margin-top: 10px; font-size: 14px;">クリックで閉じる</div>
</div>
</div>

<script>
function openLightbox(url) {
document.getElementById('lightboxImage').src = url;
document.getElementById('lightboxOverlay').style.display = 'flex';
}
function closeLightbox() {
document.getElementById('lightboxOverlay').style.display = 'none';
}
</script>

この方法のメリットと使いかた
管理がラク: 移動先の「拡大ページ」をいくつも作成する必要がありません。このコードを1枚のページに貼るだけで完結します。
仕組み:

小さな画像をクリックすると、openLightbox という命令が走り、拡大用の黒背景が表示されます。
黒背景（または右上、下の文字）をクリックすると、closeLightbox が走り、パッと消えます。
書き換える場所:

小さな画像のURL①〜④：ページに最初から出ている画像のURL。
大きな画像のURL①〜④：クリックした時に出てくる高画質な画像のURL。
※もし「小さな画像」と「大きな画像」が同じもので良ければ、同じURLを入れておけばOKです。

スマホで動画を埋め込んだときに「サムネイル画像（1枚目の静止画）」が表示されず、再生ボタンだけになる現象はよくあります。
原因はいくつかありますが、ほとんどの場合は “poster画像を指定していない” ことが理由です。

 poster 属性をつけるとサムネイルが表示されます

HTML の タグに poster 属性 を追加すると、スマホでも確実に画像が表示されます。

poster="thumbnail.jpg"　→ 再生前に表示したい画像を指定します
これを入れないと、スマホ（特に iPhone / Safari）は「再生ボタンだけの黒い画面」 を出すことがあります。 

 iPhone（Safari）で1フレーム目が出ない理由

・iPhone の Safari は、自動で動画の1フレーム目をサムネイルにしない
・poster がない場合は再生ボタンだけを表示する
という仕様になっています。そのため、poster を指定するのが唯一確実な方法です。

 「1枚目のフレームをサムネイルにしたい」場合

動画編集ソフトやオンラインツールで1フレーム目を画像として書き出して、それを poster に指定します。

Connect‑CMS では「詳細設定」でポスター画像を登録
Connect‑CMS の動画アップロード画面には次の3つがあります：
・メディアアップロード（動画ファイルをアップする）
・埋め込み（YouTube などのコードを入れる）
・ 詳細設定 → ポスター画像を登録 ← ここが重要！ マニュアルに「動画の場合のポスター画像を登録する画面です」と書かれているので、 ここでサムネイル画像を指定すれば、スマホでも画像が表示されるようになります。

 Connect‑CMS でも、 ポスター画像を設定しないとスマホでは画像が出ません。

1フレーム目をサムネイルにする「簡便な方法」動画URLに #t=0.1 を付ける

HTML の <video>タグで、動画の URL の末尾に #t=0.1  を付けると、
動画の最初のフレームをサムネイルとして表示できます。
（0秒だと動作しないブラウザがあるため 0.1 秒が推奨）

これは HTML の一般的なテクニックで、
poster 画像を用意しなくても “1フレーム目を自動でサムネイル化” できます。
• Connect‑CMS の「埋め込み」機能で HTML を直接書ける。

HTML
<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL①" alt="画像1の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文①が入ります。</p>
</div>
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL②" alt="画像2の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文②が入ります。</p>
</div>
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL③" alt="画像3の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文③が入ります。</p>
</div>
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL④" alt="画像4の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文④が入ります。</p>
</div>
</div>