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

LOVE & PEACE!!!

ハッピーをお届けするライフマガジン

JavaScriptでサイドバーを固定して関連記事を表示させる

カスタマイズ

 

f:id:love-musicflavor0928:20160126003539p:plain

先日「関連記事」のサイドバーモジュールを発見しました。

www.love-wd-yuka.com

 残念ながらサイドバーは流れてしまうので、どうにか記事下に付ける事が出来ないのか?と考えていましたが、HTMLの性質上出来ない事が判明(^^;

わざわざ調査して下さったみたいで、ありがとうございますm(__)m

psn.hatenablog.jp

 

 私も諦めきれず、なんとかならないかな〜と。で昨日いい事を思いついちゃいました。サイドバーの一番下に関連記事を置いて、Javaで固定させればいんじゃないか?と。モジュールとJavaの二刀流ですwで、さっそくやり方を調べてみる事に。

実装コードはこちらのブログを参考にしました。引用させて頂きました。

totora0155.hatenablog.jp

 

実装方法は簡単2ステップ!

まずはデザインのカスタマイズでサイドバーの編集、サイドバーの一番下部へ関連記事モジュールを移動します。(※左右に2列あるWebデザインに限ります)次にこちらにある、コードをそのままコピーしてきて「フッタ」(HTML編集)へ貼り付けます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($) {
  $(function() {
    $.fn.fixedPosHateblo = function(px) {
      var $this, $win, height, isLowerThanOffset, isSeeBottom, thisWidth, toggleFixed, topOrBottom;
      px || (px = 0);
      $win = $(window);
      $this = $(this);
      height = {
        box2Inner: $this.height(),
        offset: (function() {
          var $tgt, result;
          $tgt = $this;
          result = $this.offset().top;
          while (!$tgt.offsetParent().is('html')) {
            $tgt = $tgt.offsetParent();
            result += $tgt.offset().top;
          }
          return result;
        })(),
        getSum: function() {
          return this.box2Inner + this.offset;
        }
      };
      topOrBottom = innerHeight > height.getSum() ? 'top' : 'bottom';
      isLowerThanOffset = function() {
        return ($win.scrollTop() + px) > height.offset;
      };
      isSeeBottom = function() {
        return (innerHeight + $win.scrollTop() - px) > height.getSum();
      };
      toggleFixed = function(condition) {
        if (condition) {
          return this.css('position', 'fixed');
        } else {
          return this.css('position', 'static');
        }
      };
      $this.css('width', $this.width());
      $this.css(topOrBottom, px != null ? px : 0);
      $win.scroll(function() {
        return toggleFixed.call($this, topOrBottom === 'top' ? isLowerThanOffset() : isSeeBottom());
      });
    };
    $('#box2-inner').fixedPosHateblo(100);
  });
})(jQuery);
</script>

この2つの工程で、実装完了です。

 

問題点が一つ

関連記事のモジュールには高さがあるので、最後までスクロールすると「関連記事」の上にあるモジュールが、見えなくなってしまいます。あまりいいクオリティとは言えませんが、記事下に置くみたいなのは実現出来たかな?と。(ただいま自分のブログで検証中!!)

数字を変えると調整できます

ちなみに下から4番目のかっこの数字を変えると、(100の数字が入ってます)固定された時の空間のサイズ(px)を変える事が出来ます。調整に使えます。もっと上手に調整はしてみたいです。株式会社はてな様、改善をよろしく頼みます!!(丸投げ)

 

実装する時の注意点

  1. 記事に続きを読むを実装している事(見ている記事のカテゴリーが表示される為)
  2. サイドバーの「関連記事」モジュールの上部にある程度の空間が必要
  3. サイドバーの高さよりも、記事の高さが低い場合は、関連記事まで辿りつかない

良ければ皆様も、試してみて下さいね!

あわせて読みたいがやっぱりいいかも

でもやっぱり「あわせて読みたい」のクオリティーが高いので、こちらを実装した方が早そうです(笑)(→結局はそうなるのね)

psn.hatenablog.jp

さいごに

サイドバーを固定させて、最後に関連記事を見てもらうようにする方法ですが、クオリティが低い為にあまりおすすめは出来ません(^^;(試してみたかったんで、実験という事でお許し下され~)

今回はこの方法を試しましたが、関連記事ではなくアドセンスなどの広告を置くとまた違った結果が得られるのではないか?と思います。広告が固定されているので、クリック数が増加するかもしれませんね。それでは色々と試してみて下さい(^^)♪