MisticEase™ – URLをポップアップサムネイル化するWordPressプラグイン
貼る公開する完了！
MisticEase™ は、YouTube、Vimeo、Dailymotion、メディアライブラリ画像の URL を貼るだけで、WordPress ページ上のクリックできるポップアップサムネイルや画像ライトボックスに変えるWordPressプラグインです。
対応 URL をエディターに貼り付けて公開すると、サムネイル、ポップアップ、すっきりした表示を MisticEase が自動で用意します。
ポップアップサムネイルをクリック。
そのまま読み続ける。
サムネイルを開いてみてください。タイトルリンクも試せます。ポップアップをページ上で動かせます。このデモでは、動画 URL、画像 URL、テキストリンクモードを使っています。
ポップアップが開いたら、少しドラッグします。その場所に置いたまま、続きを読むことができます。
|
 Caminandes |
 Agent 327 |
 Spring |
|
タイトルリンク
タイトルリンク |
サンプル画像 |
Big Buck Bunny |
1ページに、メディア体験を。
まず大きなサムネイルを1つ見せ、読者を別ページへ移動させずに関連メディアを追加できます。
メイン項目から始め、その近くに補足の動画や画像を置いて、ページを離れずに開けるようにします。
|
 Cosmos Laundromat |
 Coffee Run |
サンプル画像 |
動画ポップアップと画像ライトボックスは、貼り付けた URL から始まります。
エディター上では、ただの URL でした。
ページ上では、MisticEase がサムネイル、ポップアップ、そして先ほど試した移動可能なメディア体験を用意します。
いつものエディターを使えます。YouTube、Vimeo、Dailymotion の対応動画 URL を貼り付けるか、同一サイトのメディアライブラリ画像をリンクします。ページを公開すると、MisticEase がメディア体験を用意します。
t520/https://www.youtube.com/watch?v=lqiN98z6Dak
https://vimeo.com/1071247322段落には YouTube や Vimeo の URL を入れられます。公開されたページがメディア体験になります。
<p>https://www.youtube.com/watch?v=41hv2tW5Lc4</p>
<table>
<tr>
<td>https://www.dailymotion.com/video/x7h1qen</td>
<td>/New York/image-URL</td>
</tr>
</table>YouTube、Vimeo、Dailymotion、同一サイトの画像リンクは、通常の HTML やテーブルセル内に置けます。
YouTube、Vimeo、Dailymotion、メディアライブラリ画像を同じように使えます。
YouTube、Vimeo、Dailymotion の URL を貼り付けるか、同一サイトのメディアライブラリ画像をリンクします。MisticEase は、公開されたページ上でそれをポップアップ対応メディアとして用意します。1つの項目にカスタムサイズ、ラベル、キャプション、ポップアップ幅が必要な場合だけ、Slash Markup という小さなアイデアを使ってそれを容易に実現します。
小さな接頭辞で、結果を正確に。
ほとんどの場合は、URL だけで十分です。
1つの項目に別のサイズ、広めのポップアップ、テキストリンクが必要な場合は、URL の直前に小さな接頭辞を追加します。
シンプルな指示に従い、MisticEase が出力を整えるためのアイデアが Slash Markup です。
| 入力例 | 結果 | 動作 |
|---|---|---|
| t100/URL |
 |
小さな 100px のサムネイル。クリックもできます。 |
| t200/URL |
 |
1つの URL に 200px のサムネイルを設定します。 |
| t300/p1280/URL |
|
1つの URL に 300px のサムネイルと広めのポップアップを設定します。 |
| n/URL | サムネイルの代わりにタイトルリンクを表示します。 | |
| /ラベル/URL | 独自のラベルを使います。ラベルはテキストリンクとして表示されます。 | |
| /サンプル/p500/ttl AI 生成画像/URL |
/サンプル/p500/ttl AI 生成画像/https://mitum.me/wp-content/uploads/2026/06/sample03.jpg |
オプションを組み合わせます。ラベルを先頭に置き、対応する指定をまとめて続けられます。 |
- 接頭辞は URL の直前に置きます。
- 接頭辞と URL の間に、スペース、改行、HTML タグを入れないでください。
- ラベルには
/ラベル/を使い、先頭に置く必要があります。 - ラベルの後には、サムネイルサイズ、ポップアップ幅、タイトル / キャプションの指定など、対応する指定を組み合わせられます。
- URL の直後に句読点が続く場合は
///を使うことで、MisticEaseはURLの終端を理解します。
ページに寄り添うメディア。
大きめの画面では、開いたポップアップをドラッグすると Floating UX モードに切り替わります。
訪問者がページを読み続けたり、比較したり、手順を追ったりしている間も、メディアをページの横に置いておけます。
小さな画面では、ポップアップはよりシンプルな表示動作を使用します。
開いてドラッグし、そのまま読み進められます。
画像表示も動画と同じく簡単です。
同一サイトのメディアライブラリ画像を使い、画像をそのメディアファイルにリンクすると、ポップアップビューアーで開けます。また、動画と同じくURLからのポップアップにも対応しています。
ページに複数の画像がある場合、訪問者はそれらをシンプルな順序で移動できます。別のギャラリープラグインをすでにサイトで使っている場合は、画像ポップアップを無効化して、お使いのギャラリープラグインと共存することが出来ます。
|
夕暮れの大通り |
都市のスカイライン |
夜の街 |
ページを軽くするための工夫。
サーバー側サムネイルキャッシュ
動画サムネイルが用意されると、MisticEase は物理コピーをローカルに保存し、以降の表示で再利用します。
繰り返しリクエストを削減
キャッシュ後は、同じサムネイルを外部サービスへ繰り返し問い合わせる代わりに、サイトから配信できます。
キャッシュ上限の制御
必要に応じて保存容量の上限を設定できます。上限に達すると、古いキャッシュ済みサムネイルからクリーンアップされます。
ギャラリープラグインと共存
お気に入りのギャラリーやライトボックスをすでに使っていますか? MisticEase の画像ポップアップをオフにして、そのプラグインに任せられます。
シンプルな設定
普段使うデフォルトを一度設定します: サムネイル幅、ポップアップ幅、遅延読み込み、画像ポップアップ、Floating UX モード、任意の CDN ホスト。必要な項目だけ Slash Markup で個別に上書きできます。
プラットフォームを意識した、慎重な設計
対応動画サービスは処理されますが、既存リンク、コードブロック、HTML 属性、script / style ブロック、非対応 URL はそのまま残されます。
シンプルな操作。柔軟な出力。
設定画面は意図的に小さく保たれています。普段の公開には全体のデフォルトを使い、1つの URL に特別な扱いが必要な場合だけ Slash Markup を使います。
マルチサイトネットワークでは、管理者がサイト全体のサムネイルキャッシュポリシーを管理できます。ネットワークレベルのキャッシュ上限や CDN 画像ホスト許可リストも含まれます。
t220/ や t300/ などで上書きできます。p980/ や p1280/ などで上書きできます。読み続けられるページ。
動画、画像、参照資料がストーリーを中断するのではなく、その横に置かれるべき場面で使えます。
読者は必要なものを開き、読んでいた場所を保ったまま、ページを読み進められます。
レッスン
メモ、手順、説明の横に動画を置いておけます。
旅行記
ストーリーをその場に保ったまま、写真やクリップを開けます。
ポートフォリオ
プロジェクトの文脈を失わずに、訪問者が詳細を確認できます。
チュートリアル
読者が手順に沿って進む間、参照メディアを近くに置いておけます。
URLを貼るだけの WordPress用プラグイン MisticEase で、メディアリッチなページの制作時間を短縮してください。
WordPress.org から MisticEase をインストールし、対応 URL を貼り付けるだけで、公開されたページがサムネイル、ポップアップ、フローティングメディア動作を用意します。
MisticEaseはブロックエディターとクラシックエディターの両方で動作する WordPress用プラグインです。