読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

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

Web制作
スポンサーリンク

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

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

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

完成図と仕様

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

PCではこんな感じ

f:id:ftmaccho:20151104185651p:plain

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

f:id:ftmaccho:20151104185806p:plain

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

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

他にも

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

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

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

コード

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

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

手順1 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 ++ //今のリンクのときは、表示せずもう1つ記事を取り出す
                }
            }
        }
    }
}
google.setOnLoadCallback(initialize);
</script>

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

手順2 HTML

次にHTMLです。下の

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

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

手順3 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);/*スマホのときは1列にする*/
}
}

これを「デザインCSS」に!

ここまででは、まだ記事下に何も表示されないと思いますので、以下の設定でご自身のブログURLを設定してください。

手順4 調整

手順1で入れた部分の6~9行目の部分が、カスタマイズ可能な部分です。

  • 6行目の「blogUrl」にはご自身のブログのURLを入れてください。
  • 7行目の「num」が、表示する関連記事の個数になります。はてなブログのFeedの関係上、30個が限界です。
  • 8行目の「maxSubString」が、関連記事についたサブテキストの最大文字数に対応します。ここは最大で120字いけるみたいです。
  • 9行目の「title」が、デフォルトで「関連記事」の文字が貼っているところに対応します。

以上でカスタマイズ終了です!

構造を簡単に

構造を簡単に説明すると、はてなブログにはブログ自体のFeedの他に、各カテゴリでFeedがあります。

記事のカテゴリの文字を使ってその各カテゴリごとのFeedのURLを作って読み込んで、その内容をGoogleのFeed APIを使ってデータを取得し、HTMLの中に押し込んで生成。といった流れです。

正直言うと自分も詳しいことは分かってませんw

まとめ

ということで、同じカテゴリの記事を新着順に載せるというものを作ってみました。使っていただく場合は、自己責任でお願いします。

この関連記事の利点はというと、デザインが変更しやすい点ですかね…。多分このままだと既存の関連記事のプラグインの下位互換となってしまうので、ランダムに記事を選んだりするのも作ってみたいと思います!

参考記事

つくるのに参考にさせていただいた記事です。

www.ajaxtower.jp

ここにGoogle Feed APIについて詳しく書かれているので勉強させていただきました!ありがとうございます。

www.yukihy.com