ブログパーツ「タグ絞り込み検索」について

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

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

設定方法

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

カスタマイズ方法

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

• 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;
}

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

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

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

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

• HTML

<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>

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

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

• HTML

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