SWELLで画像クリックの拡大をオフにする方法＆ポップアップ設定ガイド

この記事ではワードプレステーマSWELLの画像の拡大やポップアップ設定についてお伝えします。

ひと言でまとめると、「SWELLの標準機能だけで、画像のクリック拡大とポップアップはかなり自由にコントロールできるので、仕組みと考え方さえ分かれば怖くないよ」という内容です。

SWELLの画像クリック拡大・ポップアップは何ができる？

SWELLで画像をクリックすると拡大される仕組み

SWELLでは、記事の中に挿入した画像をクリックすると、画面中央にふわっと大きく表示されることがあります。

これは、テーマ側が用意している「画像をその場で拡大して見せる機能（いわゆるポップアップ表示）」が動いている状態です。

ざっくりいうと、次のような流れになっています。

• 記事本文に挿入された「画像ブロック」をテーマが自動でチェックする
• 設定に応じて、その画像に「クリックで拡大」の動きを付ける
• クリックされたら画面中央に大きく表示し、背景を少し暗くする

イメージしやすいように、特徴を表にまとめてみます。

項目	内容
機能	画像をクリックしたときにその場で拡大表示する
対象	記事内の画像ブロックやギャラリー内の画像
表示方法	画面中央にポップアップ表示し、背景を少し暗くする
設定単位	サイト全体／画像ごとにオン・オフを切り替え可能
主な用途	図解・スクリーンショット・商品画像などを大きく見せる

ここを押さえておくと、「とりあえず全部オフ」「大事な画像だけオン」といった設計もしやすくなります。

SWELLの画像ポップアップのメリット・デメリット

SWELLの画像ポップアップは、とても便利な一方で、使い方を間違えると読者にストレスを与えてしまうこともあります。

一度、メリットとデメリットを整理しておきましょう。

メリット

• 小さく表示した図や表を、ワンタップで大きく見せられる
• 本文の邪魔にならないサイズで画像を配置しつつ、必要なときだけ拡大できる
• 別タブで画像を開かなくていいので、読者がページから離れにくい

デメリット

• どの画像でも拡大されると、誤タップが増えてイライラされやすい
• ポップアップの閉じ方が分かりにくいと、スマホで迷子になりやすい
• 写真が多いサイトだと、連続してポップアップが出て落ち着かない印象になる

私自身の感覚だと、「図解や文字が多い画像はポップアップをオン」「雰囲気を伝えるだけの写真はオフ」という使い分けが、読みやすさと見やすさのバランスが良くなりやすいです。

SWELLで画像クリック拡大をオン・オフする基本設定

サイト全体で画像のクリック拡大を止める・有効にする

まずは、サイト全体で画像のクリック拡大を有効にするか、まとめて止めてしまうかを決める設定です。

管理画面からSWELLの設定画面を開くと、「機能停止」系のタブの中に、画像のクリック拡大に関する項目があります。

ここでオン・オフを切り替えると、サイト全体の基本的な挙動が変わります。

イメージとしては、次のような感じです。

状態	サイト全体の挙動
チェックなし	記事内の画像は、基本的にクリックで拡大される
チェックあり	画像のクリック拡大（ポップアップ）機能が全体的に停止する
変更後の注意点	画像ごとの個別設定で、例外的にオン・オフを変えられる場合がある

「まずは全ページで画像の拡大を止めたい」という場合は、ここでオフにしてしまうのが一番早いです。

逆に、ブログやマニュアルサイトなど、画像をしっかり見せたいサイトではオンのままにしておき、そのうえで画像ごとの調整をしていくとやりやすいです。

画像ごとにクリック拡大・ポップアップを制御する方法

次に、画像ブロック単位でクリック拡大をオン・オフする方法です。

ブロックエディターで画像を選択すると、画面右側に「画像」ブロックの詳細設定が表示されます。

その中に「クリックして拡大する機能」などの項目があり、次のような選択肢から選べます。

• 全体設定に従う
• オンにする
• オフにする

この3つをうまく使い分けることで、例えば次のようなことができます。

• サイト全体はオンだけど、ヘッダー直下のメインビジュアルだけオフにする
• サイト全体はオフだけど、マニュアル系の記事内の図だけオンにする
• 同じ記事の中でも、図解だけポップアップ、イメージ写真はポップアップなしにする

あとから見直したときに迷わないように、「この画像は拡大して見てもらう必要があるか？」という基準で決めていくと、整理しやすいです。

「全体設定に従う」「オン」「オフ」の使い分け

「全体設定に従う」「オン」「オフ」をどう使い分ければいいか、イメージしやすいように表にしておきます。

選択肢	おすすめの使い方	具体例
全体設定に従う	特に理由がなければ基本はこのまま	通常のブログ記事の写真全般
オンにする	図・グラフ・表など、細かい文字が入った画像	マニュアル・ノウハウ系記事の図解や手順画像
オフにする	デザイン重視のヘッダー画像やバナー	LPのメインビジュアル、スライダーの写真など

あらかじめ「どんな画像はオン」「どんな画像はオフ」と自分なりのルールを決めておくと、サイト全体の統一感も出ますし、編集作業もずっと楽になります。

ギャラリーとSWELL画像ポップアップの活用テクニック

ギャラリーブロックで写真をポップアップ表示する

ギャラリーブロックは、複数の画像をタイル状に並べて表示できるブロックです。

SWELLの画像ポップアップと組み合わせると、一覧性と拡大表示の両方を両立できます。

基本的な考え方は次のとおりです。

• ギャラリーブロック自体は、画像を小さめのサムネイルで並べる
• 各画像に対して、クリックで拡大する機能を有効にしておく
• 読者は「気になった画像だけタップして拡大」できるようになる

用途ごとのおすすめ構成を表にしておきます。

用途	ギャラリーのレイアウト	画像ポップアップの設定
作品集・ポートフォリオ	3列タイル＋キャプションあり	全画像でクリック拡大をオン
商品一覧ページ	2〜3列タイルで見やすく配置	メイン画像のみ拡大、その他はオフ
旅行記・ブログ	3列タイルで写真を多めに掲載	雰囲気写真はオフ、説明が必要な写真だけオン

ギャラリーを多用するときは、キャプション（画像の説明文）も一緒に設定しておくと、ポップアップ時にも「何の画像か」が分かりやすくなるのでおすすめです。

商品画像・図解などでの具体的な見せ方

SWELLの画像ポップアップは、商品画像や図解との相性がとても良いです。

具体的なパターンをイメージしやすいように、いくつか挙げてみます。

• 商品紹介記事の場合
  記事の中ほどに、商品画像を2〜3枚並べたギャラリーを用意し、メインの「全体写真」だけクリック拡大をオンにします。細部のアップ写真はあえてオフにしておくことで、ユーザーは必要なときだけ大きな画像を確認できます。
• マニュアル記事の場合
  手順ごとにスクリーンショットを配置し、文字が小さくて読みにくいスクショだけクリック拡大をオンにします。スマホユーザーでも無理なく手順を追えるようになり、サポート負荷も下げられます。

こういった「どの画像を拡大させるか」という設計を意識すると、自然とポップアップを付けるべき画像が見えてきます。

スマホでのSWELL画像クリック拡大を快適にするコツ

スマホで画像ポップアップが見づらい原因

スマホで画像ポップアップが「見づらい」「閉じづらい」と感じる主な原因を整理してみます。

症状	よくある原因	ひと言メモ
画像が大きすぎる	元画像が巨大で、拡大率も高めに設定されている	タテ長画像は特に注意が必要
画像がぼやける	小さい画像を無理に拡大している	元画像の解像度不足が原因になりやすい
閉じ方が分からない	×ボタンや背景のタップに気づきづらい	クローズボタンの位置やサイズも大事
何度も誤タップする	画像が密集しすぎている	画像同士の余白を多めに取ると改善

実際には、元画像のサイズと拡大のバランスを整えるだけでも、かなり見やすくなります。

特に、スマホで重要な図や表を扱うときは、最初から「拡大しても読めるサイズ」で画像を書き出しておくのがポイントです。

CSSでポップアップ画像のサイズや余白を調整する考え方

SWELLの画像ポップアップの見た目を、もう少し細かく調整したい場合は、追加CSSで次のような考え方でカスタマイズしていきます。

• 画像の最大幅を、画面の何％までにするか決める
• 上下左右の余白（マージン）を少しだけ空けて、窮屈さを減らす
• スマホだけ別の設定にしたい場合は、メディアクエリでPCとスマホを分ける

例えば、

• スマホでは画像を画面いっぱい近くまで広げて、上下に少しだけ余白を入れる
• PCでは余白を広めに取り、写真をじっくり眺められるようにする

といった方向性で調整すると、どちらの環境でも使いやすくなります。

CSSの具体的な書き方は、SWELLのマニュアルや公式のサンプルを参考にしながら、テスト用の固定ページなどで試し打ちしていくと安全です。

画像サイズ・解像度の目安

画像クリック拡大やポップアップで見せることを前提にするなら、元画像の解像度も意識しておきたいところです。

ざっくりした目安として、次のように考えると失敗しづらくなります。

用途	推奨イメージ	注意点
図解・表・文字入り画像	本文の横幅より少し大きいサイズ	小さすぎると、拡大しても文字が読めない
スクリーンショット	実際の画面サイズそのまま	アップロード時の圧縮設定を確認する
雰囲気メインの写真	必要以上に大きくしない	大きすぎる画像は読み込みが重くなる

「とりあえず大きい画像を全部放り込んで、あとはSWELLに任せる」という運用もできますが、ページの読み込み速度とのバランスもあるので、サイトのジャンルに合わせて調整していきましょう。

SWELL画像ポップアップを使ったデザイン・CTA設計

どの画像にクリック拡大を付けるべきか

サイト全体を見たときに、「どの画像にSWELLの画像クリック拡大を付けるか」はとても大事な設計ポイントです。

すべての画像がポップアップするサイトは、ユーザーにとって少し落ち着きがない印象になることもあります。

おすすめなのは、次のような基準でオン／オフを判断することです。

• 拡大して読んでほしい情報がある画像
  図解・グラフ・表・文字入り画像は、クリック拡大をオンにする。
• 拡大しても特に得るものがない画像
  雰囲気写真・背景的な画像・飾りのイラストは、あえてオフにする。
• PCとスマホで役割が違う画像
  PCでは装飾メインだけど、スマホでは図として機能する画像などは、ページごとに判断する。

これだけでも、読者にとって「拡大して見る価値のある画像」と「そうでもない画像」が自然に分かれて、体験がかなり快適になります。

バナーやブログパーツとポップアップの組み合わせ

SWELLでは、画像だけでなく「ブログパーツ」や「カスタムブロック」を使って、疑似的なポップアップコンテンツを作ることもできます。

画像ポップアップと組み合わせると、デザインの幅が一気に広がります。

例えば、次のような使い方が考えられます。

• メルマガ登録を増やしたいケース
  サイドバーや記事下にメルマガ用のバナー画像を設置し、クリックすると、ページ上部に説明テキスト付きのブログパーツが表示されるようにする。画像クリック拡大はオフにしておき、クリック＝詳細を見る、という意味に統一する。
• 商品購入を後押ししたいケース
  商品画像自体にはクリック拡大をオンにし、すぐ下に「詳しく見る」ボタンを配置する。ユーザーはまず拡大画像でイメージを確認し、そのままボタンから商品ページに移動できる。
• プロフィールをしっかり読んでほしいケース
  著者の顔写真はクリック拡大をオンにしつつ、その近くにプロフィール用のブログパーツを置く。写真で親近感を出し、テキストで信頼感を補強できる。

画像ポップアップそのものをフォーム化するというより、「画像で興味を引き、詳細はテキストやボタンで見せる」という二段構えにすると、実装も簡単でユーザーにも親切です。

トラブルシューティング｜画像クリック拡大・ポップアップが動かないとき

まず確認したいSWELLと画像ブロックの設定

不具合のように見えるときほど、意外と単純な設定ミスが原因だったりします。

次のチェックリストで、基本を押さえておきましょう。

チェック項目	見る場所	確認内容
サイト全体の設定	SWELL設定の機能停止タブなど	画像クリック拡大まわりのオン／オフが意図どおりか
画像ブロックの設定	ブロックエディター右側の設定パネル	「クリックして拡大する機能」がどうなっているか
画像の種類	ブロックの種類を確認	通常の画像ブロックか、特殊なブロックか
キャッシュ	キャッシュプラグインやブラウザ	変更がちゃんと反映されているか

これらを一つずつ確認するだけで、多くのケースは解決します。

特に、サイト全体の設定を変えたあとにブラウザキャッシュが残っていると、変化が反映されていないように見えることがあるので注意です。

プラグイン競合・キャッシュ・JavaScriptエラーの可能性

設定を確認しても画像ポップアップがうまく動かない場合、プラグインの競合やJavaScriptエラーが絡んでいる可能性があります。

よくあるパターンを挙げておきます。

• 画像ポップアップ系やライトボックス系のプラグインを複数入れている
  → テーマの機能とぶつかって、どちらか片方しか動かなくなる。
• キャッシュ系プラグインで、JSやHTMLが強めに圧縮されている
  → スクリプトの読み込み順や内容が変わり、エラーにつながる。
• ブラウザのコンソールにエラーが出ているのに気づいていない
  → 開発者ツールでエラーを確認すると、原因のヒントが見つかる。

まずは次のような手順で切り分けをしてみてください。

• 画像ポップアップ系プラグインを一時的に停止して様子を見る
• キャッシュプラグインを無効化し、ブラウザのキャッシュも削除する
• ブラウザのシークレットウィンドウでページを開き、挙動を確認する

これだけでも、「テーマ側の問題なのか」「プラグイン側の問題なのか」がかなり見えてきます。

それでも直らないときの相談先

ここまでやっても画像クリック拡大やポップアップがどうしても直らない場合は、無理に自力で深追いしすぎず、次のようなところに相談するのも一つの手です。

• SWELLの公式フォーラムやサポートページ
• SWELLユーザーが集まるコミュニティやSNS
• サイト制作を依頼している外部の制作者さん

その際には、次のような情報をセットで伝えると、状況が伝わりやすくなります。

• 問題が起きている画面のスクリーンショット
• 画像クリック拡大が効いていない、または止まらないページのURL
• すでに試したこと（キャッシュ削除、プラグイン停止など）の一覧

ここまで用意しておくと、相手も原因を絞り込みやすくなり、解決までの時間がだいぶ短くなります。

よくある質問｜SWELLの画像クリック拡大・ポップアップ

Q1. 画像のクリック拡大を一部の記事だけオフにできますか？

A. できます。

やり方としては、次のようなイメージです。

• サイト全体では画像のクリック拡大をオンにしておく
• オフにしたい記事だけ、対象の画像ブロックで「クリックして拡大する機能」をオフにする

これで、その記事内の画像ポップアップだけを止めることができます。

Q2. SWELLの画像ポップアップでキャプションも一緒に表示できますか？

A. キャプション（画像の下に表示する説明文）は、ブロック側で設定しておくと、テーマの仕様によってはポップアップ時にも何らかの形で参照される場合があります。

ただし、表示のされ方はテーマのバージョンやカスタマイズ内容にも左右されるので、

• 元の画像ブロックに、意味が分かるキャプションをきちんと入れておく
• 必要に応じてCSSやカスタムスクリプトで見た目を整える

といった形で調整していくのがおすすめです。

Q3. 画像クリック拡大を使うと、サイトが重くなりませんか？

A. 画像クリック拡大や画像ポップアップの機能そのものは、一般的にはそこまで重い処理ではありません。

ただ、次のような条件が重なると、体感速度が遅くなることがあります。

• そもそもの画像ファイルが必要以上に大きい
• 1ページに大量の画像を詰め込みすぎている
• 別のプラグインでも画像関連の処理を重ねがけしている

SWELLの画像ポップアップを使うときは、

• 画像サイズを適切に圧縮する
• 本当に拡大して見てほしい画像だけポップアップをオンにする

といった基本的な調整も一緒に意識しておくと安心です。

まとめ｜SWELLの画像クリック拡大・ポップアップを味方にする

この記事のポイントを振り返ります

今日から取るべき最初の一歩としては、テスト用の固定ページを一つ作り、

• 画像クリック拡大がオンになっている画像
• オフになっている画像
• ギャラリーブロックでポップアップする画像

を並べて、実際にスマホとPCの両方で触ってみてください。

そのうえで、自分のサイトにとって一番読みやすいパターンを選び、

• サイト全体の方針（基本はオンかオフか）
• 各記事でのSWELL画像クリック拡大・画像ポップアップの使い分けルール

をざっくり決めておくと、読者にとっても、記事を書く自分にとっても心地よいサイトに育っていきます。