How To

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

テキストに画像リンク

  • 画像を挿入したら、表のレイアウトが崩れてしまった
  • 記事内に画像が多すぎで、見た目がごちゃごちゃしている

こういった悩みを解決する「テキストクリックで画像を表示させる方法」の紹介です。

 

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

小豆
WordPressに画像を挿入してクリックで拡大する方法はわかった。
でも、画像ではなくてテキストをクリックして画像を拡大表示させる方法はないの?
できれば、別ページではなく同じウィンドウ内で開きたいんだけど。

テキストをクリックして画像を表示させる方法

まずは、実際の表示のされ方を確認してください。

以下のテキストをクリックすると、画像が表示されます。

 

今回紹介する方法のポイントは3つです。

3つのポイント

  1. 別ウィンドウを開かずに同じ画面内で画像を表示する
  2. 表示させる画像のサイズを自由に決める
  3. 画像の下に表示されるタイトルの表示/非表示を選ぶ

②③については、記事後半で詳しく解説しています

 

小豆
そうそう!こんな感じのことがやりたかった。早速やり方を教えて。
了解!ただその前に下準備を済ませておこう。
大福

 

同じウィンドウ内で画像を表示させるための下準備

今回紹介する方法を利用するためには、プラグイン【Easy FancyBox】(無料)が必要です。

使用するプラグイン

まずは、プラグイン【Easy FancyBox】をインストール有効化しておいてください。

 

小豆
プラグインを使わないとどうなるの?
テキストをクリックしたときに、別画面が開いてそこに画像が表示されるよ。
大福

 

プラグイン【Easy FancyBox】を使用した場合

同じウィンドウ内で画像が表示

 

プラグインを使用しなかった場合

別ウィンドウで表示

テキストをクリックで画像を表示させるための手順

手順は簡単2ステップです。

手順

  1. メディアファイルを選択して画像を挿入
  2. タグを消去

 

step
1
メディアファイルを選択して画像を挿入

画像の挿入

まずは通常通り画像を挿入します。

その際、添付ファイルの表示設定リンク先をメディアファイルに、サイズをフルサイズで選択します。

操作方法

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

 

step
2
タグを消去

テキスト画面

WordPress編集画面に画像が挿入されたら、ビジュアル表示からテキスト表示に切り替えます。

挿入された画像タグはこんな感じ。

<a href="https://daifuku-diary.com/wp-content/uploads/2020/04/サンプル画像.jpg"><img class="aligncenter size-full wp-image-8887" src="https://daifuku-diary.com/wp-content/uploads/2020/04/サンプル画像.jpg" alt="サンプル画像" width="640" height="427" /></a>

 

画像タグの赤字部分(※<img class="・・・・・・・・・・/>)を削除し、表示したいテキストを入力します。

<a href="https://daifuku-diary.com/wp-content/uploads/2020/04/サンプル画像.jpg">クリックで画像を表示</a>

以上で、テキストをクリックで画像を表示する手順は完了。

プレビュー画面で確認してみて下さい。

クリックで画像を表示

 

 

表示させる画像のサイズとタイトル表示の設定

  • テキストをクリックしたときに表示される画像のサイズ
  • 画像の下に表示されるタイトルの表示/非表示

 

この2点について詳しく解説します。

 

テキストをクリックしたときに表示される画像のサイズ

大福
スマホで閲覧している場合は、画面を横にして見ると違いがよくわかるよ。

 

テキストをクリックしたときに表示される画像のサイズは、WordPressに挿入したオリジナル画像のサイズです。

プラグイン【Easy FancyBox】で画像サイズを設定するわけではありません。

オリジナル画像のサイズが大きければ大きな画像が表示され、オリジナル画像のサイズが小さければ小さな画像が表示されます。

 

ちなみに上で表示したサンプル画像のサイズはこんな感じです。

サンプル画像Aのサイズ

画像Aのサイズ

オリジナル画像のサイズ:640px × 427px

サンプル画像Bのサイズ

画像Bのサイズ

オリジナル画像のサイズ:300px × 200px

 

画像の下に表示されるタイトルの表示/非表示

プラグイン【Easy FancyBox】のデフォルトの設定では、拡大表示された画像の下にタイトルが表示されます。

画像のタイトルが表示

このタイトルを非表示にしたいときは、以下のように設定を変更してください。

 

WordPressメニュープラグインインストール済みプラグイン

プラグインを選択

Easy FancyBoxの設定をクリック

チェックを外す

「images」のところにある【☑Show title. FancyBox will try to get a title from the link or thumbnail title attributes.】のチェックを外す

最後に変更を保存をクリックして完了

 

小豆
あれ?自分の場合は最初から画像の下にタイトルは表示されなかったけど。

今回のように「画像をテキストに変換している場合」や「代替テキストが入力されていない場合」は、ポップアップで表示される画像の下にタイトルは出ません。

「テキストクリックで画像表示」の便利な使い方

画像をテキストに変換することの最大のメリットは、スペースをとらないことですね。

たとえば、こんな場合。

  画像タイトル 画像
画像A パソコンの前で頭を抱える女性 パソコンの前で頭を抱える女性
画像B 晴れた日のドライブ 晴れた日のドライブ
画像C お母さんと赤ちゃん お母さんと赤ちゃん

画像を挿入したせいで表内に余分なスペースができてしまい、見た目がスッキリとしていません。

画像をテキストにすると、表がスマートになります。

  画像タイトル 画像
画像A パソコンの前で頭を抱える女性 クリックで画像を表示
画像B 晴れた日のドライブ クリックで画像を表示
画像C お母さんと赤ちゃん クリックで画像を表示

 

小豆
テキストクリック型にすることで、表内に直接画像を入れるより大きな画像を表示できるのも嬉しいね。

 

まとめ:状況に応じて使い分けよう

画像をテキストで表示することによって、記事全体をスッキリ見せることができます。

ただし、なんでもかんでもテキスト表示にすれば良いというわけでもありませんよね。

やっぱり記事内には画像が適度に入っていた方が見た目も良く、ユーザーも記事を読みやすくなります。

時と場合に応じて、使い分けて下さい。

 

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

\ ブログに関する記事一覧 /

💻 How To

\ ブログ作業効率化に関する記事一覧 /

🔨 作業効率化

 

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

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

大福

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

-How To

© 2020 大福日記