SWELLで画像の拡大をオフにできない|画像リンクと拡大機能の見分け方

SWELLで画像の拡大をオフにできないときに、拡大設定と画像リンクを確認する。

「SWELLで画像の拡大をオフにしたのに、クリックするとまだ大きく表示される……」
設定を変更しても思ったとおりにならず、どこを直せばよいのか迷っていませんか?

実は、画像が大きく表示される原因は、SWELLの拡大機能だけではありません。画像に付いたリンクから、画像ファイルが開いている場合もあります。見た目は似ていますが、それぞれ設定場所が異なるため、まずはどちらの動作なのかを確かめることが解決への近道です。

この記事では、WordPressの「画像」ブロックを対象に、画像リンクと拡大機能の見分け方、それぞれの設定を見直す手順を解説します。クリックした後の画面を手がかりに、自分の記事ではどこを変更すればよいのか、一つずつ確認していきましょう。

※操作画面はWordPress 7.1/SWELL 2.18.0で確認しています。バージョンによって項目の位置や表示名が異なる場合があります。

目次

まず、画像リンクと拡大機能を見分ける

まずは、このページでクリック後の動きを比べてみましょう。次の2枚は、画像リンクと拡大表示の違いを試せる動作確認用の画像です。

次の2枚をクリックして、開き方の違いを確かめてください。スマートフォンではタップしてください。

画像リンクの例:画像だけのページが開く。クリックして動作を確認できます。
画像リンクの例です。クリックすると画像だけのページへ移動します。確認したら、ブラウザーの「戻る」で記事に戻ってください。
拡大表示の例:記事の上に画像が重なる。クリックして動作を確認できます。
拡大表示の例です。クリックすると記事の上に画像が重なります。確認したら、閉じるボタンで記事に戻ってください。

図は画面の見え方を説明する模式図です。実際の色やボタンの位置は環境によって異なります。

違いを確認できたら、ご自身の記事をプレビューし、問題の画像を1枚クリックしてください。編集画面で画像を選択する操作では、読者がクリックしたときの動作は確認できません。

自分の画面に近い状態を、次の表から選んでください。

クリック後の状態確認するもの最初の対応
別ページや別タブへ移動する画像のリンク先不要なリンクを外す
記事を背景に画像が重なって開く画像の拡大表示SWELLの個別設定を確認
画像は開かず、記事にとどまる停止後の動作開かせない目的なら完了

画像リンクは、画像を入口にして別のURLへ移動する仕組みです。リンク先は画像ファイルだけでなく、ほかの記事や外部サイトの場合もあります。WordPress公式の画像ブロックのリンク設定でも、この区別を確認できます。

一方、拡大表示は、記事を離れずに画像を大きく重ねて見せる動作です。この表示はライトボックスとも呼ばれます。背景が暗くなることや閉じるボタンが目印になりますが、見た目だけでSWELLの機能だとは断定できません。ほかの機能でも似た表示ができます。

画像だけのページが開く場合は、対象画像に不要なリンクが残っていないか確認します。画像を削除したり、アップロードし直したりする必要はありません。

  1. 対象記事の編集画面で、問題の画像をクリックします。
  2. 画像の上に出るツールバーで、鎖の形の「リンク」を選びます。
  3. リンク先を確認し、不要であれば「リンクを削除」を選びます。鎖が切れた形のボタンが目印です。
画像ブロックのリンク設定にある、鎖が切れた形の「リンクを削除」ボタン。
リンク先を確認してから、金色の枠のボタンで解除します。

「画像ファイルへのリンク」などのリンク先表示が消えたら、下書きなら「下書き保存」、公開済み記事なら変更を保存するボタンを押します。その後、プレビューまたは表示ページを読み込み直し、同じ画像をクリックしてください。

今回の検証では、SWELLの個別設定が「オフにする」でも、画像リンクがあると画像ファイルへ移動しました。リンクを外して保存すると、クリックしても記事にとどまりました。

クリックしても何も開かない状態が目的なら、その状態になった時点で完了です。記事に重なる拡大表示が続く場合は、画像ごとの拡大設定を確認してください。

商品ページへの案内など、目的があって付けたリンクは残します。「拡大だけ止めたい」のか、「画像をクリックしても何も開かないようにしたい」のかを先に決めると、必要なリンクまで消すのを防げます。

特定の画像だけ拡大をオフにする

記事を背景に画像が重なって開く場合や、一部の画像だけ拡大させたくない場合は、その画像ブロックの設定を確認します。

  1. 編集画面で対象の画像を選び、右側の設定パネルの「ブロック」を開きます。パネルが見えないときは、画面右上の設定ボタンを押します。
  2. 画像ブロックの「設定」タブを開き、SWELLの「追加設定」を探します。確認環境では、歯車のアイコンが「設定」タブです。
  3. 「クリックして拡大する機能」を「オフにする」に変更し、記事を保存します。
画像ブロックの設定タブで、追加設定の「クリックして拡大する機能」を「オフにする」にした状態。
拡大を止めたい画像を選んで、個別に「オフにする」を指定します。

プレビューを読み込み直し、同じ画像をクリックします。重なる拡大表示が出ず、必要なリンクも目的どおりに動けば、この画像の設定は完了です。サイト全体の設定まで変更する必要はありません。不要な別ページが開く場合は、画像のリンクを外す手順も確認してください。

「全体設定に従う」はサイト共通の設定を使う選択肢です。特定の画像を止めたいときは、その画像で「オフにする」を選びます。同じ画像ファイルを別の記事にも使っている場合は、記事内の画像ブロックごとに確認してください。

サイト全体の拡大設定を変える

多くの画像で拡大表示を使わない方針なら、SWELLの全体設定を確認します。ほかの記事にも関係する設定なので、1枚だけ直したい場合は個別設定から進めましょう。

  1. WordPress管理画面の「SWELL設定」を開き、「機能停止」タブを選びます。
  2. 「SWELLの機能」の中にある「『投稿画像をクリックで拡大表示する機能』を停止する」にチェックを入れます。
  3. 画面下の「変更を保存」を押し、対象記事を読み込み直して確認します。
SWELL設定の機能停止タブにある「投稿画像をクリックで拡大表示する機能」を停止するチェック欄。画像は未チェックの状態。
「停止する」にチェックを入れる形式です。画像は変更前の未チェック状態です。

拡大を止めるときは、「停止する」にチェックを入れます。チェックを外す操作と取り違えないようにしましょう。

保存後、対象画像で不要な拡大表示が止まれば、この設定は完了です。全体設定を変更しても、画像に付いたリンクは残ります。画像が開く場合は、最初の比較表で、別ページへの移動か記事上での拡大表示かを再確認してください。

まだ開くときは、保存状態と別の拡大機能を確認する

保存後に、変更した画像で確認する

まず編集画面を開き直し、画像のリンクが外れたままか、拡大設定が「オフにする」のままかを確認します。意図した状態でなければ、保存が終わっていない可能性があります。画像が複数ある記事では、隣の画像を変更していないかも確認しましょう。

設定が保存されているなら、古いプレビューを閉じて新しいプレビューを開きます。公開済みページを確認する場合も、ページを読み込み直してください。それでも古い表示のままなら、表示を一時保存する「キャッシュ」の影響を確認します。最初からサイト全体のキャッシュ削除やプラグイン停止を行う必要はありません。

SWELL以外のライトボックスが動いていないか見る

WordPress標準にも、画像をページ内で大きく表示する機能があります。公式の画像ブロックの説明(英語)では、リンク設定に「Enlarge on click」(クリックしたときに拡大する機能)が案内されています。

確認するときは、編集画面で対象の画像を選び、画像の上のツールバーにある「リンク」を開きます。標準の拡大に関する項目が表示される場合は、その設定も確認してください。表示されない環境では、この確認は飛ばして構いません。SWELLの「追加設定」とは別の設定です。

画像表示用のプラグイン、ギャラリーなどの別ブロック、追加したコードも確認候補です。標準の画像ブロックでない場合は、そのブロック自身に拡大やリンクの設定がないかを調べます。

原因が特定できないときは、「対象ページと画像」「クリック後にURLが変わるか」「画像リンクの有無」「個別・全体の設定」「WordPressとSWELLのバージョン」をまとめると、管理担当者やサポートへ状況を伝えやすくなります。

まとめ:クリック後の動きから、直す場所を選ぶ

SWELLで画像の拡大をオフにできないと感じたら、まず画像をクリックした後の画面を確認しましょう。画像ファイルへ移動するならリンク、記事に重なって開くなら拡大機能が確認の入口です。

対象の画像1枚で設定を変え、保存してページを読み込み直し、同じ画像で結果を確認する。この順に進めれば、必要なリンクを残しながら、止めたい動作を切り分けられます。

画像の選択や設定パネルの開き方から確認したい方は、SWELLのブロックエディターの基本操作も参考にしてください。

この記事を書いた人

横畑デザイン事務所代表。Webデザイナー・プログラミング講師として、WordPressを中心としたWebサイトの制作・運用と個別指導に携わっています。実際の制作や指導で培った知識と経験をもとに、Web制作やAI活用について、初心者が迷わず一歩を踏み出せる情報を分かりやすく発信しています。

目次