説明
Hwinote Image Scroll は、WordPress 標準の「画像」ブロックに、必要に応じて有効化できる縦スクロール表示機能を追加します。長いスクリーンショットや画像付きの操作手順など、投稿内で大きなスペースを占めてしまう縦長画像に適しています。
主な機能:
* 既存の core/image ブロックに対応し、独自の画像ブロックは追加しない。
* スクロール表示は初期状態で無効のため、既存の画像には影響しない。
* 表示領域の高さを縦横比またはピクセル単位で指定できる。
* 画像ブロックごとに縦長画像を自動判定する。判定基準は高さと横幅の比率から1.5倍、2倍、3倍を選択でき、初期値は2倍。
* 画面幅が767px 以下の場合に別の最大表示高さを設定でき、表示領域の高さを画面の高さの80% 以内に制限する。
* JavaScript が利用できる場合、画像が実際に表示領域からはみ出したときだけスクロール案内を表示する。
* スクロール位置を示す進捗表示を必要に応じて有効にできる。
* 画像全体を表示する操作を追加できる。記事内で展開・折りたたみする方式 (初期値) と、元画像を新しいタブで開く方式から選択できる。
* 画像の展開中は上下に折りたたみ操作を表示し、折りたたむ際はページのスクロール位置を補正する。
* 公開ページでは、標準の画像ブロックのキャプションをスクロール領域の外側に配置する。
* 通常の画像リンクと、WordPress 標準の画像ライトボックス用 HTML を維持する。
* 軽量な専用 CSS と、外部ライブラリに依存しない公開ページ用 JavaScript は、スクロール表示を有効にした画像が描画される場合にのみ読み込む。
* 英語の原文、日本語翻訳 (PO/MO とエディター用 JSON)、翻訳テンプレート (POT) を同梱する。
自動判定は、スクロール表示を有効にしたうえで「自動判定」を選択した画像ブロックだけに適用されます。ほかの画像ブロックを走査したり変更したりすることはありません。判定には、HTML や WordPress のメタデータから取得できる画像本来のサイズを使用し、ブラウザーでも画像の読み込み後にサイズを再確認します。JavaScript が無効でサイズを取得できない場合は、画像全体が表示されます。
編集画面では、おおよその見た目を確認できるプレビューを利用できます。公開ページでは、実際に表示された画像をもとにスクロールの必要性や表示領域からのはみ出しを判定します。標準の「画像」ブロックで WordPress のライトボックスを有効にしている場合は、その機能も引き続き使用できます。画像全体表示の操作では、ページを移動せずに記事内で画像を展開・折りたたみするか、元画像を新しいタブで開くかを選択できます。どちらも標準のライトボックスを置き換えるものではありません。
関連リンク
スクリーンショット
インストール
- 「プラグイン」>「新規プラグインを追加」>「プラグインのアップロード」から、プラグインの ZIP ファイルをアップロードします。
- Hwinote Image Scroll を有効化します。
- ブロックエディターで、標準の「画像」ブロックを選択します。
- サイドバーの「画像スクロール表示」パネルで、「OFF (通常表示)」「ON (手動)」「ON (自動判定)」から選択します。
- 表示領域の高さの指定方法を選び、必要に応じてモバイル用の高さ、スクロール案内、画像全体を表示する操作を設定します。画像全体を記事内で展開するか、新しいタブで開くかも選択できます。
各機能は画像ごとに必要に応じて有効化できます。サイト全体に共通するプラグイン設定画面は追加されません。
FAQ
-
既存の投稿にある画像も変更されますか ?
-
いいえ。公開ページで表示方法が変更されるのは、スクロール表示を「ON (手動)」または「ON (自動判定)」に設定した画像ブロックだけです。
-
自動判定はどのように動作しますか ?
-
画像本来の高さを横幅で割った値が、選択した基準以上であれば縦長画像と判定します。初期値は 2 倍です。例えば、800×1600px の画像は 2 倍、800×1200px の画像は 1.5 倍になります。スクロール案内は、実際に表示された画像が表示領域の高さを超える場合にのみ表示されます。
-
スマートフォン用に別の表示高さを設定できますか ?
-
はい。「モバイル用の高さを指定」を有効にし、高さをピクセル単位で入力します。この設定は画面幅が 767px 以下の場合に適用されます。狭い画面では表示領域の高さが画面の高さの 80% を超えないように制限されます。それより広い画面では、通常の縦横比またはピクセル単位の高さ設定が適用されます。
-
プラグインを無効化するとどうなりますか ?
-
画像は、通常の core/image ブロックの HTML のまま保存されます。スクロール表示用のラッパーはページの表示時にのみ追加されるため、プラグインを無効化すると表示されなくなります。ブロックの設定値は保存されたままですが、通常の画像表示には影響しません。
-
日本語に対応していますか ?
-
はい。編集画面の設定項目と公開ページのテキストには、日本語翻訳が含まれています。その他の言語では、翻訳が追加されるまで英語で表示されます。
評価
このプラグインにはレビューがありません。
貢献者と開発者
変更履歴
1.0.0
- 初回公開版です。
- WordPress 標準の画像ブロックに、必要に応じて有効化できる縦スクロール表示機能を追加しました。
- 画像ごとの縦長画像の自動判定、画面幅に応じた高さ設定、スクロール案内、進捗表示、記事内での画像展開に対応しました。
- 英語の原文と日本語翻訳を同梱しました。
- スクロール表示を有効にした画像ブロックが描画される場合にのみ、公開ページ用の CSS と JavaScript を読み込むようにしました。