

それぞれの設定はどうやってやるの?
今回は、こんな疑問に答えます。
実はそれぞれの設定は本当に簡単。
余計なプラグインを入れる必要もなく、初心者でもすぐに設定が終わります。
※ここで紹介している方法はワードプレス用のものです。
クリックで拡大できる画像とできない画像
下の2つの画像は、片方を「クリックで拡大できる画像」もう片方を「クリックできない画像」に設定してあります。
画像の細部までを見てもらいたい場合は、「クリックで拡大できる画像」を挿入しておいた方が便利ですね。
ちなみにせっかく「クリックで拡大できる画像」を設置しても、気づかれずにスルーされてしまう場合もあるので「クリックで拡大できます」みたいな一言を入れておくのがベストですね。

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

続いては、それぞれの設定方法を説明します。
設定は本当に簡単!
余計なプラグインを追加する必要なく、元々のワードプレスの機能で行えます。
画像をクリックで拡大させる設定とさせない設定
まずは、下準備としてサイトやブログに表示させたい画像を取り込んでおきます。
メディアを追加 → ファイルをアップロード
注意点
設定は「添付ファイルの表示設定」から
step
1サイト内に挿入したい画像を選択
メディアを追加 → メディアライブラリ → 記事内に挿入したい画像を選択
step
2添付ファイルの表示設定を変更
リンク先をメディアファイルに設定すると「クリックで拡大できる画像」になります。
その他のリンク先
なし:クリックできない画像になります。
添付ファイルのページ:この画像が貼られているページにリンクします。
同一ページ内へのリンクになるため、あまり使用しません。
カスタムURL:画像をクリックすることで任意のリンクに繋げます。
画像をクリックで拡大させたくない場合には、ここでなしを選択します。
step
3サイト上でのサイズを設定
サイト上での画像のサイズを指定します。
ここで設定するのは、あくまでもサイト上での画像の表示サイズです。
どのサイズを指定しても、画像をクリックしたときには「元々のフルサイズの画像」が表示されます。

step
4投稿に挿入
全ての設定が済んだら、投稿に挿入をクリックします。
無事、「クリックで拡大する画像」の挿入ができたはずです。
画像にコメントを入れる方法とその他の設定
画像にコメントを入れるときには「キャプション」を利用します。
ここに打ち込んだテキストが画像の下に表示されます。

パソコンと貯金箱
代替テキストは必ず入力しておこう
代替テキストとは、その画像の内容をテキストで表現したものですね。
もし何らかの理由で画像が表示されないときには、代替テキストが表示されることでサイトを訪れた検索者に「ここには本来どんな画像が表示されていたか」を示すことができます。
ちなみに、代替テキストは空欄のままでも表示される画像には何の影響もありません。
ただしSEO効果が期待できるとも言われているので、できれば入力しておくのが無難です。

まとめ:画像の拡大を使い分けて検索者の見やすいサイトにしよう
僕の場合は、普段あまりこの「クリックで画像を拡大」は使用しません。
というか、恥ずかしながらワードプレスにこんな機能があることすらしばらく知りませんでした。
サイトを訪れてくれた検索者の手間を考えると、本来は「わざわざ拡大しないでも見やすい画像」を設置しておくことが一番だと思います。
ただし、以下の場合は「クリックで画像を拡大」が役に立ちそうですね。
- 文字サイズの細かい表やデータなどの表示
- データの重い画像表示でページの表示速度を遅くしたくない場合
こちらの記事もおすすめです。
-
-
保護中: 【WordPress】テキストクリックで画像を表示させる方法
続きを見る
そのブログデザインに満足していますか?
他人の作ったブログやサイトを見て、そのデザインの良さに目を奪われることってありますよね。

ワードプレス初心者の自分にはこんなきれいなブログを作るのは無理・・って諦めてしまっていませんか?
そんなときは、ワードプレス有料テーマAFFINGER5(アフィンガー5)を使えば初心者でも簡単に「満足度MAX」のきれいなブログを作ることができます。
AFFINGER5には、使いきれないくらい豊富な種類の記事装飾やサイトをきれいに見せるための機能がいっぱい。
誰でも簡単に「検索者の目を惹くサイト」が作れるようになります。
自分の思い通りのブログデザインが作れることで、ブログを書くのが楽しくなること間違いなしです♪
気になる方は、まずは公式サイトをチェック!
公式サイトには、AFFINGER5の豊富な記事装飾や色々なサイトデザインの例が盛沢山。
見ているだけで、なんだかワクワクしてきますよ。
このサイト(=大福日記)もAFFINGER5を使用して作成しています。
\ AFINGER5のレビュー記事 /
-
-
購入する価値あり?アフィンガー5をワードプレス初心者が使ってみた
続きを見る
\ AFFINGER5の関連記事 /
-
-
AFFINGER5でお気に入りの記事装飾10選とカスタマイズ方法
続きを見る