その他

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

広告:ページ内にてアフィリエイト広告を利用しています。

AFFINGER 検索フォーム設置

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

ポイント

本記事では、

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

検索フォームはサイドバーに設置すると、いつでも使えて便利ですね。

おすすめ副業

\AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください/

PR

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

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

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

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

検索フォームの配色設定

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

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

ポイント

注意書きが面白い!

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

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

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

おまけ(検索フォームをショートコードで表示する)

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

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

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

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

ポイント

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

AFFINGER もっと!お役立ちテクニック

AFFINGER のお役立ちテクニックはこちら

PR

まとめ

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

ポイント

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

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

おしゃれサイト
ノートパソコン

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

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

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR
AFFINGER TAG MANAGER
PR
AFFINGER TAG MANAGER
  • サイト全体と記事ごとのアクセス推移
  • ユーザーの導線の確認
  • 人気記事の把握
  • アクセス元の把握
  • リンクや広告の効果測定(表示回数 / クリック数)
  • クリックされた記事の把握
PR

\気になったら、とりあえず見てみよう/

詳しく見る

WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!

PR
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

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

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記