未分類

【WordPress】Cocoon:画像をクリックして拡大表示する方法

画像をクリックしたら拡大するようにしたい。
いろんな人のブログを見てるといい感じに拡大してる真似したい。

と思って調べてみた。
簡単に設定できたので解説しておきます。
同じような悩みの人が居たら役に立てるかもしれないので。

Cocoonではプラグイン不要

プラグイン追加とかCSS変更とか不要です。
テーマ「Cocoon」では画像拡大表示の設定が最初から用意されていました。

拡大効果の設定方法

「Cocoon設定」から「画像」を開く

真ん中辺りに「画像の拡大効果」があるのでその中から選択。
デフォルトは Spotlight(軽量・高機能ギャラリー)に設定されてます。

効果の違いについては解説ページを参照して下さい。
好みで選択していただければいいと思います。
は baguetteBox(軽量・スマホ向け)にしています。

記事作成時の画像設定

上記のCocoonの設定だけでは拡大効果が得られない
記事に画像を挿入するときに設定が必要です。

まず記事内に画像を挿入をします。

画像挿入だけだと画像の拡大表示がされません。
下の画像は拡大表示しない。

挿入した画像を選択すると現れるメニューのリンクボタンをクリック

メニューが展開するのでメディアファイルを選択

設定はたったこれだけ。
これで憧れ画像拡大効果が得られます!

下の画像は実際に拡大設定をした画像になります。いい感じでしょう♪

まとめ

テーマ「Cocoon」のおかげで簡単に設定できました。
拡大表示が出来るようになって個人的には大変満足しています。

コメント

タイトルとURLをコピーしました