サイドバーをスクロールしても固定で表示されるようにしました。

今回も前回に引き続きプチカスタムについてになります。
対象は「はてなブログ対応」「レスポンシブ対応」です。

www.tokidokioton.com

ブログの記事が長文になると画面スクロールが増えますが、その際にサイドバーが完全にデッドスペースになってしまいますよね。それが非常に勿体なく感じるようになってきました。

そこでサイドバーにスクロールをしても固定で画面に残り続けるモジュールを作成し有効に活用することにします。

本ブログでは「はてなブログ Pro」とテーマに「Brooklyn」を使っているため、はてなブログのサイドバーモジュールに対応させます。

こちらを参考にさせていただきました。

blog.yutorigoto.com

サイドバーにモジュールを追加する

サイドバーの最下部にHTMLのモジュールを追加します。
「デザイン」→「カスタマイズ」→「サイドバー」→「モジュール追加」→「HTML」から追加しましょう。

今回は少しでも読んでいただいた方に自分を覚えてもらうためにプロフィールと、Adsense広告のインプレッション効果が高まることを期待してこの２つを固定で表示することにしました。

私の場合はこんな感じですね。
プロフィールのソースは、サイドバー最上部に表示されているオリジナルのプロフィールのソースをコピーしてきて記述しました。

<!-- Adsenseバナー表示 -->
<p style="text-align:center;" >スポンサーリンク<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- TOKIDOKIOTON.COM（サイドバー） -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-*************"
     data-ad-slot="2068194267"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>

<div class="hatena-module hatena-module-profile">
<div class="hatena-module-title">
プロフィール
</div>
<div class="hatena-module-body">

<a href="http://www.tokidokioton.com/about" class="profile-icon-link">
<img src="https://cdn1.www.st-hatena.com/users/co/coizne/profile.gif?1501650940" alt="id:coizne" class="profile-icon">
</a>
<span class="id">
<a href="http://www.tokidokioton.com/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="coizne"><span class="user-name-nickname">こーん</span> <span class="user-name-paren">(</span><span class="user-name-hatena-id">id:coizne</span><span class="user-name-paren">)</span></span></a>
      
<a href="http://blog.hatena.ne.jp/guide/pro" title="はてなブログPro"><i class="blog-sprite-pro"></i></a>

</span>

<div class="profile-description">
<p>非生産的ゲーマーがブロガーを目指して孤軍奮闘。娘ふたりのオトン。</p>
</div>    
</div>
</div>

<!--フォローボタン-->
<div class="follow-btn" style="margin-top:-50px">
<span style="font-size:80%">フォローする</span><br>
<a class="hatena" href="http://blog.hatena.ne.jp/coizne/www.tokidokioton.com/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i>         <span class="text-small">はてな</span></a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=coizne" target="_blank"><i class="blogicon-twitter lg"></i>         <span class="text-small">Twitter</span></a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.tokidokioton.com/feed" target="_blank"><i class="blogicon-rss lg"></i>         <span class="text-small">Feedly</span></a>
</div>

メインスクリプト

次にサイドバー最下部のモジュールが固定化されるように以下のソースを追加します。
追加する場所は、「デザイン」→「カスタマイズ」→「フッタ」へ以下のとおりです。

<!--jQuery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--サイドバー固定-->
<script>
$(window).load(function() {
　　var sideLast = $("#box2-inner>div:last-child");
　　var sideLastTop = sideLast.offset().top;
　　var sideLastWidth = sideLast.width();
　　var win = $(window);

　win.scroll(function(){
　　if(win.scrollTop() > sideLastTop) {
　　　sideLast.css("position",'fixed');
　　　sideLast.css("top",'20px');
　　　sideLast.css("width",sideLastWidth);
　　}else{
　　　sideLast.css("position",'relative');
　　};
　});
});
</script>

この時点でさっそくスクロールしてみましょう。
上手くいきましたでしょうか？

素晴らしく簡単ですね。

デザインテーマによって固定位置がズレる場合は

sideLast.css("top",'20px');

の値を調整しましょう。

レスポンシブ対応にする

スマホで画面固定を使うと画面表示が崩れます。
サイドバーが残り続けるのはPCでの表示に限定するように、スマホやタブレットで表示の際に非表示となるようにスタイルシートで調整します。

度々お世話になっている @media screenの記述です。
これが扱えるようになると自由自在ですね。

「デザイン」→「カスタマイズ」→「｛｝デザインCSS」から以下を追加します。

/* サイドバープロフィールスマホ対応 */
/*PCを1コラム*/
@media screen and (max-width:968px){
.profile2{
display: none;
}
}
/*スマホ*/
@media screen and (max-width:680px){
.profile2{
display: none;
}
}

さらにサイドバー追加したバナーとプロフィールへスタイルを反映させるので追加したソース全体をdivタグで囲いましょう。

<div class="profile2">

<!-- バナーとプロフィールのソース部分 -->

</div>

以上です。

プラス月5万円で暮らしを楽にする超かんたんアフィリエイト

まとめ

予定していた通り満足できるレイアウトになりました。どんどん自分色のブログになってきました。ますます愛着が湧くというものです。

はてなブログの使いやすさならではでしょう。
多くの先人の皆さんの創意工夫を参考にさせていただいています。

いつもありがとうございます。

では！