SWELL検索ボタンの設定方法｜表示位置の変更とカスタマイズ手順を解説

SWELLの検索ボタンは、設定次第でサイトの使い勝手が大きく変わります。「ヘッダーの虫眼鏡アイコンをもっとスッキリさせたい」「スマホだけ別のボタンに差し替えたい」と思ったことはありませんか。カスタマイザーを使えば、コードを書かなくてもPCとスマホそれぞれの表示位置を自由に設定できます。

SWELLの検索ボタンは、ヘッダーバー・ヘッダーメニュー・スマホヘッダーなど複数の場所に表示されます。それぞれ設定する項目が少し異なるため、「どのボタンを、どこの設定から変えるのか」を整理してから作業すると、操作で迷いにくくなります。

この記事では、SWELL公式サイトおよび関連ドキュメントをもとに、検索ボタンの基本設定から表示位置のカスタマイズ、デザイン調整、よくあるトラブルの対処法まで順を追って整理します。WordPressを始めたばかりの方や、カスタマイザーをあまり触ったことがない方にも分かりやすいよう、手順を丁寧に説明します。

SWELLの検索ボタンはどこにある？表示位置の全体像

SWELLの検索ボタンは「ヘッダーのどこか1か所」にまとめられているわけではなく、PCとスマホそれぞれに複数の表示場所があります。どのボタンを変更したいのかを先に把握しておくと、カスタマイザーの設定画面で迷わずに済みます。

PCで表示される検索ボタンの場所

PCでは、検索ボタンが主に2か所に出ることがあります。1つ目は「ヘッダーバー」と呼ばれる、ロゴやメニューよりも上の細いバー右側に表示される虫眼鏡アイコンです。2つ目はグローバルナビ（ヘッダーメニュー）の右端に表示されるアイコンで、こちらをクリックすると全画面の検索モーダルが開きます。

SWELLのカスタマイザーでは、PCでの検索ボタン表示位置を「ヘッダーバー内」「ヘッダーメニュー内」「表示しない」などから選択できます。どちらに出しても動作は同じで、クリックするとサイト内検索フォームが開く仕組みです。

PCのヘッダーレイアウトは「外観＞カスタマイズ＞ヘッダー」の「レイアウト・デザイン設定」から4種類の並び方を選べます。ロゴとメニューの位置関係によっては、検索ボタンの見え方も変わるため、レイアウト変更と合わせて確認するとよいでしょう。

• PCとスマホで設定項目が独立しているため、片方だけ変更することができます
• ヘッダーレイアウトの種類によって、検索ボタンの見え方が多少変わります
• どの場所に出しても、クリックで開く検索フォームは同じ全画面モーダルです
• 「表示しない」を選んでも、サイドバーやフッターに検索フォームを置けば検索機能は残せます

スマホで表示される検索ボタンの場所

スマホではPCと異なる場所に検索ボタンが表示されます。代表的なのはハンバーガーメニューの横に出る虫眼鏡アイコンと、画面下部の固定フッターメニュー内に設置された検索アイコンの2パターンです。

スマホのヘッダーには「メニューボタン」と「カスタムボタン」の2つを設置できます。デフォルトでは2つ目のボタンが検索ボタンになっていますが、このカスタムボタンは好きなアイコンと好きなリンク先に変更することができます。お問い合わせページやLINEへのリンクボタンに差し替えたい場合は、「外観＞カスタマイズ＞ヘッダー」のカスタムボタン設定から変更します。

固定フッターメニューに検索を含めている場合は、そちらの設定も別途確認が必要です。スマホは画面が小さいため、ヘッダーから検索ボタンを外し、画面下の固定フッターに移動させると親指で操作しやすくなる場合があります。

ウィジェットエリアに置く検索フォームとの違い

「ヘッダーの検索ボタン」と「ウィジェットの検索フォーム」は別物です。ヘッダーの検索ボタンはアイコンをクリックして開くモーダル型ですが、ウィジェットの検索フォームはサイドバーやフッターに常に表示されているテキスト入力タイプです。

SWELLのウィジェット検索は「外観＞ウィジェット」から「検索」ウィジェットをサイドバーや記事下などのエリアに追加することで設置できます。ヘッダーの検索ボタンを非表示にした場合でも、ウィジェット検索フォームを別の場所に置いておけば、検索機能自体を損なわずに済みます。

記事数が増えてきたブログでは、「ヘッダーの検索ボタン＋サイドバー上部のウィジェット検索フォーム」の組み合わせが読者にとって使いやすい構成の1つです。どちらか一方だけに頼るより、複数の入り口を用意しておくと回遊しやすいサイトになります。

SWELLの検索ボタン表示位置をカスタマイザーで変更する手順

検索ボタンの表示位置はカスタマイザーから操作します。コードを書く必要はなく、設定画面を開いてラジオボタンやチェックボックスを切り替えるだけで変更できます。PCとスマホで設定項目が分かれているため、両方を順に確認しましょう。

カスタマイザーを開いて検索ボタン設定を見つける

カスタマイザーはWordPressの管理画面から「外観＞カスタマイズ」で開きます。SWELLの場合、検索ボタンに関する設定は「ヘッダー」のメニュー内に「検索ボタン」という設定エリアとして用意されています。

「ヘッダー」メニューを開くと、カラー設定・レイアウト設定・ヘッダーバー設定・検索ボタン設定など複数の設定エリアが縦に並んでいます。スクロールして「検索ボタン」の項目を探してください。設定画面の右側にはリアルタイムのプレビューが表示されるため、変更しながら見た目を確認できます。

設定を変更したあとは、右上の「公開」ボタンを押して保存します。プレビューで確認した内容を保存し忘れることのないよう、変更後は必ず公開ボタンを押す習慣をつけておくとよいでしょう。

PCでの検索ボタン表示位置を変更する

PCの検索ボタン表示位置は、カスタマイザーの検索ボタン設定エリア内にあるPC用の選択肢から変更します。主な選択肢は「ヘッダーバー内に表示」「ヘッダーメニュー内に表示」「表示しない」などです（SWELLのバージョンによって表記が異なる場合があります。最新の項目名はSWELL公式サイトの設定解説ページでご確認ください）。

ヘッダーバーにSNSアイコンを表示している場合、検索ボタンをヘッダーバー内に置くと同じ行にまとめられます。グローバルナビの右端に配置したい場合はヘッダーメニュー内を選択します。どちらが見やすいかはサイトのレイアウトやデザインによって変わるため、プレビューを見ながら決めるとよいでしょう。

スマホでの検索ボタン・カスタムボタンを設定する

スマホヘッダーのカスタムボタンは「外観＞カスタマイズ＞ヘッダー」のスマホ設定エリアから変更します。アイコンクラス名・アイコン下のラベルテキスト・背景色・リンク先URLをそれぞれ設定できます。

デフォルトでは検索ボタンとして機能しているカスタムボタンを、別のページへのリンクボタンに変えることもできます。お問い合わせページやLINE公式アカウントへの誘導ボタンに差し替えたい場合は、リンク先URLを変更し、アイコンクラス名も対応するものに書き換えます。

スマホの固定フッターメニューに検索アイコンを追加したい場合は、固定フッターメニューの設定から該当の項目を追加します。画面下部に固定されるため、親指だけで操作しやすく、スクロール中でも検索にアクセスしやすいのが特徴です。

• アイコンクラス名はSWELL公式のアイコン一覧から「icon-xxxx」の形式でコピーして使います
• ラベルテキストは4文字以内に収めると表示が整いやすいです
• ボタンの背景色はSWELL設定＞エディター設定＞ボタンタブで確認できる色と合わせると統一感が出ます

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

「ヘッダーバー自体を表示したくない」という場合は、ヘッダーバーごと非表示にすることもできます。SWELL公式サイトの設定解説によると、ヘッダーバーはSNSアイコンリストの表示設定またはキャッチフレーズのヘッダーバー表示設定がオンのときに表示される仕組みです。

これらをすべてオフにすると、条件によってはヘッダーバーが非表示になります。ただし「コンテンツが空でもボーダーとして表示する」をオンにしている場合は、PC表示でのみ細いボーダーが残ります。ヘッダーバーをなくしてシンプルなデザインにしたい場合は、この設定もオフにしてから確認しましょう。

ヘッダーバーを丸ごと非表示にすると、そこに置いていたSNSアイコンやキャッチフレーズも同時に消えます。必要な情報はフッターやサイドバーなど別の場所に移動させてから、非表示にするかどうかを決めると、後で慌てずに済みます。

SWELLの検索ボックスのデザインをカスタマイズする方法

検索ボタンをクリックして開く検索フォームや、ウィジェットで設置した検索ボックスは、CSSを追加することでデザインを変更できます。SWELLのウィジェット検索ボックスはヘッダーの検索モーダルと同じデザインが適用されるため、一度CSSを書けば両方に反映されます。

追加CSSで背景色・枠線・アイコン色を変える

SWELLの検索ボックスに使われている主なCSSクラスは、入力フォームが「.c-searchForm__s」、虫眼鏡ボタンが「.c-searchForm__submit」です。カスタマイザーの「追加CSS」または子テーマのstyle.cssにこれらのクラスを対象としたスタイルを書くと、デザインを変更できます。

よく調整される項目は「検索ボックスの背景色」「プレースホルダーの文字色」「枠線の色と太さ」「虫眼鏡アイコンの色」などです。サイト全体のメインカラーに合わせてカラーコードを変えるだけでも、デフォルトのビジネスライクな印象から一変して、ブログのデザインになじんだ見た目になります。

CSSの変更はカスタマイザーの「追加CSS」に書くのが基本ですが、より管理しやすくしたい場合は子テーマのstyle.cssに記述する方法もあります。子テーマを使っていない場合は、作業前にバックアップを取っておくと安心です。

プレースホルダーのテキストを変更する

検索ボックス内に薄く表示されている「検索」という文字（プレースホルダー）は、functions.phpにコードを追記することで変更できます。SWELLにはプレースホルダーのテキストを変更するためのフィルターフック「swell_searchform_placeholder」が用意されています。

変更の流れは、子テーマのfunctions.phpの末尾に「add_filter」を使ったコードを追記するだけです。「記事をさがす」「キーワードで検索」など、ブログのジャンルや雰囲気に合った表現に変えると、読者にとって何を入力すればいいかが伝わりやすくなります。

functions.phpを直接編集するときは、必ず子テーマのfunctions.phpを使い、事前にバックアップを取ることを心がけてください。親テーマのファイルを誤って編集するとテーマアップデート時に変更が消えてしまいます。また、コードに誤りがあるとサイトが表示されなくなる場合があるため、変更後は必ず動作確認をしましょう。

• プレースホルダーの変更はウィジェット検索ボックスとヘッダーの検索モーダル両方に反映されます
• ブログのジャンルに合った具体的な文言にすると、読者が使いやすくなります
• 作業は子テーマのfunctions.phpで行い、必ずバックアップを取ってから編集します

サイトのデザインと検索ボックスの統一感を出すコツ

検索ボックスだけ浮いて見えてしまうのは、ボタン色やフォントサイズが他のパーツと合っていないことが多いです。SWELLはもともとデザインの統一感が特徴のテーマなので、既存のボタンやカードのデザインを参考にして近づけると、検索ボックスだけが悪目立ちしにくくなります。

意識しておきたいポイントは「ボタン背景色をサイトのメインカラーに揃える」「角丸の大きさを他のボタンと合わせる」「アイコンのテイストをサイト内で統一する」の3点です。フォントサイズは本文と極端に変えないほうが、ページ全体の読みやすさを保てます。

スマホ表示では、検索ボックスの横幅が画面幅いっぱいになっていることも確認しましょう。CSSで「max-width: 100%」などを指定しておくと、どの端末でも崩れにくくなります。実際のスマホやブラウザの開発者ツールで表示を確認しながら微調整するのが確実な方法です。

検索ボタンの表示がおかしいと思ったときのチェックポイント

カスタマイザーで設定を変えたのに検索ボタンが消えない、クリックしても反応しないといったトラブルは、原因がある程度絞られます。順を追って確認することで、多くの場合は解決できます。

キャッシュが原因で変更が反映されていないケース

設定を変えたのに見た目が変わらないと感じたとき、最初に疑うべきはキャッシュです。キャッシュ系プラグインを使っている場合はプラグインのキャッシュを削除し、レンタルサーバー側にキャッシュ機能がある場合はそちらも削除します。

ブラウザのキャッシュが残っている場合もあります。ブラウザの更新ボタンを長押ししてキャッシュを無視した強制リロードを試すか、シークレットウィンドウ（プライベートブラウジング）で表示を確認してみてください。サイト側の設定は正しく変わっているのに、古いキャッシュが表示され続けているだけというケースは非常によくあります。

設定変更後にキャッシュを削除してから表示確認する流れをセットにしておくと、「変わっていない」と思って同じ設定を繰り返してしまう混乱を防げます。

プラグインの競合でクリックが反応しないケース

検索ボタンをクリックしても検索モーダルが開かない場合は、プラグインの影響でJavaScriptが正常に動作していない可能性があります。高速化・キャッシュ系プラグインや、JavaScriptを圧縮・結合するプラグインは影響しやすいため注意が必要です。

確認方法は、一度すべてのプラグインを一時停止して検索ボタンの動作を確認し、問題が解決したら1つずつプラグインを有効化して原因を特定します。手間はかかりますが、この手順が最も確実に原因を見つけられる方法です。

子テーマのCSSやPHPが干渉しているケース

子テーマで独自のCSSやPHPを書いている場合、SWELL本体のカスタマイザー設定だけでは意図した動作にならないことがあります。子テーマのstyle.cssで検索フォーム関連のクラスに「display: none」などが指定されていないか確認しましょう。

「.search-form」や「.search-toggle」など検索まわりのクラスを以前カスタマイズしていた場合、その記述がまだ残っていて干渉していることもあります。また、以前使っていた別テーマのコードが残っている場合も影響する場合があります。

原因の特定が難しい場合は、一時的に親テーマだけを有効にして動作を確認する方法もあります。どうしても解決しない場合はSWELLの公式サポートフォーラムに問い合わせるのも有効な手段です。一人で長時間悩み続けるより、早めに情報を求めるほうが解決が早くなることも多いです。

PCとスマホで設定が噛み合っていないケース

「PCでは検索ボタンを表示しているが、スマホではカスタムボタンに変更した」という場合、設定をそれぞれ確認しないと意図しない表示になることがあります。PCとSPは設定項目が分かれているため、片方を変えたつもりがもう一方に影響していないかを確認しましょう。

カスタマイザーのプレビューはPC表示とスマホ表示を切り替えながら確認できます。設定後に必ずスマホプレビューもチェックする習慣をつけると、「スマホでは意図しないボタンが出ていた」という見落としを防げます。

• PCとSPは設定画面が分かれているため、それぞれ個別に確認します
• 設定変更後はPC・スマホ両方のプレビューを必ず確認します
• 固定フッターメニューへの検索アイコン設定はヘッダーとは別の場所にあります

サイトの目的に合わせた検索ボタンの使い方

検索ボタンをどこに置くか・表示するかしないかは、サイトの種類や目的によって判断が変わります。「とりあえずデフォルトのまま」ではなく、サイトの用途に合った配置を選ぶことで、読者にとって使いやすい導線を作れます。

ブログ・情報サイトでの検索ボタン活用法

記事数が増えてきたブログや情報サイトでは、検索機能が読者の回遊に大きく影響します。読者が「以前読んだ記事を探したい」「このテーマに関する記事を絞り込みたい」と思ったとき、検索ボタンがすぐ見える位置にあると離脱率の軽減につながります。

記事が少ない立ち上げ初期は、ヘッダーの検索ボタンは非表示にしてもあまり影響しません。この時期はカテゴリ一覧や新着記事ウィジェットを目立たせる構成のほうが、読者を記事へ誘導しやすいです。記事が50〜100本を超えてきたあたりから、検索フォームをサイドバーやヘッダーに配置することを検討するとよいでしょう。

ブログ・情報サイトでは「ヘッダーの検索ボタン＋サイドバー上部の検索フォーム」の組み合わせが、どのページからでも検索に移れる構成として使いやすいとされています。スマホではヘッダーの検索ボタンが目に入りやすいため、カスタムボタンを検索のままにしておく選択肢も検討に値します。

WordPressサイト制作・コーポレートサイトでの考え方

企業サイトやサービス紹介サイトでは、ユーザーに取ってほしい最優先の行動は「お問い合わせ」や「資料請求」などであることが多く、検索ボタンは優先度が下がる場合があります。この場合はヘッダーから検索ボタンを外し、代わりにお問い合わせボタンや予約リンクを目立たせる構成がよく使われます。

SWELLのスマホカスタムボタンは任意のリンク先に変更できるため、「お問い合わせページ」「LINE公式アカウント」「予約フォーム」などへのボタンに差し替えることができます。サイトを訪れたユーザーに「次に何をしてほしいか」を軸にボタンを設計すると、自然な導線が生まれます。

検索機能を完全になくす必要はなく、フッターにウィジェット検索フォームをひっそり置いておく程度で十分なケースも多いです。「ヘッダーには最優先のボタン1〜2個、検索はフッターに」という構成は、シンプルさと利便性を両立しやすい考え方です。

LP（ランディングページ）での検索ボタンの扱い

LPは1ページで申込みや問い合わせに誘導することを目的としたページのため、ヘッダーの検索ボタンを含めた外部への出口をなるべく少なくするのが基本的な考え方です。検索ボタンがあると別のページへ移動されやすくなり、ページ内の流れが途切れるリスクがあります。

SWELLでLPを作成する場合、カスタマイザーの設定で検索ボタンを非表示にするほか、グローバルナビ（ヘッダーメニュー）もLPに合わせた内容に変更するか非表示にすることが多いです。LPでは読者に「読む」か「申し込む」かの2択に近い状態を作ることが意図した行動を促しやすくします。

• LP・セールスページでは検索ボタンを含め、外部へ出る導線をなるべく減らします
• ブログでは記事数が少ない初期はヘッダー非表示でも可、増えてきたらサイドバーと組み合わせます
• コーポレートでは検索よりお問い合わせボタンを優先し、検索はフッターに置くと整理しやすいです

まとめ

SWELLの検索ボタンは、カスタマイザーの「外観＞カスタマイズ＞ヘッダー」から、PCとスマホを分けて表示位置を変更できます。デザイン調整は追加CSSで対応し、プレースホルダーの変更は子テーマのfunctions.phpに1行追記するだけで実現できます。

まず試してほしいのは、カスタマイザーを開いてPCとスマホそれぞれの検索ボタン設定を確認することです。デフォルトのままの場合は、自分のサイトの目的に合った表示位置に変更するだけで、サイト全体の使いやすさが変わります。

設定を変えたあとはキャッシュを削除してからPC・スマホ両方の表示を確認する流れを習慣にしておくと、トラブルに気づきやすくなります。少しずつ自分のサイトに合った形に整えていきましょう。

当ブログの主な情報源

• 消費者庁：SNSなどを通じた投資や副業といったもうけ話にご注意ください
• 総務省 公式ウェブサイト
• 情報処理推進機構 公式ウェブサイト