SWELLの検索ボタンをPCとスマホで非表示にする方法

SWELLを使っていて「この検索ボタン、正直いらないかも…」と感じたことはありませんか。

結論から言うと、SWELLの検索ボタンはカスタマイザーの設定だけで、PCとスマホを分けてかんたんに非表示にできます。

SWELLで検索ボタンを非表示にするまわりのモヤモヤを、この記事でまとめて片付けていきましょう。

SWELLで検索ボタンを非表示にする前に知っておきたいこと

SWELLの検索ボタンはどこに表示されている？

まずは、SWELLで「検索ボタン（検索アイコン）」がどこに出ているのか、ざっくり把握しておきましょう。

画面	場所	よくある表示例	主に触る設定
PC	ヘッダーバー	上部の細いバー右側に虫眼鏡アイコン	ヘッダーバー設定／検索関連の設定
PC	ヘッダーメニュー	メニューの一番右に虫眼鏡アイコン	検索ボタンの表示位置（PC）
スマホ	ヘッダーボタン周り	ハンバーガーメニュー横の虫眼鏡アイコン	検索ボタンの表示位置（SP）
スマホ	固定フッターメニュー	画面下のナビの1つとして検索アイコン	固定フッターメニュー設定
共通	ウィジェット	サイドバーやフッターの検索フォーム	ウィジェット設定

同じ「検索」でも、場所によって設定する項目が少しずつ違います。

この記事で主に扱うのは、ヘッダー周りに出てくる虫眼鏡アイコンや検索ボタンです。

一度、自分のサイトを開いてみて、次のようにチェックしてみてください。

• PCのヘッダー上部に細いバー（ヘッダーバー）が出ているか
• グローバルナビの右端に検索アイコンがあるか
• スマホ表示にしたとき、ヘッダーや画面下に検索ボタンが出ているか

「このボタンはいらない」「これは残したい」というのが分かっていると、このあと設定で迷いにくくなります。

検索ボタンを非表示にしたくなる主な理由

SWELLユーザーさんと話していると、検索ボタンを非表示にしたい理由はだいたい次のようなものが多いです。

どれももっともな理由だと思います。

ただ、なんとなく全部消してしまうと、ユーザーが必要な情報にたどり着きにくくなることもあります。とくに記事数が多いブログの場合は、検索機能があるかどうかで「読みやすさ」がかなり変わります。

検索ボタンを非表示にするときの注意点

検索ボタンを消す前に、次の3つだけはチェックしておくのがおすすめです。

• サイト全体として、検索機能は残しておくべきかどうか
• 検索ボタンを消したあと、ユーザーはどこから情報を探せるのか
• 検索の代わりに、何のボタン（お問い合わせ、予約、LINEなど）を目立たせたいのか

ブログやメディアサイトなら、「検索はどこか1か所には残す」が基本だと考えておくと安心です。

ヘッダーの検索ボタンを非表示にするなら、サイドバーやフッターに検索フォームを置いておくなど、「別の入り口」を用意しておきましょう。

ここまでイメージできたら、いよいよ具体的な設定に入っていきます。

SWELLの検索ボタンを非表示にする基本手順

PC表示の検索ボタンを非表示にする手順

まずはPC表示の検索ボタンから消していきましょう。ヘッダーの右上にある虫眼鏡アイコンが、いちばんよく見かけるパターンだと思います。

大まかな流れは次のようになります。

• 管理画面の「外観」→「カスタマイズ」を開く
• ヘッダー関連の項目（ヘッダーバーや検索ボタン設定など）を選ぶ
• 「検索ボタン」や「検索アイコン」の表示設定を探す
• 表示位置を「表示しない」など、非表示の設定に変更する
• 右上の公開ボタンを押して保存する

どの検索ボタンをどの設定で消すのか、表にするとイメージしやすいです。

消したい検索ボタン	よくある場所	見直す設定	変更のポイント
ヘッダーバー右側の虫眼鏡	PCの最上部の細いバー	ヘッダーバー設定	検索アイコンの表示をオフにする、または「表示しない」を選ぶ
メニュー右端の虫眼鏡	ロゴやメニューと同じ行	検索ボタンの設定（PC側）	PCでの表示位置を「表示しない」に変更する
ヘッダー内のテキスト検索ボタン	カスタムボタンで検索にしている場合	カスタムボタン設定	ボタン自体をオフにするか、別の用途のボタンに変更する

いきなり全部非表示にするのではなく、「この検索ボタンはいらない」「これは残したい」と考えながら、場所ごとに設定していくのがコツです。

スマホ表示の検索ボタンを非表示にする手順

次に、スマホ表示側の検索ボタンを非表示にする方法です。

スマホでは、PCと違う位置に検索ボタンが出ていることが多いので注意しましょう。

よくあるのは、次のようなパターンです。

• ハンバーガーメニューの横にある虫眼鏡アイコン
• 画面下の固定フッターメニューの中にある検索アイコン

やること自体はPCとあまり変わりませんが、設定項目で「SP」や「スマホ」と書かれている部分を探して設定します。

• 検索ボタンの設定で「スマホ（SP）の表示位置」を「表示しない」にする
• スマホヘッダーのボタン設定から、検索ボタンを削除するか別のボタンに差し替える
• 固定フッターメニューに検索を入れている場合は、そのメニュー項目を削除する

スマホは画面が小さいので、ボタンの数を減らすとかなりすっきり見えます。

その一方で、入口を減らしすぎると不便にもなるので、検索の代わりに「お問い合わせ」や「LINEボタン」を置くなど、役割を入れ替えるのもおすすめです。

ヘッダーバーごと非表示にして検索アイコンを消す方法

「検索ボタンだけじゃなくて、ヘッダーバー自体がいらない」と感じるケースもあります。

たとえば、次のようなイメージです。

• ブログタイトルとメニューだけのシンプルなデザインにしたい
• ファーストビューを大きく見せたいので、上に細いバーを置きたくない

この場合は、ヘッダーバーごと非表示にしてしまうのも一つの手です。

やり方のイメージは次のとおりです。

• 「外観」→「カスタマイズ」→「ヘッダーバー」関連の項目を開く
• 「ヘッダーバーを表示する」のチェックを外す、または「表示しない」を選ぶ
• 公開ボタンで保存する

設定のパターンごとの見た目の変化を、ざっくり表にしておきます。

設定パターン	ヘッダーバー	検索アイコン	見た目の印象
デフォルト	表示	表示	上部に細いバー＋虫眼鏡アイコンで情報量多め
検索だけオフ	表示	非表示	SNSアイコンなどは残しつつ少しスッキリ
ヘッダーバーごとオフ	非表示	非表示	ファーストビューが広くなり、かなりシンプルな印象

ヘッダーバーを丸ごと消すと、一気にミニマルな雰囲気になります。

その代わり、ヘッダーバーに置いていたSNSアイコンやお知らせリンクも消えるので、必要なものはフッターやメニューなど別の場所に移動させておきましょう。

サイトの種類別に見る「検索ボタンを非表示にすべきか」の判断基準

ブログ型サイト・メディアサイトの場合

記事数が多いブログやメディアサイトでは、検索機能はかなり重要な役割を持っています。

読者は次のようなときに検索を使います。

• 知りたいテーマで記事を探したいとき
• 以前読んだ記事をもう一度見つけたいとき

とはいえ、始めたばかりで記事が数本しかない段階では、検索されてもあまり役に立たないこともあります。

そんなときは次のような方針がおすすめです。

• 記事数が少ないうちは、ヘッダーの検索ボタンは非表示にしてもOK
• その代わり、カテゴリー一覧や人気記事を目立たせる
• 記事が増えてきたら、ヘッダーかサイドバーに検索フォームを設置する

ざっくり言えば、「読者が検索したくなるくらい記事が増えたら、検索ボタンを前面に出す」と考えると分かりやすいです。

コーポレートサイト・サービスサイトの場合

企業サイトやサービス紹介サイトの場合、ユーザーにいちばん取ってほしい行動は検索ではないことが多いです。

たとえば次のようなゴールを想定しているケースが多いと思います。

• お問い合わせフォームからの相談
• 資料請求やカタログダウンロード
• 無料相談や体験の予約

このタイプのサイトでは、ヘッダーに検索ボタンを置かず、代わりに「お問い合わせ」や「資料請求」のボタンを目立たせるケースがよくあります。

検索機能を使うにしても、フッターにひっそり置いておくくらいで十分なことも多いです。

SWELLで検索ボタンを非表示にするか迷ったら、「検索より優先したいボタンがあるかどうか」で考えてみてください。

LP・セールスページの場合

LP（ランディングページ）は、1ページで商品やサービスを説明して、そのまま行動してもらうことを目的にしたページです。

このタイプのページでは、検索ボタンがあると次のようなことが起こりがちです。

• 他のページに移動されてしまい、LPの流れが途切れる
• 出口が増えて、申込みや問い合わせに集中してもらいにくくなる

そのため、LPでは検索ボタンだけでなく、ヘッダーメニューやサイドバーなどもまとめて非表示にして、「読む」か「申し込むか」の二択に近い状態にすることが多いです。

サイトの種類ごとのざっくりしたイメージをまとめると、次のようになります。

サイトタイプ	検索ボタンのおすすめ設定	補足
ブログ・メディア	基本は表示推奨。記事が少ないうちはヘッダー非表示＋サイドバーだけでもOK	記事数が増えたらヘッダーにも検索を置くと便利
コーポレートサイト	ヘッダーの検索ボタンは非表示にしても問題ないことが多い	代わりにお問い合わせボタンや資料請求ボタンを目立たせる
LP・セールスページ	基本的に検索は非表示	ページ内の流れに集中してもらうために出口を減らす

このように、SWELLの検索ボタンを非表示にするかどうかは、「サイトの目的」とセットで考えるのがポイントです。

検索ボタンを非表示にしつつ検索機能は残す方法

サイドバーやフッターに検索フォームを設置する

検索機能を残しておくいちばん簡単な方法は、ウィジェットで検索フォームを設置しておくことです。

手順のイメージは次のとおりです。

• 管理画面の「外観」→「ウィジェット」を開く
• 「サイドバー」や「フッター」に「検索」ウィジェットを追加する
• 「サイト内検索」など、分かりやすいタイトルを付ける

これで、ヘッダーの検索ボタンを非表示にしても、サイドバーやフッターからは検索できる状態を保てます。

検索フォームをどこに置くかによって、ユーザーの動きも少し変わります。

設置場所	向いているサイト	メリット	デメリット
サイドバー上部	ブログ・メディア	目に入りやすく、よく使われる	スマホではサイドバーが下のほうになり、少し気づきにくい
フッター	コーポレートサイト	邪魔になりにくく、ページ下から探せる	検索される頻度はやや低め
サイドバー＋フッター両方	記事数が多いサイト	どこからでも検索しやすい	あちこちに出てきて少ししつこく感じることも

私の感覚では、ブログならサイドバー上部、コーポレートならフッターにさりげなく置くくらいがちょうどいいバランスです。

固定フッターメニューに検索ボタンを移動する

「ヘッダーには検索ボタンを置きたくないけど、スマホではサクッと検索してほしい」という場合は、固定フッターメニューに検索ボタンを入れるのもありです。

イメージとしては、スマホ画面の下に次のようなボタンを並べる形です。

• ホーム
• カテゴリー一覧
• 検索
• お問い合わせ

固定フッターメニューに検索ボタンを入れるメリットをまとめると、こんな感じです。

項目	メリット
画面下に固定される	親指だけで操作しやすく、スマホで使いやすい
ヘッダーをシンプルにできる	ファーストビューがスッキリして、記事や画像に目が行きやすい
検索以外のボタンも置ける	お問い合わせやLINEなど、ほかの重要な導線もまとめられる

このように、検索ボタンを「消すか残すか」だけでなく、「どこに置くか」という視点もセットで考えると、SWELLのデザインと使い勝手を両立しやすくなります。

SWELLの検索ボタンの非表示がうまくいかないときのチェックリスト

キャッシュやブラウザの問題を疑ってみる

検索ボタンを非表示にしたのに、「まだ残っている気がする」と感じたら、まずはキャッシュを疑ってみてください。

「実際はもう消えているのに、古いキャッシュが表示されているだけ」というパターンは本当に多いです。

検索ボタンの表示設定を変えたあとは、表示確認の前にキャッシュ削除までセットでやる癖を付けておくと安心です。

プラグインの競合をチェックする

SWELLの検索ボタンをクリックしても反応しない場合は、プラグインの影響でJavaScriptがうまく動いていない可能性があります。

よく使われるチェック方法は次のとおりです。

• 一度、すべてのプラグインを一時停止する
• SWELLの検索ボタンの動作を確認する
• 問題が解決していれば、プラグインを1つずつ有効化して原因を特定する

手間はかかりますが、「全部止めてから一つずつ戻す」のがいちばん確実です。

とくに、次のようなプラグインは影響しやすいので要注意です。

• 高速化やキャッシュ系のプラグイン
• JavaScriptやCSSをまとめて圧縮するプラグイン
• 独自の検索機能を追加するプラグイン

トラブルのパターンごとに、確認したいポイントを表にまとめておきます。

症状	考えられる原因	確認したいポイント
検索ボタンを消したのに表示されたまま	キャッシュが残っている	プラグイン、サーバー、ブラウザそれぞれのキャッシュを削除する
検索ボタンを押しても反応しない	プラグインの競合やJavaScriptのエラー	プラグインを一時停止し、1つずつ戻しながら原因を特定する
PCでは消えたのにスマホでは残っている	PCとSPの設定が別々になっている	検索ボタン設定のSP側の項目を見直す
ウィジェットの検索フォームだけ残っている	ヘッダー以外の検索がそのまま	サイドバーやフッターのウィジェットで検索を外す

子テーマのカスタマイズやCSSを確認する

子テーマでCSSやPHPをカスタマイズしている場合、SWELL側の設定だけでは思ったとおりに動かないこともあります。

次のような点に心当たりがあれば、一度見直してみてください。

• 子テーマのstyle.cssで、検索フォームに独自のdisplayやvisibilityを指定していないか
• .search-form や .search-toggle など、検索まわりのクラスを上書きしていないか
• 以前使っていたテーマのコードが残っていて、表示に影響していないか

どうしても原因が分からない場合は、次のような方法もあります。

• 一時的に親テーマだけを有効化して、検索ボタンの動きを確認する
• テーマの公式フォーラムや作者さんに相談してみる

無理に一人で抱え込まず、詰まったら早めに人に聞くのも大事です。

よくある質問（FAQ）

Q1. SWELLの検索ボタンを完全に非表示にしても大丈夫ですか？

A1. サイトのタイプによりますが、多くのブログやメディアでは、検索機能はあったほうが便利です。

SWELLで検索ボタンを非表示にする場合でも、サイドバーやフッターに検索フォームを残すなど、まったくのゼロにはしないほうが安心だと感じます。

一方、LPやコーポレートサイトなど、ユーザーに取ってほしい行動が決まっているサイトでは、検索ボタンを完全に非表示にしても問題ないケースも多いです。

Q2. ヘッダーの検索ボタンだけ非表示にして、検索結果に出るページを制限することはできますか？

A2. できます。

ヘッダーの検索ボタンを非表示にしても、サイドバーやフッターに検索フォームを残しておけば、検索機能自体は使えます。

さらに、特定の固定ページやLPを検索結果から除外できるプラグインもあるので、「検索できるページ」と「検索されたくないページ」を分けて運用することも可能です。

Q3. PCでは検索ボタンを表示したまま、スマホだけ非表示にすることはできますか？

A3. できます。

SWELLの検索ボタン設定では、PCとスマホ（SP）で表示位置を分けて設定できます。

そのため、「PCではヘッダーに検索ボタンを残しつつ、スマホでは固定フッターメニューだけに検索アイコンを置く」といった細かい使い分けも可能です。

検索ボタンを非表示にするときは、PCとスマホを同じにしなきゃいけないわけではないので、ユーザーの使いやすさを想像しながら調整してみてください。

まとめ：SWELLの検索ボタンを非表示にして、サイトの目的に合った導線を作ろう

この記事のポイントを整理します

今日からできる最初の一歩としては、まず自分のサイトをPCとスマホの両方で開き、「どの検索ボタンを残したいのか」「どのボタンはいらないのか」を紙やメモアプリに書き出してみてください。

そのうえで、カスタマイザーの「ヘッダーバー」や「検索ボタン設定」を一つずつ確認していけば、迷わずにSWELLの検索ボタンをちょうどいい配置にできるはずです。

検索ボタンをただ消すのではなく、「ユーザーにとっていちばん使いやすい導線は何か」を意識しながら、あなたのサイトに合った形に整えてみてくださいね。