(cache) カテゴリー一覧ページを作成しました - 攻めは飛車角銀桂守りは金銀三枚

はてなブログでサイドバーにはカテゴリー一覧を簡単に出せますが、それを記事ページに出そうとすると、ひと工夫が必要なようです。

実際にやってみました。

カテゴリーページの作成方法

カテゴリーページの作成ですが、Javascriptでできるようです。

参考にさせていただいたのは以下の記事です。
m4i.hatenablog.com

このページにあるスクリプトを元にちょっと改変して作ったページが以下です。
カテゴリー一覧 - 攻めは飛車角銀桂守りは金銀三枚

このページの記事は1つ＜div＞タグがあるだけであとはCSSとJavascriptが書いてあるだけです。

まずはスタイルシート。これは各カテゴリーに付く数字をカスタマイズしたものです。

<style>
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}
 
.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}
 
.list8{
	counter-reset:li;
	margin-left:20px !important;
}
 
.list8 li{
	position:relative;
	display: block;
	padding:8px 0px 8px 40px; 
}
 
li.list8-count:after{
	counter-increment: li;
	content: counter(li);
	position: absolute;	
	left: -16px;
	top: 2px;
	background: #ccc;
	height: 30px;
	width: 30px;
	line-height: 32px;
	border: 2px solid #aaa;
	text-align: center;
	font-weight: bold;
	border-radius: 30px;
}
 
li.list8-count:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:11px; 
	left:15px; 
	height:0; 
	width:0; 
	border-top: 8px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #aaa;
}
</style>

あとはJavascriptをちょこっと。

<div class="cate"></div>
<script>
(function($) {
  var $module_body = $('.cate:last');

  $module_body.parent()
    .removeClass('hatena-module-html')
    .addClass('hatena-module-categories')
    .prepend($('<div>'));

  $.get('/categories').done(function(html) {

    $module_body.html(html.replace(/[\s\S]*<div class="entry-content">\s*|\s*<\/div>[\s\S]*/g, ''));

     $('.cate>ul').attr('class', 'defaultlist');
     $('.cate>ul').attr('class', 'list8');
     $('.list8>li').attr('class', 'list8-count');

  });
})(jQuery);
</script>