Diviの検索モジュールの使い方

こんにちは、根本です。今回は、Diviの検索というモジュールの使い方をご紹介していきます。

Diviの検索モジュールとは？

Diviの検索モジュールは、検索窓を設置することができます。ただ検索窓を付けるだけではなく、検索から除外するページを設定したり、細かいデザインの設定が可能になっています。

コンテンツ設定

テキスト

まず「コンテンツ」の「テキスト」では、「入力プレースホルダー」という欄が設けてありますが、ここでは、検索窓に入力するテキストを設定します。例えば、「例. ブログ」みたいな感じです。

要素

「要素」の「フォローボタン」というのは、”検索”という検索窓の右側に表示されるボタンのことです。これを非表示にしたい場合は、「いいえ」に切り替えます。

例外

• ページを除外する：固定ページを検索から除外したい場合は、「はい」に切り替えます。
• 投稿を除外する：通常の投稿記事を検索から除外したい場合は、「はい」に切り替えます。
• カテゴリーを除外する：検索から除外したいカテゴリーがある場合は、チェックを入れていきます。

デザイン設定

フィールド

• プレースホルダー色：「コンテンツ」の「テキスト」で入力した文字の色を設定します。
• フィールド背景色：入力フィールドの背景色を設定します。
• フィールドテキストカラー：ユーザーが入力し終わったあとのテキストの色を設定します。（「フィールドフォーカステキストの色」を設定していなければ、入力している最中のテキストの色にも反映されます。）
• フィールドフォーカスの背景色：ユーザーがフィールドをクリックして、テキストを入力する際のフィールドの背景色を設定します。
• フィールドフォーカステキストの色：テキストを入力する際の色を設定します。
• フィールドフォント：フィールドのテキストのフォントを選択します。
• フィールドソフトライト：テキストの太さをドロップダウンから選択します。
• フィールド書式のコピー：テキストを斜体にしたり、アンダーラインを引いたり、打ち消し線を付けることができます。
• 文字列の揃え：テキストの位置を選択します。
• フィールド文字サイズ：文字の大きさを調節します。
• フィールド文字間隔：各テキストの間隔を調節します。
• フィールド行の高さ：フィールドの高さ（縦幅）を調節します。
• フィールド文字サイズ：プレースホルダーテキストに付けるシャドー効果を選択します。

テキスト

• 文字列の揃え：オーディオモジュールに表示される全てのテキストの整列を設定します。
• テキストの色：全てのテキストの色を設定します。（「タイトル テキスト」と「キャプション テキスト」で色を別々に設定できます。）
• 文字サイズ：タイトルとその下に表示されるキャプションテキストに追加するシャドウを選択できます。

ボタンテキスト

• ボタンと外枠色：検索ボタンの塗りつぶし色を設定します。
• ボタン フォント：テキストのフォントを変更できます。
• ボタン ソフトライト：文字の太さを選択します。
• 書式のコピー：テキストの書式（斜体にしたり、打ち消し線を引いたり）を設定します。複数の書式を選択することも可能です。
• ボタン テキストカラー：文字の色を設定します。
• ボタン 文字サイズ：文字の大きさを調節します。
• ボタン 文字間隔：ボタンテキストの各文字の隙間を調節します。
• ボタン 行の高さ：縦の幅を調節します。
• ボタン 文字サイズ：ボタンテキストにかけるシャドウを設定します。