【Cocoon】画像クリックで拡大する設定【WordPress】

Cocoon

こんにちは。2児のママ、よしくまです。

Webページを見ていて、

「もう少し大きな写真で確認したい」

「画像の文字が小さくて見えずらい」

と感じた経験ってありますよね。

大きな画像で見てもらいたい画像を記事やブログに挿入する場合は、クリックで拡大できる設定にしておくとよいでしょう。

↓こんな感じ(クリックで拡大します)

画像をクリックで拡大表示する手順

まずは「Cocoon設定」で設定してから、投稿編集画面での設定に進んでいきます。

「Cocoon設定」での手順

管理画面(ダッシュボード)を表示して、下記の順番にクリックします。

  1. 画面左側「Cocoon設定」
  2. 画面上部のタブ「画像」

「画像の拡大効果」から、どのように拡大表示させるかを選んでチェックします。

下記それぞれのアイコンにマウスカーソルを合わせるとモーションを確認できます。

このサイトでは「baguetteBox」に設定しています。

設定ができたら一番下までスクロールして「変更をまとめて保存」をクリックしましょう。

次に、投稿編集画面の設定をします。

「投稿編集画面」での手順

投稿記事の編集画面を開きましょう。

投稿済みの画像をクリックしたあと表示されるえんぴつマークをクリックします。

「画像詳細」のリンク先を「メディアファイル」に変更して、右下の「更新」をクリックします。

これで画像拡大の設定完了です。投稿記事を確認してみましょう。

 

記事に画像を追加した時点で拡大設定をすることもできます。下記の手順で設定してみてください。

追加したい画像をチェックしたら「投稿に挿入」をクリックする前に、右側のスクロールバーで下に移動して、リンク先を「メディアファイル」に変更してください。

リンク先が「メディアファイル」になっていることを確認できたら「投稿に挿入」をクリックしましょう。

画像のサイズ縮小、画像の切り抜きについて、以下の記事で詳しく解説しています。

プラグインで画像拡大を設定する場合

Cocoonなら「Cocoon設定」で設定するのが簡単ですが、プラグインを使う方法もあります。手順は下記を参考にしてください。

1.管理画面の「プラグイン」から「新規追加」をクリック

2.画面右上の「プラグインの検索」にプラグイン名を入力します。

プラグイン名には、

  • Easy FancyBox

を入力してみてください。

3.表示されたプラグインの「今すぐインストール」をクリック

4.インストール完了後「有効化」をクリック

これでプラグインの設定は完了です。

画像を拡大する場合は先ほど解説した「投稿編集画面」での手順で、リンク先を「メディアファイル」にしておけば拡大表示されるようになります。

プラグインの有効化は「インストール済みプラグイン」からも可能です。

無効化や削除をするときもこの画面からすぐにできるので、間違えて設定してしまっても大丈夫です。

まとめ

今回は、Cocoonの画像拡大表示について、「Cocoon設定」とプラグインでの設定の2パターンを解説しました。

記事に挿入した画像が拡大表示されるだけでも、だいぶ見やすさがアップすると思います。

一度設定しておけば、あとは投稿画面での設定だけで表示を変更できるので、ぜひ試してみてください。

コメント

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