こんな方におすすめ
- 検索フォームのカスタマイズしたい
- AFFINGER5のデザインをカスタマイズしたい
今回は、AFFINGER5の検索フォームをカスタマイズする方法について解説します。
AFFINGER5に使い慣れてなくても簡単にできるので、ぜひ参考にしてください。
AFFINGER5の検索フォームをカスタマイズする方法
AFFINGER5の検索フォームはサイドバーなどに追加でき、調べたいワードで記事を検索できます。
![AFFINGER5の検索フォームをカスタマイズする方法](https://hakobublog.com/wp-content/uploads/2021/04/【AFFINGER5】アーカイブをカスタマイズする方法【ウィジェット】-1024x201.png)
カスタマイズすれば、上の画像のようなデザインにできます。
記事を探したいときに便利ですね。
今回検索フォームについて解説するのは以下の2つです。
- 検索フォームのウィジェットを追加する方法
- 検索フォームをカスタマイズする方法
それでは順番に解説します。
検索フォームのウィジェットを追加する方法
まずは検索フォームのウィジェットを追加する方法を紹介します。
step
1ウィジェットのページを開く
まず、管理画面を開いてください。
そして、『外観➡︎ウィジェット』の順番でクリックしましょう。
![アーカイブをウィジェットに追加する方法](https://hakobublog.com/wp-content/uploads/2021/03/ウィジェット-‹-箱部ブログ-—-WordPress-edited-1.png.webp)
すると、ウィジェットを追加できる画面が表示されます。
step
2検索フォームのウィジェットを有効化する
次は、画面を下の方までスクロールすると「検索」があるので、クリックして自分の好きな場所に追加しましょう。
![検索フォームのウィジェットを有効化する](https://hakobublog.com/wp-content/uploads/2021/04/ウィジェット-‹-箱部ブログ-—-WordPress-1024x646.png)
僕の場合はサイドバーに追加したいので、「サイドバートップ」を選択しました。
ちなみに、ドロック&ドロップでウィジェットを追加することもできます。
step
3検索フォームのタイトルを設定する
「ウィジェットを追加」をクリックすると、以下のようにタイトルを設定できるようになります。
![検索フォームのタイトルを設定する](https://hakobublog.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-01-20.15.50-1024x525.png)
タイトルを入力したら、右下の「保存」をクリックしてください。
![検索フォームのタイトル](https://hakobublog.com/wp-content/uploads/2021/04/箱部ブログ-1024x414.png)
保存すると、このようにタイトルが表示されます。↑
これで検索フォームをウィジェットに追加するのは完了です。
検索フォームのデザインをカスタマイズする方法
続いて、検索フォームのデザインをカスタマイズする方法を解説します。
まずは、管理画面を開いてください。
次に『外観➡︎カスタマイズ➡︎オプションカラー➡︎検索フォーム』を選択すると、以下のようになると思います。
![検索フォームのデザインをカスタマイズする方法](https://hakobublog.com/wp-content/uploads/2021/04/カスタマイズ-読み込み中…-1024x548.png)
枠線や背景色、文字やアイコンなどのカスタマイズができます。
それぞれ自由にカスタマイズしましょう。
ちなみに、数値を入力するところは1〜20(px)までしか設定できないので注意してください。
まとめ
今回は、AFFINGER5の検索フォームのデザインをカスタマイズする方法について以下の2つを解説しました。
- 検索フォームのウィジェットを追加する方法
- 検索フォームをカスタマイズする方法
満足していただけたら嬉しいです。
というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。
続きの記事はこちら↓
-
【コピペOK】AFFINGER5でドロップダウンをカスタマイズする
続きを見る
-
【AFFINGER5】CSSでアーカイブのデザインをカスタマイズする
続きを見る