【VK Filter Search Pro】検索フォームをCSSでオシャレにアレンジしよう！

この記事は「Vektor WordPress Solutions Advent Calendar 2022」の12月24日分の記事になります。

前回の川井さんの「Lightningテーマのコピーライト表記の消し方で制作会社のスキルがわかる？」の記事はご覧になりましたか？無料テーマのフッターにはコピーライトが表示されているものが多いですよね。

さて、本記事ではVK Filter Search Proプラグインの紹介とCSSを使ったアレンジ方法を紹介していきます。

あわせて読みたい

【レビュー】デメリットを含めたVK Filter Search Proを利用した感想 有料版を購入した人の感想をききたい…ベクトル社製品以外のテーマでも使えるの？無料版と有料版ってどう違うの？ そんな疑問にお答えします。 絞り込み検索プラグイン…

【基本情報】VK Filter Search Proって何？

初心者

VK Filter Search Proって何？

かんた

まずは、VK Filter Search Proを紹介します。

絞り込み検索フォームを作成するプラグインです

不動産サイトで、「エリア」と「家賃」など複数条件で検索できるフォームを見かけたことはありませんか？

今回紹介するVK Filter Search Proは、WordPressサイト上に絞り込み検索フォームを作成できるプラグインです。

VK Filter Search Proの基本情報

WordPressには無料のプラグインがたくさん公開されていますが、VK Filter Search Proは有料のプラグインです。

3万円以上するので、購入するには勇気がいるかもしれません。

「複雑な検索フォームを直感的に作成できる」「アップデートで神機能が追加される」「複数サイトで利用できる」などなど、ユーザーとしてお気に入りポイントがあり価格以上の価値を感じます。

仕事がら多数のプラグインを利用した経験がありますが、VK Filter Search Proは満足度が高く購入して良かったと心から思えるプロダクトです。

公式 VK Filter Search Proをダウンロード

どんなサイトが作れるの？

Lightningを有効化したサイト上でVK Filter Search Proを使ったサンプルサイトを作ってみました。

サンプルサイト

絞り込み検索フォームをオシャレにカスタマイズしよう！

お待たせしまし。ようやく本編です。

VK Filter Search Proの検索フォームをオシャレにカスタマイズする方法を紹介します！

Before

After

かんた

不動産サイトを例に、カスタマイズ用のCSSコードを紹介します。

検索フォームのアレンジ

サンプルサイトの構成についてです。

テーマ＆プラグイン

かんた

固定ページ機能で作成したページを、トップページに指定した構成です。

【検索フォーム】背景画像を設定する

検索フォームの背景に画像を設置する方法についてです。

ざっくりした作業の流れ

かんた

詳しく解説していきます。

STEP

カバーブロックを挿入する

ブロックエディター上に「カバーブロック」を挿入します↓

カバーブロックのショートカットキーは/coverです。

STEP

背景画像を選択

「アップロード」をクリックし、画像をアップロードします↓

STEP

横幅を広げる

カバーブロックを選択し、

ツールバーの「配置オプション」をクリックします↓

「全幅」を選択します↓

STEP

【任意】オーバーレイの設定

オーバーレイはカバーブロックのオプションです。背景画像に色を重ねるフィルター効果があります。

オーバーレイの色と透明度、高さなどを調整できます。

かんた

自由に調整しましょう。

STEP

VK Filter Search Proでフォームを作成

カバーブロックの上に、VK Filter Search Proブロックを配置します↓

自由に検索フォームを作成してください。

かんた

おつかれさまでした。
背景に画像を設定する作業はこれで終了です。

【検索フォーム】背景色を設定する

検索フォームと背景画像の間に、背景色を設定するカスタマイズです。サンプルサイトでは透明な白い背景色を設定しています。

ちなみに次の画像は、背景色が未設定のサンプルです↓

上記サンプルの背景画像はブラー効果でボケています。こういった画像であれば背景色は必須ではありません

背景にインパクトのある画像を設置しているケースでは、背景画像とフォームの間に背景色を設定するとスッキリ見やすく仕上がります。

次の2パターンで背景色を設定できます。

背景色を指定する方法

VK Filter Search Proブロックをグループ化し、ブロックオプションから背景色を指定する方法が簡単な方法なんですが、背景を透明にしたい場合には、CSSコードでのカスタマイズをおススメします。

次のCSSコードは、背景色を白にするサンプルコードです。

.wp-block-vk-filter-search-pro-filter-search-pro{
 background:white;
}

コード内のwhiteの部分が色です。

かんた

黒であればblack、青であればblueなどアレンジして使ってください。

【検索フォーム】背景色を透明にする

検索フォームの背景を薄っすら透明にする方法についてです。

Appleのグラスモーフィズムなデザインが好きな人におススメなアレンジテクニック。

次のCSSコードで、ソレっぽいデザインに早変わりします↓

.wp-block-vk-filter-search-pro-filter-search-pro{
 background:rgba(255,255,255,60%);
}

rgbaで背景色の色を「白」に指定。透明度は60%という設定です。透け感を強くしたい場合は、透明度の数値を10%など小さい値に変更してください。

背景を白ベースではなく、黒にしたいという場合は次のサンプルコードを使ってください。

.wp-block-vk-filter-search-pro-filter-search-pro{
 background:rgba(0,0,0,60%);
}

【検索フォーム】背景に余白を設定する

検索フォームに背景色を指定した場合の追加カスタマイズです。

次の画像は、背景の余白が未設定のサンプルです↓

左右上下に余白がないと、ちょっとキツキツですよね？

余白は次のCSSコードで調整できます。

.wp-block-vk-filter-search-pro-filter-search-pro{
 padding:60px 30px;
}

サンプルコードは上下に60px、左右に30pxの余白を指定しています。デザインに合わせて、自由に数値を変更してください。

ラベルのアレンジ

選択オプションのラベルについてです。アイコンの設置方法、フォントカラーの変更方法などを解説します。

【ラベル】アイコンを設置する

ラベルにアイコンを設定する方法です。

アイコンはFont Awesomeから選んだものを利用できます。

アイコンを設定したいブロックを選択し、

右側ブロックオプションの「このブロックのラベル」を選択します↓

Font Awesomeのコードとラベル名を次の形式で記述します。

<i class="fas fa-map-marker-alt"></i> エリア

Font Awesomeのサイトでコピーするのは、次の場所に表示されているコードです。

【ラベル】フォントカラーを変更する

ラベルのフォントカラーを変更する方法についてです。

フォントカラーはCSSで調整可能です。

.vkfs__label-name{
 color: #045270;
}

color:色という形式です。

ラベルを赤(red)に変更するには、次のように記述します↓

.vkfs__label-name{
 color: red;
}

【ラベル】フォントサイズを変更する

ラベルのフォントサイズ、つまり文字の大きさを変更する方法についてです。

フォントサイズは次のCSSで調整できます。

.vkfs__label-name{
 font-size: 1.1rem;
}

font-size: 大きさ 単位; という形式です。

【ラベル】中央揃えにする

ラベルの配置を中央に変更する方法についてです。

ラベルはデフォルトで左揃えです。ラベルを中央寄せするには次のCSSを使いましょう。

.vkfs__label-name{
 text-align:center;
}

【ラベル】ラベルの下に余白を設定する

ラベルと選択オプション間のスペース調整方法についてです（対象は、下記画像の赤いエリア）↓。

余白はCSSで調整できます。

.vkfs__label-name{
 margin-bottom:18px;
}

余白をさらに広げたい場合は、サンプルコードの18の部分を大きな数値に変更してください。

【ラベル】サブキャッチを付ける

ラベルの下に、サブキャッチを付けるカスタマイズ方法です。

サブキャッチを設置したいブロックを選択し、

「このブロックのラベル」を選択します↓

サンプルサイトのように「エリア」をラベルと表示して、その下に「Area」と表示させる場合は次のように記述します。

<i class="fas fa-map-marker-alt"></i>エリア<span>Area</span>

サブキャッチの改行用に、次のCSSコードを追加します。

.vkfs__label-name span{
 display:block;
}

【ラベル】サブキャッチのフォントサイズを変更する

サブキャッチを追加した場合のカスタマイズです。

サブキャッチのフォントサイズは次のCSSで調整できます。

.vkfs__label-name span{
 font-size:0.7rem;
}

かんた

メリハリを付けるなら、ラベルよりも小さめに設定しましょう。

【ラベル】サブキャッチのフォントカラーを変更する

サブキャッチの色を指定する方法についてです。

CSSで調整可能です。

.vkfs__label-name span{
 color:#87b4c1;
}

サブキャッチの色に迷ったら、透明度で調整するというアプローチもあります。

透明度を設定するCSSコード↓

.vkfs__label-name span{
 opacity:0.6;
}

プルダウンのアレンジ

【プルダウン】高さを変更する

プルダウンの高さ（上下の幅）を調整する方法についてです。

高さの変更はCSSで調整できます。

.vkfs select{
height:50px;	
}

チェックボックスのアレンジ

選択オプションを一覧で表示するチェックボックスのアレンジ方法についてです。

【チェックボックス】背景色を消す

チェックボックスの背景にはborder-radiusの影響で四隅にスペースがあります。

背景色が白であれば同化しますが、「背景色に白以外を設定している」「背景画像を配置している」ケースであれば、CSSでチェックボックスの背景色を消しましょう。

チェックボックスの背景色を消すコード↓

.vkfs input[type=checkbox]{
	background:none;
}

【チェックボックス】チェックの色を変更する

チェックを入れた時に表示される「レ点」についてです。

サイトの配色に合わせて、レ点の色を変えるには次のCSSを使います。

.vkfs input[type=checkbox]::after {
border-right: 3px solid red;
border-bottom: 3px solid red;	
}

redの部分を変更したい色で置き換えてください。

キーワードブロックのアレンジ

フリーワードによる検索をサポートする、キーワードブロックのカスタマイズ方法についてです。

【キーワードブロック】高さの調整

キーワードブロックの高さ（上下の幅）を調整する方法です。

キーワードブロックの高さは次のCSSで調整できます。

.vkfs input[type=text]{
height:50px;	
}

サンプルコードの「50px」の部分を、好みに変更してください。

キーワードブロックとプルダウンを同列に並べる場合は、高さを揃えると見栄えが良くなります。次のコードは一括で高さを指定する場合用です。

.vkfs select, .vkfs input[type=text]{
height:50px;	
}

ラジオボタンのアレンジ

選択オプションを一覧表示するラジオボタンのカスタマイズについてです。

※不動産サンプルサイトではラジオボタンを使っていません。

【ラジオボタン】背景色を消す

チェックボックス同様に、ラジオボタンには白の背景色が指定されています。

背景に画像を設定しているデザインでは、ラジオボタンの背景色をCSSで消しましょう。

.vkfs input[type=radio] {
 background:none;
}

【ラジオボタン】色を変更する

選択したときのチェックマークについてです。

サイトの配色に合わせてチェックマークの色を変更したい場合は、次のように色を指定します。

.vkfs input[type=radio]::after {
background-color: red;
}

サンプルコード内の「red」の部分を自由に変更してください。

検索ボタンのアレンジ

「検索する」ボタンのアレンジ方法についてです。

【検索ボタン】アイコンを設定する

「検索する」の前後に、アイコンを設定する方法についてです。

VK Filter Search Proブロックを選択し、

ブロックオプションの「検索ボタン」を選択します↓

入力フォームに次のように記述します。

<i class="fas fa-search"></i> 検索する

アイコンはFont Awesomeから好きなものを選べます。

アイコンをテキストの後ろに配置したい場合は、次のように記述します。

検索する <i class="fas fa-search"></i> 

【検索ボタン】背景色を変更する

検索ボタンの背景色についてです。

次のCSSで背景色を調整できます。

.vkfs .btn[type=submit]{
 background:red;
}

「red」の部分を指定したい色に置き換えてください。

【検索ボタン】テキストカラーを変更する

検索ボタンのテキストカラーについてです。

次のCSSで変更できます。

.vkfs .btn[type=submit]{
 color:black
}

「black」を置き換えたい色に変更してください。

【検索ボタン】罫線の色を変更する

罫線、つまりボタンの枠線のことです。

次のCSSで罫線の色を変更できます。

.vkfs .btn[type=submit]{
 border-color:red;
}

【検索ボタン】ボタン内側の余白を変更する

テキストと罫線までの距離を調整する方法です。

次のCSSで余白を調整できます。

.vkfs .btn[type=submit]{
 padding:15px 0;	
}

【検索ボタン】文字の間隔を変更する

「送信する」の文字の間隔を調整するアレンジです。

CSSのletter-spacingで、文字の間隔をアレンジできます。

.vkfs .btn[type=submit]{
 letter-spacing:1px;
}

【検索ボタン】横幅を変更する

検索するボタンの横幅を調整する方法についてです。

ボタンの横幅はCSSで調整できます。

.vkfs .btn[type=submit]{
 width:300px;
}

検索ボタンの横幅は、デフォルトで横いっぱいに広がります。

サンプルサイトではPCなど画面が広い端末の場合には小さめに表示するようカスタマイズしています。

@media (min-width: 700px){
　.vkfs .btn[type=submit] {
　max-width:70%;
　}
}

【検索ボタン】オンマウス時の背景色を変更する

オンマウスとは、カーソルが上に重なっている状態のことです。

検索ボタンがオンマウス時の背景色はCSSで調整できます。

.vkfs .btn[type=submit]:hover{
 background:white;
}

【検索ボタン】オンマウス時のフォントカラーを変更する

検索ボタンがオンマウス時のフォントカラーは、CSSで調整できます。

.vkfs .btn[type=submit]:hover{
 color:red;
}

【検索ボタン】オンマウス時の罫線の色を変更する

オンマウス時に、罫線の色を変更する場合はCSSで調整できます。

.vkfs .btn[type=submit]:hover{
 border-color:red;
}

【検索ボタン】オンマウス時にフワッと下に動かす

「オンマウス時にちょっとした動きを加えたい！」そんな場合に使えるテクニックです。

サンプルサイトでは「下に少し動くアニメーション効果」をCSSで指定しています。

.vkfs .btn[type=submit]{
 transition:0.5s;
}

.vkfs .btn[type=submit]:hover{
 transform: translateY(4px);	
 transition:0.5s;
}

サンプルコードのtransform: translateY(4px)がポイントです。数値を大きくすると下に移動する距離が増加します。

アニメーションの向きを「下」ではなく、「上」に移動したい場合は4pxを-4pxに変更してください。マイナスを付けるだけです。

FAQ

VK Filter Search ProについてFAQ形式で気になるポイントを紹介します！

さいごに

VK Filter Search Proの検索フォームを、CSSでオシャレにカスタマイズする方法を紹介しました。

かんた

サイトデザインの雰囲気に合わせてカスタマイズしましょう！

Vektor WordPress Solutions Advent Calendar 2022最終日の12月25日は、VK Filter Search Pro開発会社の株式会社ベクトル石川さんが「ありがとう的な何か」について書いてくれるそうです。

公式 VK Filter Search Proをダウンロード

あわせて読みたい

【解決済み】VK Filter Search Proの検索結果ページはどんなデザイン？カスタマイズ方法ってあるの？ VK Filter Search Proの検索結果ページって、どんなデザインなの？自由にカスタマイズできるの？検索結果ページのサンプルを見てみたい。 そんな疑問に答えます。 絞り…