はてなブログで画像や文字などの要素を、条件によって絞り込んで表示する方法を紹介します。jQuery(JavaScriptのライブラリ)を使って実現します。
はじめに
リンク集やまとめ記事を書くときに、項目数が多くなると読みにくくなると思うので、表示するものを条件で絞り込む方法を調べてみました。
いくつか方法があるようですが、ここではjQueryを使う方法を試してみます。
下記のサンプルのようなことが実現できます。
絞り込み選択のサンプル
種類:
個数:
絞り込み選択の実現方法
ブログ内で要素の絞り込み選択を行うために、下記のコードを使用させていただきました。
はてなブログで使うには、下記の設定を行います。
- CSSの設定
- 上記ページの「CSS」タブの必須部分をコピー
- はてなブログの「管理画面」->「デザイン」->「カスタマイズ」->「デザインCSS」にペースト
- JavaScriptの設定
- 上記ページの「JavaScript」タブの内容をコピー
- はてなブログの「管理画面」->「デザイン」->「カスタマイズ」->「フッタ」にペースト
- 記事の作成
- 上記ページの「HTML」タブの内容をコピー
- はてなブログの記事の下記部分にペースト
- 見たままモードの場合:「HTML編集」
- Markdown・はてな記法の場合:本文
- 設定や要素を書き換える
おわりに
(特に言うことはないので非表示)