PR AFFINGER6

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

2021年4月1日

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

こんな方におすすめ

  • 検索フォームのカスタマイズしたい
  • AFFINGER5のデザインをカスタマイズしたい

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

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

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

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

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

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

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

  • 検索フォームのウィジェットを追加する方法
  • 検索フォームをカスタマイズする方法

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

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

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

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

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

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

アーカイブをウィジェットに追加する方法

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

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

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

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

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

ちなみに、ドロック&ドロップでウィジェットを追加することもできます。

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

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

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

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

検索フォームのタイトル

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

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

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

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

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

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

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

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

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

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

まとめ

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

  • 検索フォームのウィジェットを追加する方法
  • 検索フォームをカスタマイズする方法

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

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

続きの記事はこちら↓

おすすめ記事
【コピペOK】AFFINGER5でドロップダウンをカスタマイズする
【コピペOK】AFFINGER5でドロップダウンをカスタマイズする

続きを見る

おすすめ記事
【AFFINGER5】CSSでアーカイブのデザインをカスタマイズする
【AFFINGER5】CSSでアーカイブのデザインをカスタマイズする

続きを見る

※無料ニュースレターを発信中:僕は持病を抱えつつも、13歳でブログで月収5万円を達成しました。その状況で得た「健康×ビジネス」の知識をニュースレターで共有していきます。無料登録はこちら。いつでも解約できます。

-AFFINGER6
-