太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログの「最新記事」サイドバーを魔改造する

f:id:bulldra:20140105075706p:plain

サイドバーの最新記事にアイキャッチを重ねて表示する

 『【修正済】はてなブログの「最新記事」を画像付きにする方法。 - #ChiroruLab』について、弊ブログでも『http://bulldra.hatenablog.com/entry/2013/11/02/203551』のように設置したのですが、いくつかの点について改造することとしました。

  1. マウスオーバーすると文字をズームしつつ画像を暗くして強調
  2. 本来の「最新記事」と同様にモジュールのタイトルにアーカイブ画面をリンク
  3. モジュールのタイトルに「>>ARCHIVE」を追加
  4. はてなブックマーク数を表示

設置方法

 JavaScriptで生成しているため、最新記事モジュールではなくHTMLモジュールを利用します。HTMLのタイトルを読み取ってリンクを生成しているため、タイトルを変更する際にはプログラムも変更する必要があります。

f:id:bulldra:20140105081416p:plain

<!-- 新しい記事を表示する -->
<div id="new_entries_feed" align="center">Now Loading...</div>

<!-- SCRIPT : popular_entries_feed -->
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");

function initialize() {
  /* ブログに合わせて変更 */
  var blogURL = "http://bulldra.hatenablog.com";
  var no_image = 'http://cdn-ak.f.st-hatena.com/images/fotolife/b/bulldra/20131102/20131102193518.png';
  var NUM = 7;

  var as = document.getElementsByClassName('hatena-module-title');
  for(var idx in as) {
    var a = as[idx];
    if(a.innerHTML == '最新記事') {
       a.innerHTML = '<a href="/archive">最新記事</a>'
     }
  }

 //RSSフィードの取得
 var feed = new google.feeds.Feed(blogURL + '/rss');

 //取得するフィード数
 feed.setNumEntries(NUM);

 //実際に読む込む
 feed.load(function(result) {
 //読み込めたか判別
  if (!result.error) {
   //変数の初期化
   var useFeed = "";
   //Feedの処理
   for (var i = 0; i < result.feed.entries.length; i++) {
    //Feedを一つ抽出
    var entry = result.feed.entries[i];

    //画像がない場合を考慮
    var first_image = (entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/) != null) ? entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/) : no_image.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/);
    var title = entry.title;
    
    //リストに突っ込む
    useFeed += '<div class="htbl_new_entry"><a href="' + entry.link + '"><img class="htbl_new_entry_img" src="' + first_image[0] + '"><div class="htbl_new_entry_text"><span class="entry_title">' + title + '</span>'
//+ '<span class="entry_hatebu"><img //src="http://tools.tweetbuzz.jp/imgcount?url=' + //entry.link + '" /></span>'
+ '<span class="entry_hatebu">'
+ '<img  src="http://b.hatena.ne.jp/entry/image/' 
+ entry.link + '" /></span>'
+ '</div></a></div>';
  }

  //リストを表示させる
  var container = document.getElementById("new_entries_feed");
  container.innerHTML = '<div class="new_entries_feed">' + useFeed + '</div>';
   }
 });
}

google.setOnLoadCallback(initialize);
</script>

 またCSSに以下の記述を追加します。

.htbl_new_entries {
  height: 100%;
  width: 100%;
}
.htbl_new_entry {
  position: relative;
  background: #ddd;
  width: 100%;
  height: 120px;
  overflow: hidden;
  margin-top: 1px;
  border-radius: 1px;
}
.htbl_new_entry_img { 
    position: relative; 
    top: -9px; 
    min-height: 138px;
}

.htbl_new_entry_text {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  background: rgba(15, 15, 15, 0.55);
  width: 270px;
  height: 120px;
  margin-top: 0px;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.htbl_new_entry_text:hover {
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.95);
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
}

.htbl_new_entry_text span.entry_title {
  display: table-cell;
  vertical-align: middle;
  text-align:left; 
  height: 120px;
  font-size: 15px;
  font-weight: lighter;
}

.entry_hatebu{
  position: absolute;
  right: 5px;
  bottom: 0; 
}

.hatena-module-title a {
    position: relative;
    display: block;
    color: #fff;
    padding: 0px 0px;
}

.hatena-module-title a:hover {
    text-decoration: none;
    box-shadow: inset 0px 1px 12px #666;
    text-shadow:  0 0 3px #000;
    opacity: 0.8;
}

.hatena-module-title a:after {
    content: ">>ARCIVE";
    font-size: 60%;
    position: absolute;
    right: 10px;
    bottom: 5px;
}

サポートについて

 元にしたプログラムの著作権は id:chiroru_27 さんにあります。改造後のスクリプト等については自己責任でご利用下さい。変更もご自由に。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

ポケット詳解 WebAPI辞典 (Pocket詳解)

ポケット詳解 WebAPI辞典 (Pocket詳解)