【AFFINGER6】検索フォームのサイドバー設置と配色設定！

「検索フォーム」はサイト内の記事を特定のキーワードで検索してくれる便利な機能です。ユーザー（読者）の利便性も高くなりますが、なによりも、自分が過去に書いた記事を探すときにとても楽です。

検索フォームはサイドバーに設置すると、いつでも使えて便利ですので、サイドバーに表示して、さらに配色を整える方法を本記事で紹介します。

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

検索フォームには「検索フォーム用」ウィジェットが用意してあります。サイドバーにウィジェットを配置します。

WordPress の管理画面から「外観」 → 「ウィジェット」を選択します。

サイドバーに「検索：サイト内検索」ウィジェットを配置します。

WordPress の管理画面から「外観」 → 「カスタマイズ」 → 「オプション（その他）」 → 「検索フォーム」を選択します。

配色や、枠線の太さなどを指定することができますので、自分の好みの配色でデザインすることが可能です。

ポイント

注意書きが面白い！

「数値は微調整用です（1～20）。極端な設定はデザインが破綻する場合があります」

でもちょっと破綻させてみたい気もします！

検索フォームの placeholder	最初に表示されている文字列「ここに検索キーワードを入力してください」などを書きます。
文字・アイコンサイズ	文字とアイコンのサイズを指定する。初期値でＯＫです。
検索フォームの背景色	サイトの背景色に合わせて設定を変えてください。
検索フォーム内の文字色	初期値では文字色が「薄い灰色」ですので殆ど見えません。 placeholder よしてみる文字色は良いのですが、検索するために入力した文字も薄く見えにくいため、適宜配色を変えてください。
検索フォームの枠線	初期値では文字色が「薄い灰色」ですので殆ど見えません。サイトの背景と区別できるよう、適宜配色を変えてください。
検索フォーム枠線の太さ	枠線の太さです。初期値でＯＫです。
検索フォームの丸み	検索フォームの角を丸くする場合は数値をしています。
検索アイコンの色	検索アイコンを配色します。適宜配色を変えてください。
検索アイコンの背景色	検索アイコンの背景をを配色します。適宜配色を変えてください。
左右の余白	余白です。初期値でＯＫです。
上下の余白	余白です。初期値でＯＫです。

AFFINGER テーマの場合、記事内に [検索] と記載すると、自動的に検索フォームに置き換えて表示します。

実際に配置した検索フォームが（↓）こちらです。

ちゃんと動きますのでキーワード入れて検索することが可能です。こちらの検索フォームの配色も、上述の設定を適用します。

便利な機能ですが、けっこう間違って、”カギカッコ＋「検索」＋カギカッコ”　と書いてしまい記事内に検索フォームを表示してしまいます。

ポイント

記事内に [検索] と（置き換えずに）表示したい場合は、"[[" や、"]]"のように "[" と "]" を２回重ねてください。

検索フォームのサイドバーへの設置と配色設定の方法です。

検索フォームは、自分で過去に書いた記事を探すときにめっちゃ便利です。

アフィリエイトを戦うなら「AFFINGER」

「AFFINGER TAG MANAGER プラグイン」では、コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」！

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。

: AFFINGER 便利すぎる！コードを一括管理（STINGER タグ管理プラグイン）のすごさと使い方

WordPress で同じ広告を複数のページに貼っていて、広告が終了になり一気にすべて変えたいと思った時ありませんか？AFFINGER6のプラグイン「STINGER タグ管理プラグイン２」を使うことで、共通する広告やコードを一括してまとめて管理できます。詳しく紹介します。

続きを見る