WordPressで記事を書いていると、設定画面や操作手順などのスクリーンショットを掲載することがあります。
ただ、縦に長いスクリーンショットをそのまま載せると、画像だけでかなりの場所を取ってしまうんですよね。
画像の内容は全部見せたいけれど、長すぎると記事全体が間延びして、前後の説明も読みにくくなってしまいます。
そこで、**縦長画像をコンパクトに表示し、必要な部分をスクロールして確認できるプラグイン「Hwinote Image Scroll」**を作り公開することにしました。
Hwinote Image Scrollとは？
Hwinote Image Scrollは、WordPress標準の画像ブロックに縦スクロール機能を追加するプラグインです。
通常は縦に長く表示される画像も、表示領域の高さを制限することで、記事内にコンパクトに収められます。
表示しきれない部分は、画像の中をスクロールして確認できます。
また、画像全体を確認したい場合は、ボタンを押して記事内に展開することもできます。
今回こだわったのは、WordPress標準の画像ブロックをそのまま使えることです。
スクロール表示専用のブロックを追加する方式ではなく、いつも使っている画像ブロックに機能を追加しています。
そのため、どのブロックを使えばいいのか迷うこともありません。
普段どおり画像を挿入して、必要な画像だけスクロール表示をONにするだけです。
もちろん、スクロール表示を使わない画像は、これまでどおりの表示になります。
設定方法と各項目の説明
設定は、投稿編集画面から行います。
スクロール表示したい画像ブロックを選択すると、右側のブロック設定に専用の設定項目が表示されます。
プラグイン独自の設定ページを開く必要はなく、画像ごとに表示方法を変更できます。
下の画像は、Hwinote Image Scrollの設定画面、縦長のスクリーンショットを配置しています。
画像内をスクロールしたり、「画像全体を表示」ボタンを押したりして設定項目を確認ください。
① スクロール表示モード
スクロール表示の方法を選択します。
選べるのは「OFF」「手動」「自動判定」の3種類です。
| モード | 動作 |
|---|---|
| OFF | 通常の画像として表示 |
| 手動 | 指定した表示領域でスクロール表示 |
| 自動判定 | 画像が一定以上縦長の場合にスクロール表示 |
初期設定はOFFです。
そのため、プラグインを有効化しただけで、既存の記事の画像が勝手にスクロール表示へ変更されることはありません。
手動は、画像の長さに関係なく表示領域を指定したい場合に便利です。
自動判定は、一定以上縦長の画像だけにスクロール表示を適用したい場合に向いています。
なお、自動判定は設定した画像ブロックだけが対象で、記事内のすべての画像を自動的に変更するわけではありません。
② 自動判定の基準
自動判定を選択した場合は、画像がどれくらい縦長ならスクロール表示にするかを指定します。
選択できる基準は次の3種類です。
| 判定基準 | 対象となる画像 |
|---|---|
| 1.5倍 | 高さが横幅の1.5倍以上 |
| 2倍 | 高さが横幅の2倍以上 |
| 3倍 | 高さが横幅の3倍以上 |
初期値は2倍です。
例えば、横幅800px、高さ2,000pxの画像は、縦の長さが横幅の2.5倍なので、2倍の判定基準に該当します。
一方、横幅800px、高さ1,000pxの画像は1.25倍なので、対象外になります。
極端に縦長の画像だけを対象にしたい場合は3倍、少し縦長の画像も対象にしたい場合は1.5倍というように使い分けられます。
③ 表示領域の高さ・縦横比
スクロール表示する領域の高さを設定します。
指定方法は、「縦横比」と「高さ（px）」の2種類です。
縦横比で指定する場合
16:9、4:3、1:1などの比率を使って、表示領域の高さを決めます。
画像の表示幅に合わせて高さが決まるため、画面サイズが変わっても表示領域のバランスを保ちたい場合に便利です。
高さ（px）で指定する場合
500pxや600pxなど、数値で高さを指定します。
表示幅に関係なく、ある程度決まった高さに収めたい場合はこちらが便利です。
どちらも画像そのものを縮小・切り抜きする機能ではなく、表示する枠の高さを調整するものです。
枠に収まらない部分は、画像の中をスクロールして確認できます。
④ スマートフォン用の高さ設定
PCではちょうどよい高さでも、スマートフォンでは表示領域が大きすぎる場合があります。
そこで、スマートフォン用の高さを別に指定できるようにしました。
例えば、PCでは600px、スマートフォンでは350pxといった設定ができます。
スマートフォンでは画像の上を指で上下にスワイプして操作できます。
また、小さな画面でスクロール領域が大きくなりすぎないよう、画面の高さに応じた調整も行います。
⑤ スクロール案内・進捗表示
画像が途中までしか表示されていないと、スクロールできることに気付かない場合もあります。
そこで、スクロールできることを知らせる案内表示を用意しました。
また、画像全体のどのあたりまでスクロールしているかを示す進捗表示も利用できます。
どちらも必要に応じてON/OFFを変更できます。
なお、画像が表示領域に収まっていてスクロールが必要ない場合は、不要な案内が表示されないようにしています。
⑥ 画像全体の表示方法
スクロール表示は便利ですが、ときには画像全体を一度に確認したいこともあります。
そこで、「画像全体を表示」する機能も追加しました。
表示方法は次の2種類です。
記事内で展開する（初期設定）
「画像全体を表示」ボタンを押すと、スクロール領域の高さ制限が解除され、画像全体が記事内に表示されます。
もう一度「画像を折りたたむ」を押せば、元のスクロール表示に戻ります。
展開中は画像の上部と下部の両方から折りたためるため、かなり長い画像でも操作しやすくしています。
新しいタブで開く
元画像を別のタブで確認したい場合は、こちらを選択します。
記事内で画像を大きく展開したくない場合に便利です。
また、画像全体を表示するボタン自体をOFFにすることもできま
使用する際の注意事項
画像のファイルサイズは小さくなりません
このプラグインは、画像の表示領域を制限するものです。
画像を圧縮したり、ファイルサイズを小さくしたりするものではありません。
そのため、非常に大きなスクリーンショットを掲載する場合は、画像を適切なサイズに調整したり、WebPなどの形式を利用したりすることをおすすめします。
WordPress標準の画像ブロックが対象です
Hwinote Image Scrollは、WordPress標準の画像ブロックを対象としています。
カバーブロックの背景画像や、他のプラグインが独自に追加する画像表示ブロックには対応していません。
また、使用中のテーマやプラグインの組み合わせによっては、表示や操作方法に違いが出る場合があります。
すべての画像に使う必要はありません
通常の写真や短い画像までスクロール表示にすると、かえって読みにくくなる場合があります。
必要以上に使用せず、縦長のスクリーンショットや説明画像など、記事の中で場所を取りすぎる画像に使うのがおすすめです。
さいごに
今回のHwinote Image Scrollは、記事を書いているときに感じていた「長いスクリーンショットが場所を取りすぎる」という、ちょっとした不便を解消したくて作りました。
画像の内容は省略したくないけれど、記事はできるだけ読みやすくしたい。
そんなときに、スクロール表示でコンパクトに収められたら便利だなと思ったのがきっかけです。
また、専用の画像ブロックを新しく覚えるのではなく、普段使っている画像ブロックの中で使えるようにしたかったので、できるだけシンプルな仕組みにしています。
自分で記事を書くときに便利だと思えるものを形にしたプラグインですが、同じように縦長画像の掲載で困っている方にも使っていただけたらうれしいです。
コメント