はじめに
こんにちは、エイじーです。
Cocoonで記事に画像をよく貼り付けるんだけど、プレビューして画像をクリックしても拡大表示されないんだよね・・
でも、やっと拡大表示させる方法を見つけたよ
貼り付けた画像の中には、パソコンの画面をキャプチャーした画像もあり、これらの画像は、貼り付けたままでは文字が小さくて読めない場合が多くあります。そのような際に画像を拡大表示にできれば、文字などを読むことができて大変助かります。
Cocoonで記事に貼り付けた画像を拡大表示する方法が書かれた記事を何件か見かけますが、私の使っているブロックエディタ（Gutenberg）を使った記事になっていないため、それらの記事に従って、記事に貼り付けた画像の拡大表示をしようとしても上手くすることができませんでした。
また、プラグインの中にも貼り付けた記事内の画像を拡大表示するもの（Easy FancyBox）もあるそうですが、折角Cocoonに標準装備されているならば、それを使うほうが良いのに決まっているわけです。
今回はCocoonで記事に貼り付けた画像を、プレビューした際に拡大表示させる方法につて紹介したいと思います。
Cocoonの設定（画像を拡大表示させるための設定）
WordPressの管理メニューのCocoon設定をクリックし、さらに、画像タブをクリックして下さい。下にスクロールして「画像の拡大効果」の部分で赤で囲んだ「なし」以外の所にチェックを入れて下さい。私の場合は「baguetteBox（軽量、スマホ向け）」にチェックしました。
画像の拡大表示させる方法（単一画像の場合）
それでは、普通に画像を張り込んでみましょう。メディアライブラリーから前に使用した画像（パソコンの画面をキャプチャーした画像）を適当に選びました。
ただ張り込んだだけでは、プレビューで画像をクリックしても拡大表示がされません。
画像をクリックして、上部に出る赤で囲んだ鎖のようなマークをクリックすると、選択肢が出てきますので、赤で囲んだ「メディアファイル」をクリックして選んでください。
上の画像は、上述の設定をしてプレビューで画像をクリックして拡大できるようにした画像です。文字や数字がハッキリと見ることができます。
画像の拡大表示させる方法（複数画像の場合）
普通に複数画像を張り込んでみましょう。「ギャラリー」を選んで２枚の画像を張り込んでみました。
ただ、張り込んだだけでは、プレビューで画像をクリックしても画像が拡大されません。張り込んだ画像をクリックし、右に出てくるリンク先の選択肢の中で「なし」から「メディアファイル」に変更して下さい。
上述の設定をした複数画像を下に示します。
画像をクリックすると、拡大表示されることが分かります。
おわりに
こんなに、簡単に設定ができてうれしくなるね！
Cocoon様さまです。
Cocoon作成者の「わいひら」さんに感謝感謝です。
以上のように、初心者でも簡単に設定できます。
また、これらの設定は、既に投稿された記事に対しても有効ですので、ぜひ試してみてはいかがでしょうか。
コメント