追記：この記事には導入が楽な最新版があります。
【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 Ver.2 | SHIROMAG
昨日、ふと思いました。
「はてなブログって、カテゴリーごとに<body>のクラス名がふられるんじゃね？」
で調べてみると、やはりクラス名がふられてました。例えば、「社会」というカテゴリーの記事には、bodyに「category-社会」というクラス名が付与されます。
<body class=”category-社会”>
こんな感じ。
おや？これなら記事のカテゴリーによって、表示が切り替えられるじゃん！
これは名案！
ということで実装してみました。以下のページに飛んでみると分ると思いますが、記事によってサイドバーの一番下（スマホだとページの一番下）のオススメ記事のラインナップが変化していると思います。[]括弧内はカテゴリー名です。
[洋楽]ダウンロードしておきたい最新おすすめ洋楽【2016年版】 [社会]いかにしてデータは人を騙すのか [カスタマイズ]はてなブログの超便利なデザインテーマ「Brooklyn」を作りました [グルメ]今年食べて不味かったカップラーメン2選はてなブログには関連記事を表示させる機能がありますが、個人的には自動生成ではなく自分で選んだ記事を表示させたかった。
他にも「Milliard」っていう関連記事を表示するブログパーツもありますが、あれはページの読み込み速度が遅くなるのであまりオススメできません。
カテゴリーごとの表示を切り替えるHTML・CSS
一応、コードも載せておきますが、HTMLやCSSの知識がないとちょっと厳しいかも？
↑これがHTML。こんな感じでおすすめしたい記事をズラーっと並べます。
これがCSS。カテゴリーごとに割り振られるクラス名によって、表示が変わるようになっています。
ここである疑問が浮かぶかもしれません。
「クラス名って日本語もOKなの！？」
はい、OKなんですよ。推奨はされてませんし、クラス名を日本語にする人なんてほとんどいませんがね。
本当はjQueryを使えばもっとCSSをスッキリさせることもできますが、これ以上jQueryを使うのはページの表示速度的に避けたかったのでやめました。
今回はカテゴリーごとにおすすめ記事を切り替えていますが、これを利用すればカテゴリーごとに広告も切り替えられますね。
今の所サイドバーに表示させていますが、後々スマホの記事上や記事下にも入れようと思います。
効果はいかに！？
まだ導入して二日目なので何とも言えないですが、ページビュー/セッションは今の所順調に上がってます。今後様子を見ていこうと思います。
※当ブログのコードを利用して不具合などあっても、責任は負いかねますのでご了承下さい。
HTML・CSSの勉強を始めたい方は、こちらの記事がおすすめです。
HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ
他にもこんな記事書いてます。
はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた | SHIROMAG
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ | SHIROMAG
最近のコメント