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

大福

こんにちは、大福です。　

小豆

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

今回は、こんな疑問に答えます。

実はそれぞれの設定は本当に簡単。

余計なプラグインを入れる必要もなく、初心者でもすぐに設定が終わります。

※ここで紹介している方法はワードプレス用のものです。

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

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

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

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

小豆

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

クリックで拡大できます

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

小豆

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

設定は本当に簡単！

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

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

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

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

注意点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

大福

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

step
4投稿に挿入

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

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

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

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

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

パソコンと貯金箱

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

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

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

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

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

大福

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

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

僕の場合は、普段あまりこの「クリックで画像を拡大」は使用しません。

というか、恥ずかしながらワードプレスにこんな機能があることすらしばらく知りませんでした。

サイトを訪れてくれた検索者の手間を考えると、本来は「わざわざ拡大しないでも見やすい画像」を設置しておくことが一番だと思います。

ただし、以下の場合は「クリックで画像を拡大」が役に立ちそうですね。

• 文字サイズの細かい表やデータなどの表示
• データの重い画像表示でページの表示速度を遅くしたくない場合

こちらの記事もおすすめです。

そのブログデザインに満足していますか？

他人の作ったブログやサイトを見て、そのデザインの良さに目を奪われることってありますよね。

大福

見やすくてきれいなブログだなぁ。

ワードプレス初心者の自分にはこんなきれいなブログを作るのは無理・・って諦めてしまっていませんか？

そんなときは、ワードプレス有料テーマAFFINGER5（アフィンガー５）を使えば初心者でも簡単に「満足度MAX」のきれいなブログを作ることができます。

AFFINGER５には、使いきれないくらい豊富な種類の記事装飾やサイトをきれいに見せるための機能がいっぱい。

誰でも簡単に「検索者の目を惹くサイト」が作れるようになります。

自分の思い通りのブログデザインが作れることで、ブログを書くのが楽しくなること間違いなしです♪

気になる方は、まずは公式サイトをチェック！

公式サイトには、AFFINGER５の豊富な記事装飾や色々なサイトデザインの例が盛沢山。

見ているだけで、なんだかワクワクしてきますよ。

このサイト（＝大福日記）もAFFINGER5を使用して作成しています。

\ AFINGER5のレビュー記事 /

\ AFFINGER５の関連記事 /