wordpress cocoon 画像をクリックしたら拡大できる設定方法

目次 ・ 概要

1 画像拡大の設定(投稿画面から)
2 画像拡大の設定(cocoon設定画面から)
3 画像拡大の設定後
4 拡大設定をしても大きくならない場合 投稿画像のサイズについて
5 終わりに もう一つの拡大方法
※この記事では画像拡大設定をしています。

1 画像拡大の設定 (投稿画面から) 

画像を拡大する設定投稿画面からの手順リンクボタン

画像をクリック >ツールバーが表示 >リンクをクリック

画像を拡大する設定手順 メディアファイルをクリック

メディアファイルをクリック


画像を拡大する設定手順 決定する

入力窓口がメディアファイルになっているのを確認 >enterまたは画像設定範囲外でクリック 

これで画像拡大設定としては出来ましたので拡大することは可能です。あとはcocoon設定側の設定を確認をしておきましょう。

2 画像拡大の設定 (cocoon設定から)

画面拡大設定cocoonからの設定手順1

wordpressマークをクリック >投稿一覧画面へ戻る >

画面拡大設定cocoonからの設定手順2

>cocoon設定をクリック >画像タブをクリック >

画面拡大設定cocoonからの設定手順3

画像拡大効果の「 baguetteBox (軽量・スマホ向け」にチェックマークが入ってるか確認する(デフォルトの設定です)

画面拡大設定cocoonからの設定手順まとめて保存

「変更をまとめて保存」をクリックして完了
(一番上か一番下にあります。)

3 画像拡大の設定後

画面拡大設定後1

画像が小さくて内容が解らない場合、拡大できると見やすくなります。

画面拡大設定後2

拡大されて内容が分かりやすくなります。

画面拡大設定後3

画像拡大設定を施されているとカーソルを画像の上に配置すると矢印から手の形に変化します。こちらは未設定のため手形のカーソルに変化せずクリックしても拡大できません。

設定、未設定はそこで判断できます。比較参考にお試し下さい。

4 拡大設定をしても大きくならない場合 投稿画像のサイズについて

画面拡大設定しても大きくならない場合1

画像を配置する時の各サイズです。基本的には用途に応じて使用する枠サイズです。

画像拡大設定を施したがプレビュー画像の大きさが変わらない、もしくは小さくなる場合は投稿する画像のサイズが枠のサイズと同じか小さい場合に発生します。

画面拡大設定しても大きくならない場合2

「メディアとテキスト」に367x230pxの画像を挿入しました。
挿入時に幅が自動調整されて記事では420px幅になっていますが、これは拡大設定してもプレビューは大きくならず小さく表示されます。
420pxの枠より小さい画像です。

画面拡大設定しても大きくならない場合3


こちらは535x335pxです。プレビューは大きくなります。枠より大きいですがこれも自動的に記事では420px枠に表示されます。
見た目はこちらの方がよく見えます。伸ばすより縮める方がマシですね。

画面拡大設定しても大きくならない場合4

これは上と同じ画像を投稿したあとにドラッグで620pxに拡大しました。

拡大設定しても元画像が535pxなのでプレビューは縮小表示されます。

元の画像サイズが使用する枠より大きめの画像を入れている方が効果的です。「カラム50/50」、「メディアとテキスト」では600px~800pxの幅、1カラム幅では1000~1200pxぐらいが良いようです。

画面拡大設定しても大きくならない場合5

元画像サイズとはメディアライブラリに入っている画像のサイズ。画像を選択すると右端の「添付ファイルの詳細」で確認出来ます。解像度は記載されていません。

解像度は72~120dpiであれば投稿後の拡大プレビューの影響は無いよう見えます。サイズや解像度が大きすぎるとサイトが重くなったりするので注意しましょう。

サイズをある程度は把握して同じようなサイズに揃えていればプレビューサイズも同じように反映されます。そうすれば見やすくなります。

5 終わりに

もう一つのクリックしたら画像を拡大できるの方法がありますのでご紹介いたします。



画像挿入時のメディアとテキスト設定ではできませんがカラムや画像設定なら可能です。

カーソルはプラス表示が出て拡大出来ることは分かりやすいですが、当該の写真のみの単独での拡大でリンクボタンからメディアファイルで拡大設定のように複数の画像がスライド出来ないところがあります。

となりの画像は「クリックで拡大」の設定で配置していますので一度クリックして比較していただければ幸いです。

カラム50で左に画像、右に段落を追加してテキストを配置しています。

2024.3.25 追記

cocoon設定で画像拡大効果のチェックマークの横の小さいアイコンにカーソルをあてると画像設定のサンプルが見れて4種類の比較参照ができます。「 baguetteBox 」 は当ブログと同じ設定です。他にプラグインもあるそうですが、特別な要因がなければ現在の設定で充分なので試していません。

コメント