WordPressでサイト全体の画像を拡大表示(ライトボックス)にする設定方法:Twenty Twenty-Five対応のサイトエディター手順

,
ブログ記事に掲載した図解や操作画面のスクリーンショットを、読者がクリックしたときにふわっとポップアップ(拡大表示 / ライトボックス)させたいと思ったことはありませんか?

これまでは専用のプラグインを新しく追加するか、あるいは記事を書くたびに画像ブロックの設定パネルで「クリックで拡大」を1枚ずつ手動でオンにする必要がありました。

しかし、最新のWordPress(バージョン6.5以降)およびデフォルトテーマ(Twenty Twenty-Fiveなど)では、サイトエディターのUIがリニューアルされ、サイト全体の画像ブロックに対して「クリックで拡大」を一括でデフォルト有効化できるようになっています。

この記事では、実際の管理画面キャプチャを交えながら、最新UIにおける設定画面の場所と具体的な有効化手順を分かりやすく解説します。

プラグイン不要でサイト全体の画像拡大を有効化できるメリット

サイトエディター(グローバルスタイル)から画像拡大を設定することには、従来のプラグイン導入や個別設定と比べて以下のような大きなメリットがあります。

サイトエディター一括設定の利点

  • プラグイン不要で表示速度を維持:追加のプラグインをインストールしないため、サイトの読み込み速度やPageSpeedスコアを落とさずに軽快に動作します。
  • 執筆時の作業負担をゼロに:記事を書くたびに画像ブロックを1つずつ選択して「クリックで拡大」をオンにする手間が一切なくなります。
  • 過去記事と新規記事のすべてに一括適用:サイト全体の設定として保存されるため、すでに投稿済みの過去記事の画像ブロックにも自動的に拡大機能が反映されます。

サイトエディターでの一括設定手順

WordPressの管理画面から、サイト全体の画像スタイルを設定する手順を解説します。

デザインメニューからスタイルとブロックを選択する

まずはWordPress管理画面の左メニューから 「外観」>「エディター」 を開きます。

エディターが開いたら、左側のデザインメニューから 「スタイル」 をクリックします。中央にスタイルのプレビューパネルが表示されますので、パネルの最下部にある 「ブロック」 をクリックします。

画面操作のポイント

以前のWordPressバージョンでは「鉛筆アイコン(スタイルを編集)」を探す必要がありましたが、最新のエディターUIでは「スタイル」メニュー内の下部に「ブロック」項目が直接配置されており、より直感的にアクセスできるようになっています。

ブロック一覧から画像を選択する

「ブロック」をクリックすると、サイト全体で個別カスタマイズが可能なブロックの一覧が表示されます。

一覧の中から 「画像」 ブロックを探してクリックします(上部の検索ボックスに「画像」と入力して絞り込むことも可能です)。

設定欄のクリックで拡大をオンにして保存する

「画像」ブロックの専用スタイル設定パネルが開きます。パネル内には「サイズ」「枠線と影」などの設定項目が並んでいます。

パネルの下部にある 「設定」 項目までスクロールし、「クリックで拡大」 のトグルスイッチをクリックして 「オン」 に切り替えます。

スイッチをオンにしたら、画面左下(または画面右上)に表示される 「変更をレビュー…」(または「保存」)ボタンをクリックし、設定を保存します。

これで、サイト全体の画像ブロックに対する拡大表示(ライトボックス)の有効化が完了です。

設定後の実際の動作と知っておきたいポイント

設定完了後、ブログ記事のページを開いて実際の動作を確認してみましょう。

動作の特徴と仕様

  • 自動でカーソルが変化:画像の上にマウスカーソルを乗せると、自動的に虫眼鏡アイコン(ズームイン)に変わります。
  • 背景の暗転と拡大表示:画像をクリックすると、背景がすっきりと暗転し、画面中央に画像がポップアップ拡大されます。もう一度クリックするか、右上の閉じるボタン、またはキーボードのESCキーを押すことでスムーズに閉じることができます。
  • リンク付き画像との両立:画像ブロックに外部リンクやアフィリエイトリンクなどのカスタムリンクを設定している場合は、ライトボックス拡大ではなく設定したリンク先へのジャンプが優先される安全設計になっています。

カスタムHTMLブロックで配置した画像についての注意点

今回ご紹介したWordPress標準の「クリックで拡大」機能は、ブロックエディタの 「画像ブロック」 として挿入された画像に対して自動適用されます。

もし記事内で「カスタムHTMLブロック」を使って直接 <img> タグを記述している画像がある場合は、標準のライトボックススクリプトの対象外となります。サイト全体の画像を確実に拡大させたい場合は、通常の記事執筆では「画像ブロック」を活用するのがおすすめです。

まとめ

最新のWordPressおよびTwenty Twenty-Fiveなどのブロックテーマでは、プラグインを1つも追加することなく、標準機能だけでサイト全体の画像をライトボックス化できます。

今回のまとめ

  • 「外観」>「エディター」>「スタイル」>「ブロック」>「画像」と進むだけでアクセス可能。
  • 設定項目内の「クリックで拡大」をオンにするだけで、全記事の画像ブロックに一括適用される。
  • プラグイン不要のため、サイトの表示速度を落とさずに読者の利便性を大幅に向上できる。

図解や細かな設定画面のキャプチャを多く扱うブログ運営者の方は、ぜひこの設定を有効化して、読者にとって見やすく快適な閲覧環境を整えてみてください。


eguchi.netをもっと見る

購読すると最新の投稿がメールで送信されます。