画像をクリックしたら拡大するようにしたい。
いろんな人のブログを見てるといい感じに拡大してる真似したい。
と思って調べてみた。
簡単に設定できたので解説しておきます。
同じような悩みの人が居たら役に立てるかもしれないので。
Cocoonではプラグイン不要
プラグイン追加とかCSS変更とか不要です。
テーマ「Cocoon」では画像拡大表示の設定が最初から用意されていました。
拡大効果の設定方法
「Cocoon設定」から「画像」を開く
真ん中辺りに「画像の拡大効果」があるのでその中から選択。
デフォルトは Spotlight（軽量・高機能ギャラリー）に設定されてます。
効果の違いについては解説ページを参照して下さい。
好みで選択していただければいいと思います。
私は baguetteBox（軽量・スマホ向け）にしています。
記事作成時の画像設定
上記のCocoonの設定だけでは拡大効果が得られない。
記事に画像を挿入するときに設定が必要です。
まず記事内に画像を挿入をします。
画像挿入だけだと画像の拡大表示がされません。
下の画像は拡大表示しない。
挿入した画像を選択すると現れるメニューのリンクボタンをクリック
メニューが展開するのでメディアファイルを選択
設定はたったこれだけ。
これで憧れ画像拡大効果が得られます！
下の画像は実際に拡大設定をした画像になります。いい感じでしょう♪
まとめ
テーマ「Cocoon」のおかげで簡単に設定できました。
拡大表示が出来るようになって個人的には大変満足しています。
コメント