タグ絞り込み検索は、ブログ記事に付けたタグで絞り込み(AND検索)ができる機能です。

例えば、
- レシピブログの記事を食材でタグ付けして検索(例:ナス×トマト)
- ファッションブログでコーディネートでタグ付けして検索(例:カーディガン×パンツ×春物)
といったような使い方をすることができます。

設定方法

ブログ管理画面のブログパーツ設定画面から、「タグ絞り込み検索」ブログパーツを表示したい場所に追加してください。

カスタマイズ方法

PC版のブログパーツは、様々なデザインに合うよう最低限のスタイルのみになっています。デザインを変更したい場合は以下のサンプルを参考にCSSを編集してください。

/* タグ絞り込み検索 */
.plugin-search_tags li .search-tags {
  border: 1px solid #ccc;
  height: 30px;
  width: 100%;
}
.plugin-search_tags .search-tags-submit {
  text-align: right;
}
.plugin-search_tags .search-tags-submit-button {
  padding: 4px 24px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  border-radius: 5px;
}
tag

PC版の一部のデザインテンプレートでは、タグ絞り込み検索結果ページの見出しが「カテゴリ」と表示されます。デザインを適用し直すか、独自タグを使って表示をカスタマイズしてください。

検索結果ページをカスタマイズするには、デザイン>PC>カスタマイズからカテゴリアーカイブのHTMLテンプレートを編集します。

検索結果見出し部分のHTMLの例

<header class="archives-header" id="category-header">〜</header>を以下の内容に差し替えてください。

<header class="archives-header" id="category-header">
<h1>
<IfIsTagTemplate>タグ:<$TagName ESCAPE$></IfIsTagTemplate>
<IfIsSearchTagsTemplate>タグ:<$TagName ESCAPE$></IfIsSearchTagsTemplate>
<IfIsSearchTemplate>キーワード:<$SearchKeywords ESCAPE$>を含む記事</IfIsSearchTemplate>
<IfIsAuthorTemplate><$AuthorName ESCAPE$></IfIsAuthorTemplate>
<UnlessIsTagTemplate><UnlessIsSearchTagsTemplate><UnlessIsSearchTemplate><UnlessIsAuthorTemplate>
カテゴリ:<IfHasParentCategory><a href="<$ParentCategoryUrl$>"><$ParentCategoryName ESCAPE$></a> &gt; </IfHasParentCategory>
<a href="<$CategoryUrl$>"><$CategoryName ESCAPE$></a>
</UnlessIsAuthorTemplate></UnlessIsSearchTemplate></UnlessIsSearchTagsTemplate></UnlessIsTagTemplate>
</h1>
</header>

検索結果がない場合の表示

該当する検索結果がない場合にメッセージを表示したい場合は、カテゴリテンプレートに以下の例のように記述してください。

<IfIsSearchTemplate>
<UnlessSearchResults>
<div class="noresult-message"><p>該当する記事はありません</p></div>
</UnlessSearchResults>
</IfIsSearchTemplate>
<IfIsSearchTagsTemplate>
<UnlessSearchResults>
<div class="noresult-message"><p>該当する記事はありません</p></div>
</UnlessSearchResults>
</IfIsSearchTagsTemplate>

<CategorizedArticlesLoop>〜</CategorizedArticlesLoop>の内側では、UnlessSearchResultsは表示されません。CategorizedArticlesLoopの外側に記述してください。