How To

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

2019年10月21日

 

大福
こんにちは、大福です。 

 

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

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

 

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

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

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

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

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

 

クリックで拡大できる画像

クリックできない画像

 

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

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

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

クリックで拡大できる画像(コメント入)

クリックで拡大できます

なんだ、画像拡大できるんじゃん!
小豆

 

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

設定は本当に簡単!

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

 

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

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

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

 

注意点

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

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

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

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

 

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

 

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

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

 

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

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

その他のリンク先

なし:クリックできない画像になります。

添付ファイルのページ:この画像が貼られているページにリンクします。

同一ページ内へのリンクになるため、あまり使用しません。

カスタムURL:画像をクリックすることで任意のリンクに繋げます。

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

 

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

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

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

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

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

 

step
4
投稿に挿入

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

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

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

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

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

パソコンと貯金箱

パソコンと貯金箱

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

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

テキストに画像リンク
【WordPress】テキストクリックで画像を表示させる方法

続きを見る

 

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

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

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

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

 

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

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

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

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

 

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

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

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

 

このサイト(=大福日記)もAFFINGER5を使用して作成しています。

\ AFINGER5のレビュー記事 /

レビュー
アフィリエイトヘッダー
購入する価値あり?アフィンガー5をワードプレス初心者が使ってみた

続きを見る

\ AFFINGER5の関連記事 /

関連
AFFINGER5でお気に入りの記事装飾10選とカスタマイズ方法

続きを見る

 

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-How To

© 2020 大福日記