【ワードプレス】クリックで画像を拡大する方法とさせない方法

WordPressブログで、画像をクリックした時の動作についての解説記事です。

それぞれの設定方法を紹介していきます。

こんな人のお役に立てる記事です。

小豆

ブログを見ていると「クリックで拡大表示して見れる画像」と「そもそもクリックすらできない画像」があるけど、あれって何？
それぞれの設定はどうやってやるの？

クリックで拡大できる画像とできない画像

下の2つの画像は、片方を「クリックで拡大できる画像」もう片方を「クリックできない画像」に設定してあります。

画像の細部までを見てもらいたい場合は、「クリックで拡大できる画像」を挿入しておいた方が便利ですね。

ちなみにせっかく「クリックで拡大できる画像」を設置しても、気づかれずにスルーされてしまう場合もあるので「クリックで拡大できます」みたいな一言を入れておくのがベストですね。

小豆

小さくて見づらい画像だなぁ。

クリックで拡大できます

なんだ、画像拡大できるんじゃん！

小豆

続いては、それぞれの設定方法を説明します。

設定は本当に簡単！

余計なプラグインを追加する必要なく、元々のワードプレスの機能で行えます。

画像をクリックで拡大させる設定とさせない設定

まずは、下準備としてサイトやブログに表示させたい画像を取り込んでおきます。

メディアを追加　→　ファイルをアップロード

注意点

「クリックで拡大させたい画像」は、フルサイズのままアップロードしておきます。

すでに縮小済みの画像をここで取り込んでしまうと、クリックで画像を拡大しても鮮明に表示されません。

圧縮した画像を取り込んだ例

クリックして確かめてみよう

設定は「添付ファイルの表示設定」から

step
1サイト内に挿入したい画像を選択

メディアを追加　→　メディアライブラリ　→　記事内に挿入したい画像を選択

step
2添付ファイルの表示設定を変更

リンク先をメディアファイルに設定すると「クリックで拡大できる画像」になります。

画像をクリックで拡大させたくない場合には、ここでなしを選択します。

step
3サイト上でのサイズを設定

サイト上での画像のサイズを指定します。

ここで設定するのは、あくまでもサイト上での画像の表示サイズです。

どのサイズを指定しても、画像をクリックしたときには「元々のフルサイズの画像」が表示されます。

大福

クリックさえしてもらえば元の大きな画像を表示できるから、サイト上では小さなサイズで表示しても問題ないということだね。

step
4投稿に挿入

全ての設定が済んだら、投稿に挿入をクリックします。

無事、「クリックで拡大する画像」の挿入ができたはずです。

画像にコメントを入れる方法とその他の設定

画像にコメントを入れるときには「キャプション」を利用します。

ここに打ち込んだテキストが画像の下に表示されます。

パソコンと貯金箱

代替テキストは必ず入力しておこう

代替テキストとは、その画像の内容をテキストで表現したものですね。

もし何らかの理由で画像が表示されないときには、代替テキストが表示されることでサイトを訪れた検索者に「ここには本来どんな画像が表示されていたか」を示すことができます。

ちなみに、代替テキストは空欄のままでも表示される画像には何の影響もありません。

ただしSEO効果が期待できるとも言われているので、できれば入力しておくのが無難です。

大福

「タイトル」「キャプション」「説明」の入力は、任意で問題なしです。

まとめ：画像の拡大を使い分けて検索者の見やすいサイトにしよう

WordPressにて、画像の拡大表示に関する設定方法の紹介でした。

ちなみに当ブログでは、画像をクリックした際に「ビヨーンと拡大表示」するように設定してあります。

こちらは、専用のプラグイン「Easy FancyBox」を使用しています。