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

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

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

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

小豆

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

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

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

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

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

小豆

そうそう！やりたかったのはこれ。
でも、クリックした時の画像の表示のされ方が自分のブログとは違う。

クリックした時に画像をビヨーンって表示するには、専用のプラグインが必要なんだ。

大福

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

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

大福

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

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

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

step
1記事内に画像を挿入

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

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

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

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

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

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

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

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

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

大福

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

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

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

グロ画像を載せる時

たとえばこんな時。

大福

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

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

ビフォー＆アフター画像

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

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

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

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

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

大福

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

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

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

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

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

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

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

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

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

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

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