タグ絞り込み検索は、ブログ記事に付けたタグで絞り込み(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; }
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> > </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の外側に記述してください。