kengo700のナレッジベース

誰かの役に立つと思う情報を発信するブログ

はてなブログ記事の画像や文字を条件で絞り込んで表示する方法

はてなブログで画像や文字などの要素を、条件によって絞り込んで表示する方法を紹介します。jQuery(JavaScriptのライブラリ)を使って実現します。

はじめに

リンク集やまとめ記事を書くときに、項目数が多くなると読みにくくなると思うので、表示するものを条件で絞り込む方法を調べてみました。

いくつか方法があるようですが、ここではjQueryを使う方法を試してみます。

下記のサンプルのようなことが実現できます。

絞り込み選択のサンプル


種類:
個数:

絞り込み選択の実現方法

ブログ内で要素の絞り込み選択を行うために、下記のコードを使用させていただきました。

はてなブログで使うには、下記の設定を行います。

  1. CSSの設定
    1. 上記ページの「CSS」タブの必須部分をコピー
    2. はてなブログの「管理画面」->「デザイン」->「カスタマイズ」->「デザインCSS」にペースト
  2. JavaScriptの設定
    1. 上記ページの「JavaScript」タブの内容をコピー
    2. はてなブログの「管理画面」->「デザイン」->「カスタマイズ」->「フッタ」にペースト
  3. 記事の作成
    1. 上記ページの「HTML」タブの内容をコピー
    2. はてなブログの記事の下記部分にペースト
      • 見たままモードの場合:「HTML編集」
      • Markdown・はてな記法の場合:本文
    3. 設定や要素を書き換える

おわりに

(特に言うことはないので非表示)