広告 How To

WordPress【画像クリックで別の画像を表示する方法】

2020年8月3日

クリックで別の画像を表示

WordPressで、記事内の画像をクリックした時に「別の画像」を表示する方法の紹介です。

「こんな時に使用すると便利」なシチュエーションと一緒に紹介していきます。

 

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

小豆
小豆
この画像をそのままブログ内に載せたら、人によっては気分を害するかもしれない。
見たい人だけがクリックでその画像を見れるようにってできないかな?

WordPressで記事内の画像をクリックした時に別の画像を表示する方法

まずは、実際の表示から確認してください。

紙の本

画像をクリックすると別の画像が表示されます

 

こんな感じで、記事内の画像をクリックした時に別の画像を表示することができます。

 

小豆
小豆
そうそう!やりたかったのはこれ。
でも、クリックした時の画像の表示のされ方が自分のブログとは違う。
クリックした時に画像をビヨーンって表示するには、専用のプラグインが必要なんだ。
大福
大福

 

クリックした画像を同一画面内で表示する方法

画像をクリックした時に、同一画面内でビヨーンっと表示させるためには以下のプラグインを使用します。

使用するプラグイン

大福
大福
表示のされ方に特にこだわらない人は、このプラグインを入れなくても大丈夫だよ。

画像クリックで別の画像を表示させるための手順

手順はたった3ステップ!簡単です。

手順

  1. 記事内に画像を挿入
  2. クリック後に表示したい画像リンクをコピー
  3. 挿入された画像タグを書き換え

 

step
1
記事内に画像を挿入

まずは、いつも通り記事内に画像を挿入します。

画像を挿入

メディアを追加 → 画像を選択 → リンク先をメディアファイルに → 投稿に挿入

ここで選択する画像は、記事内に表示したい(クリック前に表示されている)画像です。

 

step
2
クリック後に表示したい画像リンクをコピー

リンクをコピー

メディアを追加 → 画像を選択 → リンクをコピー

クリック後に表示したい画像を選択し、表示されたリンクをコピーします。

 

step
3
挿入された画像タグを書き換え

テキスト画面に切り替えて、画像タグ内のリンクを書き換えます。

コピーした画像リンク

https://daifuku-diary.com/wp-content/uploads/2020/08/クリック後に表示したい.jpg

 

元の状態の画像タグ

<p><a href="https://daifuku-diary.com/wp-content/uploads/2020/08/記事内に表示したい.jpg"><img class="aligncenter size-full wp-image-11374" src="https://daifuku-diary.com/wp-content/uploads/2020/08/記事内に表示したい.jpg" alt="紙の本" width="640" height="426" /></a></p>

赤字の部分を削除し、コピーした画像リンクに書き換えます。

書き換え後の画像タグ

<p><a href="https://daifuku-diary.com/wp-content/uploads/2020/08/クリック後に表示したい.jpg"><img class="aligncenter size-full wp-image-11374" src="https://daifuku-diary.com/wp-content/uploads/2020/08/紙の本.jpg" alt="紙の本" width="640" height="426" /></a></p>

 

大福
大福
以上で終了!
実際にプレビュー画面で確認してみよう。

こんなシチュエーションで使うと便利【3つ紹介】

クリック後に別の画像を表示させる方法は、こんなシチュエーションで使うと便利です。

こんな時に使いたい

  1. グロ画像を載せる時
  2. ビフォー&アフター画像
  3. 画像の一部を拡大したいとき

 

グロ画像を載せる時

たとえばこんな時。

大福
大福
掃除前の汚いトイレの画像も載せたいんだけど、さすがにこの画像を全員に公開するのは気が引ける。

クリックで掃除前の画像が表示【グロ画像注意】

 

ビフォー&アフター画像

「これがこうなります」的な説明時に。

画像クリックで組立後の画像を表示

 

画像の一部を拡大したいとき

1枚の画像をさらに拡大して表示したいときに。

キーボード全体の画像

画像クリックで拡大【一見きれいでもこれだけ汚れが】

 

  • キャプションの入れ方

画像下にキャプション

大福
大福
クリックできる画像には必ずキャプションを入れよう。

 

画像にキャプションが入っていないと、そのままクリックされずにスルーされてしまう可能性大です。

キャプション

クリックできる画像には、必ずキャプションを入れましょう。

 

まとめ:検索ユーザーに優しい記事作りに役立つ

今回僕がこの方法を紹介しようと思ったのは、この記事がきっかけ。

関連フマキラーの「ゴキブリワンプッシュ」を使ってみた【やっと寝れる】

この記事内では、どうしてもゴキブリの画像を載せる必要があったんですよね。

ですが、たとえ画像であってもゴキブリを見たくないって人も絶対にいるはず。

というわけで、クリックした人だけが見れるようにしました。

 

ブログ記事を作っていくうえで僕が感じた便利な方法やツールは、以下の記事内で紹介しています。

 

こちらの記事では、「ブログ内で使える便利な無料画像ダウンロードサイト」を紹介しています。

画像サイト
ブロガーにおすすめの無料画像サイト3選【これだけでOK】

続きを見る

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-How To