はてなブログで同じカテゴリの記事を新着順に表示して関連記事っぽいものを作るカスタマイズ

12/06追記２：数日前に、このプログラムで使用しているGoogle Feed APIのサービスが終了してしまいました。なので表示が安定しない状況です。ただいま代替案を模索中です。お手数おかけしますm(_ _)m

はてなブログは標準で記事下に関連記事が出てこなく、何とかできないかなと考えていました。

ものすごくざっくりとしたものですが作ってみたので、ここまでのを一旦公開したいと思います。

完成図と仕様
コード
構造を簡単に
まとめ
- 参考記事

完成図と仕様

完成図は現在記事下にやっているように、こんな感じで表示されます。

PCではこんな感じ

f:id:ftmaccho:20151104185651p:plain

スマホでは、こんなふうに一列になってレスポンシブ対応をしています。

f:id:ftmaccho:20151104185806p:plain

肝心の表示されているものですが、仕組み的には現在開いている記事の１つ目のカテゴリと同じ記事を、新着順に並べ替えているという単純なものです。

なので昔の記事は表示されないという、なんかちょっと物足りない仕様です^^;。

他にも

サムネイル画像は記事の一番上に載せた画像に固定されてしまう
同じカテゴリでも30個以上前のものは表示されない
１つ目のカテゴリしかとらないので、カテゴリ分けをきっちりしていないと効果が少ない

などなどの欠点があります。

これから同じカテゴリのランダム表示版も作ろうかなと思っていますが、新着順も需要がありそうなので公開しようと思いました。

コード

実際に組んだコードはこんな感じです。コピペでははてなブログでしか使えないようになっています。

下に貼った参考記事を結構そのまま使っているので、javascriptだったりjQueryだったりごっちゃになってしまってますがご勘弁。

手順１ Javascript

最初はJavascriptです。

<!--関連記事-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1"); 
function initialize(){
    var blogUrl = "http://www.yukihy.com", //ブログのURL
        num = 10, //表示する記事の数
        maxSubString = 120, //記事の概要の最大文字数
        title = "関連記事"; //タイトルの文字
    var presentCategory = $("div.entry-categories a:first-child").text(),
        feed = new google.feeds.Feed(blogUrl + "/feed/category/" + presentCategory), //読み込むRSSフィードの設定
        presentCategoryUrl = blogUrl + "/archive/category/" + presentCategory;//今の記事のカテゴリのURL
    feed.setNumEntries(num + 1); //記事の取得(urlが同じ場合に備えて一つ多く取得する)
    feed.load(dispfeed);
    function dispfeed(result){
        var presentUrl = location.href;
        if(!result.error){
            var container = document.getElementById("related-post"); 
            container.innerHTML = '<div id="related-post-title"><span id="related-post-title-text">' + title + '</span>(<a href="' + presentCategoryUrl  + '" target = "_blank"><i class="blogicon-tag"></i>' + presentCategory + 'の記事一覧</a>)</div>'; //挿入するタイトルのHTML
            for (var i = 0; i < num; i++ ){
                var entry = result.feed.entries[i];
                var entryDate = new Date(entry.publishedDate); 
                var entryYear = entryDate.getYear();
                if (entryYear < 2000){
                    entryYear += 1900;
                }
                var entryMonth = entryDate.getMonth() + 1;
                if (entryMonth < 10) {
                    entryMonth = "0" + entryMonth;
                }
                var entryDay = entryDate.getDate();
                if (entryDay < 10) {
                    entryDay = "0" + entryDay;
                }
                var date = entryYear + "/" + entryMonth + "/" + entryDay;
                var entryImg = "";
                var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/); //画像のチェック
                entryImg += '<img ' + imgCheck[0] + '" >';
                if(entry.link != presentUrl){
                    container.innerHTML += '<div class="related-post-content"><a href="' + entry.link  + '" target = "_blank">' + entryImg + '<p>'  + date  + '</p><h3>' + entry.title + '</h3>' + '<p>' + entry.contentSnippet.substring(0,maxSubString) + '</p></a></div>' //挿入する関連記事のHTML
                }else{
                    num ++ //今のリンクのときは、表示せずもう１つ記事を取り出す
                }
            }
        }
    }
}
google.setOnLoadCallback(initialize);
</script>

貼り付ける位置は「フッター」です。

手順２　HTML

次にHTMLです。下の

<!--関連記事-->
<div id="related-post"></div>

を、関連記事を載せたい部分に入れてみてください。一般的には「記事下」でしょうか。

手順３　CSS

最後にCSSでデザインを組んでいきます。レスポンシブ対応済みのコードは以下です。

/*関連記事*/
#related-post-title{
    margin-top: 10px;
    text-align: center;
}
#related-post-title-text{
    font-size: 120%;
    font-weight: bold;
}
#related-post-title a{
    font-size: 80%;
    color: blue; /*記事一覧の文字色*/
}
.related-post-content{
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    width: calc(50% - 20px);
    border-top: 1px solid #e4e4e4;
}
.related-post-content a{
    display: block;
    width: 100%;
    height: 100%;
}
.related-post-content img{
    float: right;
    margin: 10px;
    height: 80px; /*画像の縦幅*/
    width: 80px; /*画像の横幅*/
}
.related-post-content h3{
    margin-top: 0;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 16px;
}
.related-post-content p{
    font-size: 10px;
    margin-bottom: 0;
}
@media screen and (max-width:680px){
.related-post-content{
    width: calc(100% - 20px);/*スマホのときは１列にする*/
}
}