マーケライフ

Webマーケティング、SEO、ゲーム、結婚生活についての情報を発信していくブログ。

カテゴリ

はてなブログのカスタマイズ「任意のカテゴリのみ表示する」方法

先日、ブログのカテゴリ数に関する記事を書きました。

marke-life.hatenablog.com

その後、記事数の少ないカテゴリは削除して、夫婦でカテゴリに関するルールを作成しました。

これに伴って、サイドバーにピックアップしたカテゴリを表示するようにしました。全体では12カテゴリありますが、サイドバーの表示は3カテゴリになっています。

はてなブログの標準的な仕様だと「全カテゴリ表示される」のですが、好きな項目だけ選んで表示することもできます。

ただ、カテゴリ内の記事数を表示する方法が見つかりませんでした。(誰かやり方教えてください)

まずは仮にサイドバーを設置してみる

一番最初に行うのは、はてなブログの標準的なカテゴリを追加するということです。ここで「どういうソースを書けば良いのか」ということを把握します。

まずは「ID、デザイン、スパナマーク、モジュールの追加」でクリックしていきましょう。

f:id:ysuzuk1:20160301132409p:plain


次にサイドバーに追加するものの中から「カテゴリー」を選び、「カスタム」で並び順を決定します。

f:id:ysuzuk1:20160301132435p:plain

この時点で並ばせたい順にカスタマイズしておくと後で楽です。表示したい順に並べておき、表示させないものは下にまとめておきましょう。


並べ替えはかなり直感的で、クリックがそのまま「掴む、離す」という操作になっています。

f:id:ysuzuk1:20160301132448p:plain


表示したい順、表示しないもの、の順に並べ替えたら「適用」「変更を保存する」をクリックして終了です。

f:id:ysuzuk1:20160301132458p:plain

場所は後で見つけやすいので、一番下のままにしておきましょう。同様に「カテゴリー」という表記もそのままにしておきましょう。

ブログのトップページからソースを見つける

トップページを開いたら、右クリックメニューから「ソースの表示」をクリックしましょう。(FirefoxChrome「ページのソースを表示」です)

HTMLのソースが表示されますので、「Ctrl+F」をしてページ内検索を行いましょう。検索するのは「カテゴリー」です。

検索すると以下のような場所が見つかります。

<div class="hatena-module hatena-module-category">
  <div class="hatena-module-title">
    カテゴリー
  </div>
  <div class="hatena-module-body">
    <ul class="hatena-urllist">

f:id:ysuzuk1:20160301132530p:plain

ここから下にずらずらと、さっき並び替えたカテゴリが並んでいます。

並び替えたとき一番下になっていたカテゴリの下まで見ていくと、下の画像のような形になっているところが見つかると思います。

f:id:ysuzuk1:20160301132602p:plain

さっき見つかった下記の文字列のところから、赤線の上までをコピーして、メモ帳などにペーストしておきましょう。

<div class="hatena-module hatena-module-category">

これがカテゴリの元となります。

メモ帳でいらない項目を削除する

さっき貼り付けたメモ帳から、いらない項目を削除していきます。

注意点は削除するときの範囲で、必ず塊ごと削除するようにしましょう。下記の図のように赤で囲っている範囲が1つの塊となっています。

f:id:ysuzuk1:20160301132630p:plain

塊ごとに削除しないと、サイドバーに表示したときに変なことになると思います。

また、今のままだと記事数が変わらないので、括弧に囲まれている数字は括弧ごと削除しましょう。

以上2点の削除が終わったら、コピーしておきましょう。

(ちなみに「カテゴリー」というところは、好きな文字に変更して大丈夫です。僕の場合は「書いた人別 & 自己紹介」にしています)


モジュールの追加で完成

さっきカテゴリをサイドバーに追加したときと同じく、「ID、デザイン、スパナマーク、モジュールの追加」でクリックしていきましょう。

今度は「HTML」を選んで、下の入力欄にメモ帳の内容をコピペしましょう。

f:id:ysuzuk1:20160301132647p:plain

そうしたら「適用」「変更を保存」をクリックして、終了です。

こんな感じになりました。

f:id:ysuzuk1:20160301132758p:plain

ちょっと寂しいので、記事数が表示できるといいですね。

僕の方でも何か分かったら追記していきますが、知っている人いましたらコメントやtwitterで教えてくれると嬉しいです。

整理した後のカテゴリ

前回数えたときは20ありましたが、似たようなものをまとめたり、今後ひとまず増えなさそうなカテゴリは削除しました。

記事数が増えてから復活するものとかはあると思いますが、同一カテゴリで5記事に達しないものはひとまず作らないという方針にしました。

結果として残ったのは、以下の12カテゴリです。

  • 旦那
  • 自己紹介
  • 結婚生活
  • マーケティング
  • 情報
  • 体験レビュー
  • ゲーム
  • 読み物
  • 趣味
  • はてなブログのカスタマイズ
  • 家計簿

サイドバーは「書いた人 & 自己紹介」という形で設置したので、「旦那」「嫁」「自己紹介」のみサイドバーに表示されています。

グローバルメニューにしようと想っているのは「結婚生活」「マーケティング」「情報」「体験レビュー」「ゲーム」「読み物」「趣味」の7つです。

はてなブログのカスタマイズ」と「家計簿」は、それぞれ「マーケティング」と「結婚生活」の子カテゴリっぽく扱う形にします。


ちなみに、「ゲーム」や「読み物」も趣味なんですが、「趣味」にはそれ以外の趣味について書いていくような感じになります。たぶん数が少ないので。

以上です。

次回はすでに設置完了している、グローバルメニューについて書いていきます。