jQuery
fancyboxのJSとCSSを読み込み
<script src=”//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js”></script>
<link rel=”stylesheet” href=”//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css” />
HTMLを記述（WP固定ページ、投稿では動かない）
<a data-fancybox="gallery" href="/wp-content/uploads/2025/01/14.jpg" data-caption="あいうえおかきくけこ">
<img src="/img/〇〇〇〇.jpg" alt="ああああああ" width="1550" height="326" />
</a>
<a data-fancybox="gallery" href="/wp-content/uploads/2025/01/14.jpg" data-caption="あいうえおかきくけこ">
<img src="/img/▢▢▢▢.jpg" alt="いいいいいい" width="1550" height="326" />
</a>複数画像の場合はdata-fancybox=”gallery”を同じ名前にする
キャプションはdata-caption=”あいうえおかきくけこ”
width’ 560 コンテンツの幅（iframe、swf時）
‘height’340 コンテンツの高さ（iframe、swf時）
‘autoScale’ true ビューポートに収まるようにスケーリングするか。
‘true’の場合、表示するコンテンツがウインドウより大きいと自動的に縮小します。（画像だと無効？）
‘overlayShow’ true オーバーレイの有無
‘overlayOpacity’ 0.3 オーバーレイの不透明度
‘overlayColor’ ‘#666’ オーバーレイの色
‘speedIn’
‘speedOut’ 300 開閉時のスピード
モーダルウィンドウ時にスクロールバー分ズレる時は
CSSのbodyにwidth:100%;
が指定されていた場合は削除する。