クサイダー速報

違うネタバレ専用サイトに移転しました どこかは言えない

僕のサイドバーはストーカー。 サイドバー上に「おすすめ記事」を表示し、追尾させる方法

オススメ記事

どうにかしてサイドバーをストーカーにしたい!!

サイドバーを追尾させる

 

 少し文章が長い記事を書くと、サイドバーが表示されなくなってしまいます。

何かサイドバーを埋める方法が無いかを調べたところ、以下の記事を見つけました。

サイドバー表示が終わるまで下にスクロールしたら「おすすめ記事」を追尾させる - 太陽がまぶしかったからサイドバー表示が終わるまで下にスクロールしたら「おすすめ記事」を追尾させる - 太陽がまぶしかったから

「おすすめ記事」を追尾させたい長文記事を書くとスクロールしていくうちに、サイドバーががら空きになってしまうので、このスペースを有効利用できないかと考えました。表...

このサイトの通りに設置を行ったのですが....

何かもの足りない...

ということで勝手にカスタマイズさせていただきました。

 

設置方法

1. まずはサイドバーの一番下に新たなHTMLモジュールを追加し、以下のコードをコピーします。

<div class="hatena-module-title">管理人一押しの記事<span title="管理人一押しの記事を閉じる" onclick="closeSidea(recommend_feed)" class="closeFunc">×</span></div>

<style>

.closeFunc {

  position: relative;

  left:130px;

  top:0px;

  font-weight:bold;

  font-size:200%;

}

 

.closeFunc:hover {

   box-shadow: inset 0px 1px 10px #666;

   text-shadow:  0 0 3px #000;

   opacity: 0.7;

}

</style>

<div id="recommend_feed" align="center">管理人一押しの記事を読み込んでいます...</div>

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

<script type="text/javascript">

function closeSidea(e) {

  var node = $(e.parentNode.parentNode);

  node.fadeOut();

}

 

google.load("feeds", "1"); 

function initialize() {

  var blogURL = "http://netabare4you.hatenablog.com";

  var blogTITLE = "クサイダー的日常"; 

 

  /* shuffle機能を追加 */

  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;

  }

 

 var fixpos = -1;

  var node = $(recommend_feed.parentNode.parentNode);

  node.css("top","0px");

 

  $(window).scroll(function(){

    var top = $(window).scrollTop() ;

    if(fixpos < 0 && top > node.offset().top) {

 $("#recommend_feed").slideDown();

         node.css("position","fixed");

         fixpos = top;

    }

    

    if(top < fixpos) {

 $("#recommend_feed").slideUp();

        node.css("position","relative");

        fixpos = -1;

    }

  });

 

  var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&sort=count&url=" +blogURL);

  //取得するフィード数

  feed.setNumEntries(20);

  //実際に読む込む

  feed.load(function(result) {

 //読み込めたか判別

  if (!result.error) {

    //変数の初期化

    var useFeed = "";

    //Feedの処理

    result.feed.entries.shuffle();

 

    for (var i = 0; i < result.feed.entries.length && i < 4; i++) {

     //Feedを一つ抽出

      var entry = result.feed.entries[i];

      //画像がない場合を考慮

      var no_image = 'http://cdn-ak.f.st-hatena.com/images/fotolife/b/bulldra/20131102/20131102193518.png';

      //最初の画像を抽出

      var first_image = entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/);

      //画像サイズを調整

      first_image[0] = (first_image[0] != 'http://b.hatena.ne.jp/images/append.gif')

                   ? first_image[0].replace(/(\.[^.]+$)/ , "_l$1")

                   : no_image;

      //リストに突っ込む

      useFeed += '<div class="htbl_new_entry">' 

              +  '<a href="' + entry.link + '" target="_blank">'

              +  '<img class="htbl_new_entry_img" src="' + first_image[0] + '">'

              +  '<div class="htbl_new_entry_text">'

              +  '<span class="entry_title">' + entry.title.replace('- '+blogTITLE , '') + '</span>'

              +  '<span class="entry_tweet">'

              +  '<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>';

    }

    //リストを表示させる

    recommend_feed.innerHTML = '<div class="new_entries">' + useFeed + '</div>';

     }

  });

}

google.setOnLoadCallback(initialize);

</script>

 コードの解説です。

 var blogURL = "http://netabare4you.hatenablog.com";

  var blogTITLE = "クサイダー的日常"; 

という部分を自分のはてなブログのURLに合うようにカスタマイズして下さい。

 

 

2. CSSの貼付け

以下のCSSをあなたのはてなブログに貼付けて下さい。

.htbl_new_entries {

  height: 100%;

  width: 100%;

}

 

.htbl_new_entry {

  position: relative;

  background: #ddd;

  width: 100%;

  height: 126px;

  overflow: hidden;

  margin-top: 0px;

  border-radius: 0px;

}

.htbl_new_entry_img { 

    position: relative; 

    min-height: 124px;

}

 

.htbl_new_entry_text {

  position: absolute;

  top: 0px;

  word-break: break-all;

  overflow: hidden;

  background: rgba(0, 0, 0, 0.50);

  width: 290px;

  height: 126px;

  margin-top: 0px;

  padding: 0 10px;

  color: rgba(255, 255, 255, 0.95);

  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.78);

  z-index:5;

  opacity:1;

  -webkit-transition:0.3s;

}

 

.htbl_new_entry_text:hover {

  background: rgba(0, 0, 0, 0.30);

  padding-left: 50px;

  -webkit-transition:0.3s;

  opacity:0;

}

 

.htbl_new_entry_text span.entry_title {

  display: table-cell;

  vertical-align: middle;

  text-align:left; 

  height: 126px;

  font-size: 19px;

  line-height: 1.2;

  z-index: 5;

  -webkit-transition:0.3s;

}

 

.hatena-module {

background: #fff;

}

 

.htbl_new_entry_text span.entry_tweet {

 position: absolute;

 left: 5px;

 bottom: 0px;

 filter: alpha(opacity=90);

  -moz-opacity: 0.9;

  opacity: 0.9;

} 

.entry_hatebu{

  position: absolute;

  right: 15px;

  bottom: 0; 

}

 赤字の部分は、サイドバーのバックグラウンドの色を変更してしまうので、不要な方は削除して下さい。

 以上設置は終了です。

主にカスタマイズした所

はてなブックマークの表示の他に、ツイート数も付けてみた

・閉じるボタンをつけた

・その他諸々

まだまだjavascriptは初心者ですが、

設置等で、何か質問等あればコメントを下さい。

 

効果絶大!!

直帰率が15%下がっただと!?

 

これは本当です。

本当に約15%の人がクリックしてくれています。

 

おすすめ記事表示で、あなたのブログのアクセスアップをしよう!!

 

シェアはこちらからどうぞ