Bloggerの絞り込み検索ブログパーツ「ラベルサーチ」公開!複数のラベルを使ってAND・OR・NOT検索が出来る!


 複数のラベル(タグ・カテゴリ)を使ってAND・OR・NOT検索が出来るブログパーツ。HTML・Javascript・CSSで作りました。

ラベルサーチとは?


 ラベルサーチとは、複数のラベルを指定することで、様々な条件検索が出来るブログパーツです。Blogger専用ですが、URL関連のところだけいじれば、他のブログサービスでも使えると思います。

 ブログサービスとの相性が悪かったり、ラベル・タグ・カテゴリといった概念で検索しづらいブログでも、Googleカスタム検索を利用すれば使えるかも?

 web小説紹介ブログを運営していて、「記事数多くなりすぎてスコップ記事が埋もれちゃったよ……」っていう人にオススメ。というか、データベース系全般なら何でもオススメ。

 使用上のルールは、自分が決める権利はありません。
 だけど、ブログで使用する場合は紹介記事を書いて頂けると非常に嬉しいです。

ソースコード



個別記入欄の注意点
・ブログ名、ラベル名……[]も削除してください。
・タブ、カテゴリ名……検索結果には関係ないので、好きなように設定してください。


 カスタマイズが終わったら、HTML・Javascriptウィジェットでサイドバーに貼り付けてください。

 タブ1は普通のチェックボックスの羅列、タブ2はテーブルタグを使ったチェックボックスを入れています。お好みで使い分けてください。

ダウンロード


 以下のボタンをクリックすることで、ダウンロードが始まります。

 修正情報を更新し忘れることがあるかもなので、上記のソースコードから入手するのを推奨します。



HTML版




テキスト版



更新履歴


2016/11/02 検索結果を7記事ずつ表示するように調整
2016/10/19 最後尾のチェックボックスを選択してもボタンが押せない不具合を修正
2016/10/09 公開

機能一覧・解説


 押したチェックボックスのvalueを順番に、URLに付け足すことで検索できる仕組み。

 横幅300px、ボックスの高さ250pxとコンパクトにしましたが、もしサイズを変えたい場合は「タブメニュー全体の設定」や「ボックス共通の装飾」でカスタマイズしてください。

AND・OR・NOT検索が出来る


 選択したラジオボタンによって、ラベルとラベルの間に「+」、「|」、「+-」を入れています。これによってAND・OR・NOT検索を実現しています。

タブ機能で情報量が多くても大丈夫


 タブを使うことで、たくさんのラベルを登録してもコンパクトなサイズを維持しています。
 選択してないタブは暗くすることで、どのタブを選択しているのか分かりやすくしています。
 最初にだけ出てくるタブも設定しています。ブログパーツの概要や注意点、何かしらの宣伝や告知をする時に使えます。

 タブはいくらでも作れます。あまり多くなってしまった場合はタブの大きさを変えて横に並べることもできます。

チェックしないと検索ボタンを押せない親切仕様


 Bloggerでは、何も入力していない状態で検索ボタンを押すと、エラーページへと飛ばされます。404ページを設定しているブログでは何度も404ページを出してしまうことになり、使い勝手が悪い印象を与えてしまいます。

 チェックボックスをひとつ以上選択していないと、検索ボタンを押せないようにしています。


 自分が作ったスクリプトだと、最後尾のチェックボックスを押しても検索ボタンを押せませんでした。formタグの一番最後に、見えないチェックボックス(ダミー)を設置して対策しています。ダミーが最後尾の項目となるため、その他すべてに影響が出なくなりました。

 他の対策法としては、「親カテゴリに当たるラベルを、あらかじめ指定しておく」というものもあります。小説のレビューブログで使うとしたら、formタグにあるURLを"http://[ブログ名].blogspot.jp/search/?q=label:[小説のレビュー]"とすることで、いきなり検索ボタンを押しても小説のレビュータグに飛ぶだけで済みます。

参考サイト


チェックボックスを使って条件検索 - JavaScript 解決済 | 教えて!goo
↑を基本に作りました。"http://ブログ名.blogspot.jp/search/?q="を基本に、チェックボックスのvalueから「label:ラベル名」をURLに付け足して、ボタンを押した時点で検索する仕組みです。Bloggerはラベルを検索出来る(ラベル一覧ページではない)ので、自由度の高いシステムを作れました。


[JavaScript] ラジオボタンのチェック状態を取得する
↑のスクリプトをもとに、ラジオボタンによって変数に入れる文字列を決めています。BloggerだとANDは「+」、ORは「|」、NOTは「+-」で区切っているようでした。


タブごとに内容を切り替える「タブメニュー」をホームページに作成する方法 | ふかふか交易所
↑上の記事以外にも、選択していないタブの色を変える方法も参考にしています。

JavaScriptでチェックボックスの選択状態を取得する | UX MILK
checkboxの値でbuttonの状態を切り替える - ゆとり日記
↑ふたつの記事を参考に、チェックボックスがひとつ以上選択されている時でないとボタンを押せない仕様にしました。


この記事を書いた人

運営者:クロスグリ


 小説家志望の元ライター。
 プロの小説家になるべく、日々勉強しながらサイト運営しています。
 作品の下読み依頼や、個別相談(創作カウンセリング)等も受け付けています。
 気になったらTwitterフォローお願い致します。

このサイトについて 欲しいものリスト


スポンサーリンク

複数のラベル(タグ・カテゴリ)を使ってAND・OR・NOT検索が出来るブログパーツ。HTML・Javascript・CSSで作りました。

コメントを投稿

[disqus][facebook]

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.