Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

WordPressで画像クリック時に自動的にサイズを調整して大きく表示する方法

更新日:2021年10月30日

今回は画像表示切り替えの中でもよく使われる、記事中の画像をクリックすると画面に大きくポップアップして表示される動作の設定方法を解説します。

非常によく使われるTIPSなので是非設定方法を覚えて利用してみてくださいね!

目次

  • 1 この記事を最後まで読むと出来るようになること
  • 2 使用プラグイン
  • 3 使い方

この記事を最後まで読むと出来るようになること

WordPressで記事を書いて画像を挿入した際に、挿入した画像をクリックした人が拡大画像を見ることが出来るように設定できます。

この画像を拡大しているウィンドウのことをLightBox(ライトボックス)と言います。

使用プラグイン

  • WP Featherlight – A Simple jQuery Lightbox

使い方

上記のWPプラグインをインストールし有効化しましょう。

使い方は非常にシンプルです。

まず投稿記事編集画面を開きましょう。

私の場合は、TinyMCE Advancedを利用してエディターを拡張して利用しやすくしていますのでそちらをインストールされている環境での表示となるかもしれませんがご了承ください。

概ねその他のエディター画面でも設定できると思います。

以下の画像のように、挿入した写真の詳細を開くボタンをクリックします。

編集画面が表示されるのでそこでリンク先という項目があると思いますのでそちらをメディアファイルに変更します。

設定が出来たら更新をクリックしましょう。 以上で設定は完了です。

非常にシンプルで簡単に設定できるのでブログのレイアウト等で大きい画像を表示できない場合など非常に重宝するプラグインとなります。

なお、以下のように公開部分の下の所にあるDisable lightboxにチェックを入れるとLightBoxではなく、ブラウザに直で拡大画像が表示されます。

(記事の上に重なるようにウィンドウが出てこずに、画面自体が遷移してしまいます)

その場合は戻るボタンで前の記事の画面に戻れますがLightBoxを利用したほうが右上に×ボタンが付き、操作が分かりやすいためLightBoxで画像を拡大したほうがユーザーとしては操作し易いため利用することは無いかなと思います。

以上、LightBox用のプラグインの紹介でした!

その他WordPressの画像関連設定について

WordPressで画像配置を簡単に管理するプラグイン
WordPressで画像配置を簡単に管理するプラグイン
トップページに限らず、画像の配置を少し変えるだけでサイトがぐっとおしゃれになることがあります。この記事では、直感的に操作ができ、少し凝ったレイアウトも再現できるWordPressのプラグインとその使い方を紹介します。
WordPressで画像挿入時のHTMLをカスタマイズする方法
WordPressで画像挿入時のHTMLをカスタマイズする方法
WordPressで画像挿入時に入力されるリンクタグを自作したい方や「メディアを追加」で追加するときのコードをカスタマイズしたい方向けにimgタグの中身を好きなようにカスタマイズする方法を解説しました。この記事を読むことで画像挿入時の作業効率が飛躍的に高まります。是非挑戦してみましょう!
WordPressで任意のページに背景画像や背景色を設定できるプラグイン
WordPressで任意のページに背景画像や背景色を設定できるプラグイン
WordPressで任意の記事やページに、ユニークな背景を設定したい!という人は必見です。背景を個別に設定できるプラグインや、手動でカスタマイズする方法を解説します。

楽しいWordPressライフを送ってくださいね(^o^)

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 この記事を最後まで読むと出来るようになること
  • 2 使用プラグイン
  • 3 使い方
© 2023 さきどりふぁくとり~