The Wolf of Roppongi Street ~ウルフ・オブ・六本木ストリート~

駐妻には負けない!六本木通りの狼になりたい駐夫(ちゅうおっと)による金融、トライアスロン、シンガポール、グルメのブログ。

5分ではてなブログに「あわせて読みたい」を導入する方法。

PVがアップして、直帰率も下がるとのことなので、

やってみました。

アドセンスアフィリエイトで儲けたいとかは特にないんですけど、やっぱり誰かに読んでもらえると書くモチベーション上がりますからね。

 

5分でできるのですが、情弱の僕的には色々落とし穴もあったので、皆様へのメモ兼備忘録として、手順を書いておきます。

 

はてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「記事」→「記事下」へ行き、以下のコードを丸ごとコピペ。

<style>
.entry-list #new-entries-title {
background: #000;
color: #fff;
padding: 10px 10px 10px 10px;
margin: 15px 0 10px 0;
position: relative;
font-size: 14px;
font-weight: bold;
}

.entry-list .intro-article-wrapper a {
text-decoration: none;
color: #0085cd;
font-weight: bold;
font-size: 14px;
}
</style>

<div id="new-entries-title">あわせて読みたい</div>
<span id="new_entriee">記事を読込中...</span>

<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

/* この辺を自分のブログに合わせて変更 */
var blogURL = "http://exfreeter.hatenablog.com";
var blogTITLE = "exfreeterのブログ"; 
var maxNUM = 5;
var popularNUM = 2;

/* コピーライトっぽいの */
var copyRIGHT = '<p style="text-align:right; font-size:60%;"></p>';

google.load("feeds", "1");
var entries = new Array();

/* 配列にシャッフル機能を追加 */
Array.prototype.shuffle = function() {
    var i = this.length;
    while(i){
        var j = Math.floor(Math.random()*i);
        var t = this[--i];
        this[i] = this[j];
        this[j] = t;
    }
    return this;
}
  
function initialize() {  
  /* feed群の生成 */
  var feeds = new Array();
  /* ブクマ順エントリ */
  feeds.push(new google.feeds.Feed( "http://b.hatena.ne.jp/entrylist?sort=count&mode=rss&url=" +blogURL));
  /* 最新エントリ */
  feeds.push(new google.feeds.Feed( blogURL+ "/rss"));
  
  /* feed読み取り処理 */
  var c = 0;
  for(var i = 0; i < feeds.length; i++) {
    feeds[i].setNumEntries(10);
    feeds[i].load(function(result) {
        /* 読み込めないなら終了 */
        if (result.error) {
          ;
        } else if(result.feed.entries.length == 0) {
          ;
        } else {
          /* 条件に合致した場合のみ結果配列に追加 */
          entries = entries.concat(result.feed.entries);
        }
        
        /* 全部のfeedが読み終わったら処理を実施 */
        if(++c == feeds.length){
          createHtml();
        }
      });
  }  
}  
  
function createHtml() {
  /* 1件もないなら終了 */
  if (entries.length == 0) {
    return;
  }
  
  /* popularNUMで指定した分だけはてブ数上位は必ず表示 */
  var resultEntries = new Array();
  for(var x = 0; x < popularNUM; x++) {
      if(document.location.href.lastIndexOf(entries[0].link, 0) != 0){
          resultEntries.push(entries[0]);
      }
      entries.splice(0, 1);
  }
  
  /* シャッフル */
  entries = entries.shuffle();  
  
  for(var x = 0; x < entries.length && resultEntries.length < maxNUM; x++) {
      /* ブラウザで対象エントリを表示している場合はスキップ */
      if(document.location.href.lastIndexOf(entries[x].link, 0) === 0) {
        continue;
      }
      
      /* 既に結果リストに含まれていたらスキップ */
      var flg = false;
      for(var y = 0; y < resultEntries.length; y++) {
        if(resultEntries[y].link.lastIndexOf(entries[x].link, 0) === 0) {
          flg = true;
        }
      }
      if(!flg) {
          resultEntries.push(entries[x]);
      }    
  }
  
  /* 指定数のHTMLを生成 */ 
  var resultHtml = "";
  for(var x = 0; x < resultEntries.length; x++) {    
    var entry = resultEntries[x];
    var entryTitle = entry.title.replace('- '+blogTITLE , '') 
    
    /* HTML生成 */
    var html = '<div class="intro-article-wrapper" style="width: 100%; overflow:auto; margin-bottom:10px;">'
         + '<a class="intro-article-img" href="' + entry.link + '" style="float:left;" rel="nofollow">'
         + '<img src="http://capture.heartrails.com/150x130/shadow?' + entry.link 
         + '" align="left" width="150" height="130" alt="' 
         + entryTitle  + '">'
         + '<a class="intro-article-title" href="' + entry.link + '" rel="nofollow">'
         +  entryTitle 
         + '</a> <img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '">'
         + '<a href="http://tweetbuzz.jp/redirect?url=' + entry.link + '"><img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '"/></a></div>';
    resultHtml += html;
  }  
  
  /* コンテナに反映 */
  var container = document.getElementById("new_entriee");
  container.innerHTML = resultHtml + copyRIGHT;
}

google.setOnLoadCallback(initialize);

</script>

②貼り付けたコードのうち、ブログURLとブログタイトル部分だけを自分のブログ用に変更。

/* この辺を自分のブログに合わせて変更 */
var blogURL = "http://exfreeter.hatenablog.com";
var blogTITLE = "exfreeterのブログ"; 

はてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」へ行き、以下のコードを丸ごとコピペ。

注意:デザインCSSの部分には元からコードが入っている場合がありますので、その部分は消さずに、下にコードを追加しましょう。

/* あわせて読みたい */
#new-entries-title {
    color: #000;
    font-size: 160%;
    font-weight: bold;
    margin: 20px 0 10px 0;
    padding:0 0 0 15px;
    height: 39px;
    border-left: solid 14px #000;
    border-bottom: solid 1px #000;
}

.intro-article-wrapper a {
text-decoration: none;
color: #0085cd;
font-weight: bold;
font-size: 120%;
}

④「変更を保存する」ボタンをクリック。

 

以上、です。

 

「あれ、何にも変わってないけど」。そうなんです。

 

大丈夫です。記事をひとつクリックしてみましょう。

 

このツールで「あわせて読みたい」記事を出すのは、記事ページのみなのです。

 

できたー!こんな感じになります。

f:id:wolfyroppongi:20141019225807j:plain

 

MoneyReportさんの記事を参考に、exfreeterさんのコードを使用させていただきました。御本家のコードは池田仮名さんのものです。

http://moneyreport.hatenablog.com/entry/2014/01/28/124614

http://exfreeter.hatenablog.com/entry/2013/12/27/004713

http://www.ikedakana.com/entry/might_spam_read_together

広告を非表示にする