【AFFINGER5】検索フォームのデザインをカスタマイズする方法

今回は、AFFINGER5の検索フォームをカスタマイズする方法について解説します。

AFFINGER5に使い慣れてなくても簡単にできるので、ぜひ参考にしてください。

AFFINGER5の検索フォームをカスタマイズする方法

AFFINGER5の検索フォームはサイドバーなどに追加でき、調べたいワードで記事を検索できます。

カスタマイズすれば、上の画像のようなデザインにできます。
記事を探したいときに便利ですね。

今回検索フォームについて解説するのは以下の2つです。

それでは順番に解説します。

検索フォームのウィジェットを追加する方法

まずは検索フォームのウィジェットを追加する方法を紹介します。

step
1ウィジェットのページを開く

まず、管理画面を開いてください。

そして、『外観➡︎ウィジェット』の順番でクリックしましょう。

すると、ウィジェットを追加できる画面が表示されます。

step
2検索フォームのウィジェットを有効化する

次は、画面を下の方までスクロールすると「検索」があるので、クリックして自分の好きな場所に追加しましょう。

僕の場合はサイドバーに追加したいので、「サイドバートップ」を選択しました。

step
3検索フォームのタイトルを設定する

「ウィジェットを追加」をクリックすると、以下のようにタイトルを設定できるようになります。

タイトルを入力したら、右下の「保存」をクリックしてください。

保存すると、このようにタイトルが表示されます。↑

これで検索フォームをウィジェットに追加するのは完了です。

検索フォームのデザインをカスタマイズする方法

続いて、検索フォームのデザインをカスタマイズする方法を解説します。

まずは、管理画面を開いてください。

次に『外観➡︎カスタマイズ➡︎オプションカラー➡︎検索フォーム』を選択すると、以下のようになると思います。

枠線や背景色、文字やアイコンなどのカスタマイズができます。

それぞれ自由にカスタマイズしましょう。

ちなみに、数値を入力するところは1〜20（px）までしか設定できないので注意してください。

まとめ

今回は、AFFINGER5の検索フォームのデザインをカスタマイズする方法について以下の2つを解説しました。

満足していただけたら嬉しいです。

というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。

続きの記事はこちら↓