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