せいかつブログ

【Cocoon】画像をクリックして拡大する2通りのやり方

この記事は約5分で読めます。

こんにちは、まちゃりさです。

他の人のブログ記事を見ていて、クリックできる画像とクリックできない画像があることに気付いた。

クリックできる、できない画像の違いって何だろう?

設定で変えられるのかな?

どういう画像は拡大すべき?

こういったお悩みにお答えしていきます。

記事の内容

1.クリックできる画像とできない画像の違い
2.Cocoonの設定で画像を拡大する方法
3.プラグインを使って画像を拡大する方法

画像を拡大する方法は次の2種類あります。

  • Cocoonの設定から変更
  • プラグインをインストールする

個人的には、そこまでこだわらないのであれば、Cocoonの設定で十分かなと思います。

まちゃりさ
まちゃりさ

設定も一瞬で終わります!

それでは、どうぞ!

スポンサーリンク

クリックできる画像とできない画像の違い

 

最初にクリックできる画像と、できない画像を紹介しておきます。

上がクリックできる画像、下がクリックできない画像です。

クリックできる画像
クリックできない画像

クリックで拡大した方がいい画像は、ちょっと細かくて見えにくいかなと思う画像や、細部まで見てほしい画像になります。

クリックで拡大できる画像を載せるときは、「クリックで拡大できます」と一言添えておくとより親切です。

 

Cocoonの設定で画像を拡大する方法

 

まず、Cocoonの設定を使用して、画面を拡大する方法を紹介します。

冒頭で申し上げましたが、そこまでこだわらない方は、Cocoonの設定で十分です。

ワードプレス管理画面→「Cocoon設定」→[画像]タブと進みます。

ワードプレス管理画面→「Cocoon設定」→[画像]タブ

「本文画像設定」の「画像の拡大効果」から表示させたいイメージにあわせ、設定にチェックを入れます。

「画像の拡大効果」設定にチェック

現在は、次の4種類が用意されています。

  • Spotlight(軽量・連続表示・拡大・スライドショー・スワイプ対応)
  • baguetteBox(軽量・連続表示・スワイプ対応)
  • Lity(軽量・1枚ずつ表示)
  • Lightbox(有名ライブラリ・アニメーション有り)

見え方の違いは、以下の記事で確認しましょう。

Cocoonの画像拡大効果(Lightbox)ライブラリ各々お勧めの使いどころ
写真を暗転し拡大して表示するLightbox効果のあるJavaScriptライブラリの使いどころを紹介しています。

参考までに・・

Cocoonを作成された「わいひら」さんによれば、写真メインのサイトでない限り、デフォルトの設定である「baguetteBox」が最も使い勝手が良いとのこと。

最後に[変更をまとめて保存]を押してCocoonの設定はOKです。

[変更をまとめて保存]を押す

次に記事投稿画面です。

画像を挿入時、リンクを設定してあげます。

記事投稿画面で、メディアライブラリから画像を選択したら、

メディアライブラリから画像を選択

画像リンクをクリックし「メディアファイル」を選択します。

画像リンクをクリック
「メディアファイル」を選択

このようにメディアファイルと表示されればOKです。見づらければ拡大してね。

メディアファイル(リンク付き)が表示されればOK

プレビューで画像をクリックすると、設定に応じて拡大されるはずです。

画像をクリックすると拡大

 

プラグインを使って画像を拡大する方法

 

Cocoonの画面設定では、少し物足りないという方は、プラグインを使う方法があります。

今回は、インストールして動作した「WP jQuery Lightbox」のプラグインをご紹介します。

※画像をポップアップ表示させるには、「Easy FancyBox」というプラグインが一般的なようですが、私の環境では動作しませんでした。こちらも動くようならおすすめです。

動きはこんな感じです。

PCでの表示
スマホでの表示

やり方は、「WP jQuery Lightbox」をインストールするだけです。

[プラグイン]→「新規追加」と進みます。

[プラグイン]→「新規追加」

キーワードに「WP jQuery Lightbox」を入力して検索

キーワードに「WP jQuery Lightbox」を入力

「今すぐインストール」を押すと、インストールが開始されます。

今すぐインストール

少し待って、「Activate」(有効化)ボタンを押します。

「Activate」ボタンを押す

プラグインを有効化しました。」が表示されればOKです。

プラグインを有効化しました。

もう少しだけプラグインの設定を変更しておくのが、おすすめです。

下に進んで、インストールした「WP jQuery Lightbox」を探し「設定」をクリック

WP jQuery Lightbox」を探し「設定」をクリック

「スクリーンサイズに合わせて画像を縮小」にチェックを入れます。

「スクリーンサイズに合わせて画像を縮小」にチェック

やっぱり後からいらないなと思えば、「無効化」をクリックすれば、プラグインを無効にできます。

プラグインを有効化にしたまま、記事投稿画面で、画像リンクから「メディアファイル」を選択すれば画像が拡大表示されます。

画像リンクから「メディアファイル」を選択

プレビューで画像をクリックすると、同じ画面のまま画像が拡大されるはずです。

 

まとめ:Cocoonユーザなら設定を利用するのがおすすめ

 

今回は、Cocoonユーザがクリックで画像を拡大するための2通りの方法をご紹介しました。

  • Cocoonの設定で画像を拡大する方法
  • プラグインを使って画像を拡大する方法

Cocoonユーザであれば、余計なプラグインを増やさずに、設定のみで拡大機能をつけるのがおすすめです。

とはいえ、画面の拡大表示にもっとこだわりたい場合は、「WP jQuery Lightbox」や「EasyFancyBox」などのプラグインをインストールするのもありです。

 

私はブログを開設して1年になりますが、画像の拡大表示機能については最近知りました。

最初から知っておけばラクだったなと思います。後から画像のリンクを変更していくのは面倒ですね・・

記事で画像を多く使われる方は、ぜひ活用してみてください。

 

それでは、今回はこの辺で終わります。

最後まで、お読みいただきありがとうございました。

 

コメント

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