ウチタテ!

話題にできる情報をお届け!

ブログの人気記事一覧を画像付きで「はてなブログ」に表示する方法を試してみた!


スポンサーリンク

f:id:utitate:20131116120752j:plain

いろいろな人のブログを見ていると、その人のブログの人気記事一覧がサイドバーに表示させている人がいて羨ましく思っていました。

いろいろ調べたところ、Hatenaのブログパーツを使えば人気記事一覧を表示させることは可能なようだったのですが・・・

タイトルだけの表示しかしないタイプで、寂しい感じがしてしまうデザインだったので躊躇してしまっていました。

 

しかし、世の中にはアイキャッチ画像付きで人気記事一覧を掲載している人もいましたので・・・

自分のブログでも導入する方法を試してみた結果、一番うまくいった方法をご紹介したいと思います。

 

私のブログの人気記事一覧はこんな感じ

f:id:utitate:20131116122243p:plain

右側のサイドバーに「最近よく読まれた人気記事」が表示されていますよね。

こんな感じで、背景に透過率が50%くらいのアイキャッチ画像が付いた人気記事の一覧を設置することができます。

 

はてなブログに人気記事の一覧を画像付きで表示させる方法

 実は、人気記事一覧を表示させる方法というのはインターネットで探すといくつもあったのですが・・・デザイン的に気に入るこの方法を見つけるまでが大変な作業でした。

この方法を見つけてしまえば、あとは簡単でしたので誰にでもできると思います。

今回ご紹介する方法は、はてなブックマークの総数が表示されるのもお気に入りの部分です!

 

最初に、はてなブログのサイドバーに「HTMLモジュール」を追加する

f:id:utitate:20131116123223p:plain

「デザイン➔カスタマイズ➔サイドバー➔モジュールの追加」と進んで、メニューの下の方にある「HTML」を選択します。

 

f:id:utitate:20131116123309p:plain

HTMLモジュールのタイトルの部分には「人気記事」とか「よく読まれる記事」と入力しておきましょう。

 

用意されたHTMLコードとJavaScriptを自分のブログ用に書き換える

 最初にHTMLコードから・・・

<!-- HTML : popular_entries -->
<divclass="hatena-module-title">
 <ahref="http://b.hatena.ne.jp/entrylist?sort=count&url=ブログのURL"> </a>
</div>
<!-- 人気記事を表示する -->
<divid="popular_entries_feed"align="center">Now Loading...</div>

 しかし、3行目にある【ブログのURL】という部分を自分のブログのURLに書き換えなければいけません。

 私のブログの場合は次のようになります。

<!-- HTML : popular_entries -->

<div class="hatena-module-title">

 <a href="http://b.hatena.ne.jp/entrylist?sort=count&url=http://www.utitate.net/"> </a>

</div>

<!-- 人気記事を表示する -->

<div id="popular_entries_feed" align="center">Now Loading...</div>

 

次はJavaScriptです・・・

<!-- SCRIPT : popular_entries_feed -->
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1"); 
function initialize() {
 //RSSフィードの取得
 var blogURL = "ブログのURL";
 var blogTITLE = "ブログのタイトル"; 
 var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&sort=count&url=" +blogURL);
 //取得するフィード数
 feed.setNumEntries(7);
 //実際に読む込む
 feed.load(function(result) {
 //読み込めたか判別
  if (!result.error) {
   //表示部分を選択
   var container = document.getElementById("popular_entries_feed");
   //変数の初期化
   var useFeed = "";
   //Feedの処理
   for (var i = 0; i < result.feed.entries.length; i++) {
    //Feedを一つ抽出
    var entry = result.feed.entries[i];
    //日付を抽出
    var pdate = new Date(entry.publishedDate);
    var strdate = (pdate.getMonth() + 1) + '月' + pdate.getDate() + '日';
    //最初の画像を抽出
    var first_image = entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/);
    //画像サイズを調整
    first_image[0] = first_image[0].replace(/(\.[^.]+$)/ , "_l$1"); 
    //リストに突っ込む
    useFeed += '<div class="htbl_popular_entry"><a href="' + entry.link + '"><img class="htbl_popular_entry_img" src="' + first_image[0] + '"><div class="htbl_popular_entry_text"><span class="entry_title">' + entry.title.replace('- '+blogTITLE , '') + '</span><span class="entry_hatebu"><img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '"></span><span class="entry_date">' + strdate + '</span></div></a></div>';
    }
  //リストを表示させる
  container.innerHTML = '<div class="htbl_popular_entries">' + useFeed + '</div>';
   }
 });
}
google.setOnLoadCallback(initialize);
</script>

これも、7行目の【ブログのURL】の部分を自分のURLに書き換えます。

また、8行目は自分のブログタイトルに書き換えましょう。

私のブログの場合は、7行目・8行目は次のようになります・・・

 var blogURL = "http://www.utitate.net/";

 var blogTITLE = "ウチタテ!"; 

 

書き換えたHTMLコードとJavaScriptをサイドバーのモジュールにコピペする

f:id:utitate:20131116125423p:plain

 

URLとブログタイトルを書き換えたHTMLコードとJavaScriptを、さきほど用意しておいたサイドバーのHTMLモジュールに貼り付けて変更を保存します。

 

CSSを追加する

f:id:utitate:20131116125836p:plain

 次は「カスタマイズ➔デザインCSS」を選択します。

そこに次のCSSをコピーして貼り付けて、変更を保存します。

/* ----- POPULAR_ENTRY ----- */
.htbl_popular_entries {
  height: 100%;
  width: 100%;
}
.htbl_popular_entry {
  position: relative;
  background: #ddd;
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin-top: 1px;
  border-radius: 1px;
}
.htbl_popular_entry_img { position: relative; top: -9px; min-height: 118px;}
.htbl_popular_entry_text {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  background: rgba(77, 77, 77, 0.42);
  width: 90%;
  height: 100px;
  margin-top: 0px;
  padding: 0 5%;
  color: rgba(255, 255, 255, 0.985);
  text-shadow: -1px 1px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
.htbl_popular_entry_text:hover {
  background: rgba(255, 255, 255, 0.05);
  color: transparent;
  text-shadow: none;
  padding-top: 100px;
}
.htbl_popular_entry_text span.entry_title {
  display: table-cell;
  vertical-align: middle;
  text-align: center; 
  height: 100px;
  font-size: 14px;
}
.htbl_popular_entry_text span.entry_date {
  position: absolute;
  bottom: 0;
  right: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: none;
}
.htbl_popular_entry_text span.entry_hatebu { position: absolute; left: 5px; bottom: 0px; }

これで自分のブログを確認してみましょう。
きちんと表示されていれば成功です。

ただし、設置して数分間くらいは表示されないと思います。

 

このブログのカスタマイズは、#ChiroruLob さんの「【修正済】コピペで簡単! はてなブログの人気記事を画像付きで表示させる方法。」を参考にさせていただきました。

ただし、#ChiroruLob さんのカスタマイズの場合は【Popular entries】と表示されるのですが・・・

私の場合は、モジュールのタイトルの部分を好きなようにできるようにいたしました。

 

・・・・・・・・・・・・・・・・・・・・・・・・・・

Popular entriesの表記でちょっと修正いたします。

モジュール側でタイトルを表記させるようにしていたのですが・・・

カスタマイズを参考にさせていただいた「#ChiroruLob」さんから次のように教えていただきましたので、元に戻しました。

Popular entriesについてですが、これはタイトルから人気記事一覧へのアクセスを簡単にするためのものです。 モジュール側でタイトルを指定してしまうと、リンクが作られないので一覧にアクセスしにくくなってしまいます。 

 Popular entries の部分をクリックすると、「はてなブックマーク人気記事一覧」へアクセスするようになっていたことに気が付かなかったのです。申し訳ございません。

そこで・・・

<!-- HTML : popular_entries -->
<divclass="hatena-module-title">
 <ahref="http://b.hatena.ne.jp/entrylist?sort=count&url=ブログのURL">Popular entries</a>
</div>
<!-- 人気記事を表示する -->
<divid="popular_entries_feed"align="center">Now Loading...</div>

 貼り付けるHTMLの記述の【Popular entries】の部分を・・・

「よく読まれている記事」という風に書き換えました。

 

しかし、「#ChiroruLob」さんのブログを見てみますと・・・「More entries」という表記で、さらにカッコ良くなっていました。凄いですね。

f:id:utitate:20131121103852p:plain