画像をクリックしたら拡大するようにしたい。
いろんな人のブログを見てるといい感じに拡大してる真似したい。
と思って調べてみた。
簡単に設定できたので解説しておきます。
同じような悩みの人が居たら役に立てるかもしれないので。
Cocoonではプラグイン不要
プラグイン追加とかCSS変更とか不要です。
テーマ「Cocoon」では画像拡大表示の設定が最初から用意されていました。
拡大効果の設定方法
「Cocoon設定」から「画像」を開く

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

効果の違いについては解説ページを参照して下さい。
好みで選択していただければいいと思います。
私は baguetteBox(軽量・スマホ向け)にしています。
記事作成時の画像設定
上記のCocoonの設定だけでは拡大効果が得られない。
記事に画像を挿入するときに設定が必要です。
まず記事内に画像を挿入をします。

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

挿入した画像を選択すると現れるメニューのリンクボタンをクリック
メニューが展開するのでメディアファイルを選択

設定はたったこれだけ。
これで憧れ画像拡大効果が得られます!
下の画像は実際に拡大設定をした画像になります。いい感じでしょう♪
まとめ
テーマ「Cocoon」のおかげで簡単に設定できました。
拡大表示が出来るようになって個人的には大変満足しています。
コメント