AFFINGER5

★ 【AFFINGER5】検索フォームのサイドバー設置と配色設定!





検索フォームをサイドバーに表示して、配色を整える方法です。


検索フォームを設置する


検索フォームは 【検索フォーム用】 ウィジェットがありますので、サイドバーにウィジェットを配置します。



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

サイドバーに 【検索: サイト内検索】 ウィジェットを配置します。


検索フォームの配色設定



WordPress の管理画面から [外観] → [カスタマイズ] → [オプションカラー] → 【検索フォーム】 を選択します。

配色等を設定します。


注意書きが面白い!

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

はい!気を付けます(笑)(でもちょっと破綻させたい気もします(笑))


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

おまけ


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


実際に配置した検索フォームが(↓)これです。



なお、ちゃんと動きますのでキーワード入れて検索できます(笑)

こちらの検索フォームの配色も、上記の設定を適用します。便利なんですけど、けっこう間違って使ってしまい記事内に検索フォームを表示してしまいます(笑)


ポイント


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



まとめ


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



  • サイドバーへは 【検索: サイト内検索】 ウィジェットを配置する
  • 配色は、[オプションカラー] → 【検索フォーム】 で設定します


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








Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ