【cocoon】【HP作成】クリックした画像を大きく表示する設定

cocoonでは設定を変更するだけで、画像をクリックした際に拡大表示できるようになります。
今回はその設定方法を説明します。

『cocoon設定』⇨『画像』

まずは『cocoon設定』を開きます。

次に『画像』タブを開きます。

画像タブをスクロールしていくと『画像の拡大効果』があります。

4種類の効果がありますが、おすすめは『baguetteBox』です。
スワイプで写真だけを連続でみることができます。
『Spotlight』も拡大、スワイプ、スライドショーと多機能ですが「画像タイトルが表示される」ので気を使わなければいけません。
公式ページに詳しい説明があります。
因みに『Lity』『Lightbox』は使いづらかったです。

設定を変更したら忘れずに『設定を保存』してください。
cocoonの設定は以上です。

記事編集の『画像の設定』

貼り付けた画像をクリックして『編集』を選択し、『像の詳細』を開きます。

次に『リンク先』の設定で『メディアファイル』を選択します。
『設定を保存』ですべての作業が完了です。

※貼り付けたあとに設定しなくても、画像を貼り付ける際に『リンク先』を『メディアファイル』にしてもOKです。

これでサイトの画像をクリックすると拡大表示されるようになりました。

まとめ

画像を拡大表示はスマホで記事を見ている人に特に便利な機能です。
記事を見る人の大半はスマホです。設定も簡単なので必ず実装しましょう。