LOGzeudon

名古屋で働いているWebデザイナーのブログです

ブログのカテゴリ仕分けと、カテゴリ表示のカスタマイズをしました

f:id:rokuzeudon:20150923175433j:plain

当ブログでは書きたいコトをつらつらと書いておりますが、気づけば「カテゴリー」が増えてまいりました。
今までどんなことを書いてきたのか。そして、これからどんなことを書いていくつもりなのか、再考しながらカテゴリの仕分け(整理)をしました。
ついでに、「はてなブログPro」でできる範囲で表示のカスタマイズをしたので、時系列でメモしておきます。

1.カテゴリの整理

整理方法

まず、エクセルシートに現状のカテゴリー一覧を書き出して、要らないものがないか検討しました。要らないカテゴリはあまりなかったので、整理のために大カテゴリーを新しく作ることに決めました。

整理結果

大きく以下の7つに分けました。

  1. イベント参加レポート…Webの勉強会や美術の展覧会に行った感想
  2. Web制作…Webやデザイン制作、ブログカスタマイズに関する小ネタ
  3. やってみた…旅行・読書・映画鑑賞や結婚式の準備などの体験紹介
  4. 買ったモノ…買ったモノの自慢、紹介
  5. Mac備忘録
  6. ポンタ(Ponta)
  7. お知らせ

Webデザイナーとして、「Web制作」「イベント参加レポート」は積極的に記事にしてアウトプットしていきたいと、整理して改めて感じました。

「やってみた」「買ったモノ」では、体験したコトやいいと思ったモノを誰かに紹介する文章を書くことで、文章力を鍛えたいと思っています。
外注しない限り、ECサイトを運営する立場ならこのような文章を書く必要があるので、お客さん(クライアント)と大変さの共感やコツの共有にも繋がるかと。

Mac備忘録」は、エントリー「iTunes (Mac) でCDのデータをパソコンに取り込み、CDを複製する方法 」のためのカテゴリです。
当ブログ全体のアクセスの半分程が、実はこの記事への検索流入です。キーワードは「mac cd コピー」「itunes CD コピー」とか。うまいこと上位表示されています。
本当はもっとiTunesMacの使い方、MacでのDVDの焼き方とか書いて関連記事を増やすと良いんだろうなあと思いますが、あんまり興味がないので手が進みません。

…以上、こんな感じになりました。このブログが何のブログなのか整理されてきた感じがします。
ただ、整理する前よりもカテゴリ数が増えてしまいました…。

f:id:rokuzeudon:20150923162304j:plainf:id:rokuzeudon:20150923162520j:plain

2.カテゴリ表示の変更

表示が見辛いとせっかく整理した意味を感じられないので、良い方法はないか検索。はてなブログでも可能なカスタマイズとして、以下の方法を採用しました。

階層表示の実装

こちらを参考にさせていただきました。

github.com

指定したテキストを含む複数のカテゴリーを、一つのグループにまとめてくれるJSです。
書き換えて実装したところ、こんな感じになりました。

f:id:rokuzeudon:20150923163107j:plainf:id:rokuzeudon:20150923163110j:plain

「親カテゴリ」で分類されて少し見やすくなりました。しかし、文言が重複して並んでいて、まだ見辛いです。

不要なテキストの削除

対策として、JSで無理やりテキストを消すことにしました。こちらを参考にさせていただきました。

www.webantena.net

「.hatena-module-category」の中にある「イベント参加レポート-」「Web制作-」「やってみた-」「買ったモノ-」を消すように書き換えて、実装しました。

f:id:rokuzeudon:20150923163237j:plainf:id:rokuzeudon:20150923163242j:plain

おかげさまでだいぶスッキリしました。

3.パンくずの階層表示実装

せっかくカテゴリを階層化したので、パンくずにも反映したいと思って探したら、便利なJSがありました。こちらのサイトです。

bulldra.hatenablog.com

利用させていただいたところ、綺麗に階層化されました。大カテゴリーと下層カテゴリー両方を登録する必要があるのがミソです。
詳細ページのパンくずが、こうなりました。

f:id:rokuzeudon:20150923164723j:plainf:id:rokuzeudon:20150923164735j:plain

Google Search Consoleでも設定したら、Googleでの検索結果にも反映されました。ありがとうございます。

4.読み込みに時間のかかるブログ内要素の削除

パンくず階層化を実装すると、ブログアクセス時の読み込みの遅さが目立つようになりました。
対策として、設置していた「合わせて読みたい」機能SnapWidget(instagram表示)を無くしました。

まだ、GoogleAdsenseの表示内容によってもたつく感じがしますが、割と表示が高速化されました(体感)。

まとめ

今後の記事の方向性としては、「やってみた」「買ったモノ」については時間さえあれば好きなだけ書けますので、「イベント参加レポート」「Web制作」の方で如何に学びアウトプットするのかが課題です。
そして、また書いてるうちにカテゴリが増えていくと思うので、定期的にカテゴリのチェック・改善を行いたいと思います。