この記事は約 2 分で読めます ( 約 1199 文字 )

search-filter

記事の概要

以前キーワード・カテゴリ・カスタム分類で検索できる「Search & Filter」を紹介しました。詳細は下記記事を御覧ください。

WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置する方法
記事の概要この記事ではWordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できる「DesignsAndCode」様の「Search & Filter」を紹介します。「Search & Filter」とは?WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できるプラグイン

しかし、デフォルトでのデザインはラベルと各種ボックスが離れていたり、中途半端に横並びになったりと気に入らない点がありました。

この記事では「Search & Filter」のCSSをいじった結果、納得のいくCSSができたため、そのCSSを紹介します。

「Search & Filter」のCSSを編集する方法

現在使用しているテーマの子テーマの「Style.css」を編集するなり、カスタムCSSを搭載するプラグインをしようして追加するなりして以下のソースコードを追加してください。

/** Search & Filter 開始 **/
body
{
    display:block;
}
.searchandfilter p
{
    display:block;
  
}
.searchandfilter ul
{
    display:block;
}
.searchandfilter li
{
    list-style: none;
    display:block;
    margin-bottom: 1em;
  
}

.widget-area .searchandfilter li, .widget-area .searchandfilter p
{
    display:block;
}
.searchandfilter
{
    text-align: center;
}


.searchandfilter label
{
    display:block;
}
.searchandfilter h4
{
    margin-top:0px;   
    margin-bottom:0px;
    font-size:14px;
}

.searchandfilter ul > li > ul:not(.children)
{
    margin-left: auto;
    margin-right: auto;
}

.searchandfilter input[type="text"]
{
    width: 100%;
   height: 40px;
}
/** Search & Filter 終了 **/

まとめ

この記事では「Search & Filter」のCSSのカスタマイズ例を紹介しました。

各パーツが横並びにならないようにし、ラベルと各種ボックスの間をなくし、各種ボックスと次のラベルの間を1文字分開けるように設定しました。

私はこのデザインで納得することができました。どのデザインかというと、左サイドバーの”検索”ウィジェットのデザインです。

「Search & Filter」を使っているけどデザインが気に入らない方はこのCSSを使用してみてください。