カテゴリー:Search & Filterの記事一覧

RICK式アフィリエイト実践記

ポイントサイト・アンケートサイト・趣味を起点としたアフィリエイトの実践記です。

カテゴリー:Search & Filter
「Search & Filter」のデザインを変更してみた

search-filter

記事の概要

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

WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置する方法
記事の概要この記事ではWordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できる「DesignsAndCode」様の「Search&Filter」を紹介します。「Search&Filter」とは?WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できるプラグインです。「Search&Filter」の導入方法手順1WordPressの管理画面にログインします。手順2管理画面の左メニューの”プラグイン”をクリックします。手順3”プラグイン”の中の”新

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

この記事では「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を使用してみてください。

WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置する方法

search-filter

記事の概要

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

「Search & Filter」とは?

WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できるプラグインです。

「Search & Filter」の導入方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”プラグイン”をクリックします。
wp_plugin-001

手順3

”プラグイン”の中の”新規追加”をクリックします。
wp_plugin-002

手順4

画面右上の検索欄に”Search & Filter”と入力します。
search-filter_001

手順5

下記画像のプラグインを探して”インストール”をクリックします。
search-filter_002

手順6

”インストール”のボタンが”インストール中”を経て”有効化”ボタンに変わるので、”有効化”ボタンをクリックしたらインストールは完了です。

「Search & Filter」による検索の設置方法

手順1

設置したい場所にショートコードを設置します。ここでは検索キーワード,サークル(カテゴリ),ジャンル(カスタム分類)による検索を設置します。
				
  • 検索キーワード

  • サークル

手順2

設置した結果以下のように並びます。
search-filter_003

まとめ

この記事ではWordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できる「Search & Filter」を紹介しました。

このプラグインを導入することでユーザーの検索による幅が広がると思います。

ユーザビリティを重視する方はぜひ導入してみてください。

追記

導入したところデザインに気に入らない部分があったのでCSSをカスタマイズしました。詳細は下記記事を参照してください。

「Search & Filter」のデザインを変更してみた
記事の概要以前キーワード・カテゴリ・カスタム分類で検索できる「Search&Filter」を紹介しました。詳細は下記記事を御覧ください。しかし、デフォルトでのデザインはラベルと各種ボックスが離れていたり、中途半端に横並びになったりと気に入らない点がありました。この記事では「Search&Filter」のCSSをいじった結果、納得のいくCSSができたため、そのCSSを紹介します。「Search&Filter」のCSSを編集する方法現在使用しているテーマの子テーマの「Style.css」を編集するな

search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss