【コピペOK】スクロールで縮小する注目のコンテンツ!はてなブログカスタマイズ
当ブログで行っているカスタマイズで『注目させたいコンテンツ』をトップに表示しています。下にスクロールするとトップにバーを表示したカスタマイズとなっています。
当ブログのトップページを下にスクロールしてみると分かりやすいと思います。
下スクロールで表示されるバーの「見る」ボタンをクリックするとトップの注目コンテンツに飛びます。
注目させるコンテンツには今は自作テーマ「Primeiro」となっていますが「アフィリエイト」や「人気の記事」・「出版した本」や「レポート」等の注目させたいものを表示するといいと思います。
それでは早速カスタマイズ方法を解説していこうと思います。
完成予想
カスタマイズ
ヘッダータイトル下
<div class="toponefeature"> <div class="toponeconta"> <div class="divheader__text"> <p>タイトル</p> <p class="toperdcontent"> 説明 </p> <a href="URL" itemprop="url name" class="permalink">見る</a> </div> </div> </div> /*スクロール後に表示するコンテンツ*/ <div class="topnoscroll"> <div class="flexscl"> <p>タイトル</p> <a href="" itemprop="url name" class="permalink">見る</a> </div> </div> <style> /*トップフューチャーバー*/ .divheader__text a { text-decoration: none; } .topnoscroll a { text-decoration: none; } .divheader__text a:hover,.topnoscroll a:hover { background-color: #668bff87; } .toponefeature{ background: #fcca80; } .divheader__text p { font-size: 18px; margin-bottom: 11px; color: #333; font-weight: 600; } p.toperdcontent { font-size: 15px; font-weight: 400; line-height: 1.6em; letter-spacing: -.01em; color: #6b7377; } .divheader__text a { border: 0 solid rgba(0,0,0,0); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12); background: #3880ff; transition: all .3s ease; padding: 12px 13px 10px; font-size: 14px; background-color: #668bff; font-weight: 600; border-radius: 6px; letter-spacing: 0; text-transform: none; line-height: 1.4em; } .toponefeature { display: flex; padding-top: 60px; padding-bottom: 60px; margin-top: 0px; border-bottom: 1px solid #eee; } .toponeconta { position: relative; width: 900px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .divheader__text { max-width: 50%; margin-right: 35px; margin-left: auto; } .toponeconta::before { background: url(画像URL) 0 0 no-repeat; background-size: 100%; width: 40%; height: 250px; content: ''; position: absolute; bottom: -50px; left: 35px; } @media screen and (max-width: 1000px){ .divheader__text { margin-right: 35px; margin-left: 0; max-width: 60%; } .toponeconta::before { background-size: 100%; content: ''; position: absolute; bottom: -50px; width: 212px; height: 155px; right: 0; left: auto; } } @media screen and (max-width: 580px){ .divheader__text p { font-size: 14px; font-weight: 600; } .toponefeature { display: flex; padding-top: 15px; padding-bottom: 25px; margin-top: 0px; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .toponeconta::before { background-size: 100%; content: ''; position: absolute; bottom: 0px; width: 50%; height: 155px; right: 0; left: auto; } .divheader__text { margin-right: 35px; margin-left: 0; max-width: 100%; } p.toperdcontent { font-size: 12px; font-weight: 400; line-height: 1.6em; letter-spacing: -.01em; color: #6b7377; width: 50%; } } #top-editarea { margin-bottom: 0; margin-left: 0px; } @media screen and (max-width: 991px){ #top-editarea { margin-bottom: 0; margin-left: 0; } } </style> <script> //pagetop $(function() { var topBtn = $('.topnoscroll'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 200) { //ボタンの表示方法 topBtn.fadeIn(); } else { //ボタンの非表示方法 topBtn.fadeOut(0); } }); //スクロールしてトップ topBtn.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> <style> .flexscl { display: flex; position: relative; max-width: 900px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .topnoscroll a { border: 0 solid rgba(0,0,0,0); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12); background: #fcca80; transition: all .3s ease; padding: 12px 13px 12px; font-size: 14px; background-color: #668bff; font-weight: 600; border-radius: 6px; letter-spacing: 0; text-transform: none; padding: 5px 15px; margin: 5px; } .topnoscroll p { margin: 0; padding: 10px 0 10px 25px; width: 60%; } .topnoscroll { width: 100%; background: #fcca80; position: fixed; top: 0; z-index: 2; padding: 0 15px; color: #fff; font-weight: 600; text-align: left; overflow: auto; display: none; } @media screen and (max-width: 991px){ .topnoscroll p { margin: 0; padding: 8px 0; width: 75%; font-size: 14px; } .topnoscroll a { padding: 5px 10px; margin: 3px; } } @media screen and (max-width: 320px){ .topnoscroll a { font-size: 10px; } .topnoscroll p { font-size: 10px; } } </style>
テーマ「Primeiro」の場合
ヘッダータイトル下
<div class="toponefeature"> <div class="toponeconta"> <div class="divheader__text"> <p>タイトル</p> <p class="toperdcontent"> 説明 </p> <a href="URL" itemprop="url name" class="permalink">見る</a> </div> </div> </div> /*スクロール後に表示するコンテンツ*/ <div class="topnoscroll"> <div class="flexscl"> <p>タイトル</p> <a href="" itemprop="url name" class="permalink">見る</a> </div> </div> <style> /*トップフューチャーバー*/ .divheader__text a { text-decoration: none; } .topnoscroll a { text-decoration: none; } .divheader__text a:hover,.topnoscroll a:hover { background-color: #668bff87; } .toponefeature{ background: #fcca80; } .divheader__text p { font-size: 18px; margin-bottom: 11px; color: #333; font-weight: 600; } p.toperdcontent { font-size: 15px; font-weight: 400; line-height: 1.6em; letter-spacing: -.01em; color: #6b7377; } .divheader__text a { border: 0 solid rgba(0,0,0,0); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12); background: #3880ff; transition: all .3s ease; padding: 12px 13px 10px; font-size: 14px; background-color: #668bff; font-weight: 600; border-radius: 6px; letter-spacing: 0; text-transform: none; line-height: 1.4em; } .toponefeature { display: flex; padding-top: 60px; padding-bottom: 60px; margin-top: 0px; border-bottom: 1px solid #eee; } .toponeconta { position: relative; width: 900px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .divheader__text { max-width: 50%; margin-right: 35px; margin-left: auto; } .toponeconta::before { background: url(画像URL) 0 0 no-repeat; background-size: 100%; width: 40%; height: 250px; content: ''; position: absolute; bottom: -50px; left: 35px; } @media screen and (max-width: 1000px){ .divheader__text { margin-right: 35px; margin-left: 0; max-width: 60%; } .toponeconta::before { background-size: 100%; content: ''; position: absolute; bottom: -50px; width: 212px; height: 155px; right: 0; left: auto; } } @media screen and (max-width: 580px){ .divheader__text p { font-size: 14px; font-weight: 600; } .toponefeature { display: flex; padding-top: 15px; padding-bottom: 25px; margin-top: 0px; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .toponeconta::before { background-size: 100%; content: ''; position: absolute; bottom: 0px; width: 50%; height: 155px; right: 0; left: auto; } .divheader__text { margin-right: 35px; margin-left: 0; max-width: 100%; } p.toperdcontent { font-size: 12px; font-weight: 400; line-height: 1.6em; letter-spacing: -.01em; color: #6b7377; width: 50%; } } #top-editarea { margin-bottom: 0; margin-left: 280px; } @media screen and (max-width: 991px){ #top-editarea { margin-bottom: 0; margin-left: 0; } } </style> <script> //pagetop $(function() { var topBtn = $('.topnoscroll'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 200) { //ボタンの表示方法 topBtn.fadeIn(); } else { //ボタンの非表示方法 topBtn.fadeOut(0); } }); //スクロールしてトップ topBtn.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> <style> .flexscl { display: flex; position: relative; max-width: 900px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .topnoscroll a { border: 0 solid rgba(0,0,0,0); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12); background: #fcca80; transition: all .3s ease; padding: 12px 13px 12px; font-size: 14px; background-color: #668bff; font-weight: 600; border-radius: 6px; letter-spacing: 0; text-transform: none; padding: 5px 15px; margin: 5px; } .topnoscroll p { margin: 0; padding: 10px 0 10px 25px; width: 60%; } .topnoscroll { width: 100%; background: #fcca80; position: fixed; top: 0; z-index: 2; padding: 0 15px; color: #fff; font-weight: 600; text-align: left; overflow: auto; display: none; } @media screen and (max-width: 991px){ .topnoscroll p { margin: 0; padding: 8px 0; width: 75%; font-size: 14px; } .topnoscroll a { padding: 5px 10px; margin: 3px; } } @media screen and (max-width: 320px){ .topnoscroll a { font-size: 10px; } .topnoscroll p { font-size: 10px; } } </style>
これで表示されます!
注目コンテンツの色の変更
ブログのデザインに合わせて色を変えていってくださいね!
/*全体の色*/ .toponefeature { background: #fcca80; } .divheader__text p { color: #333; } .divheader__text a { color: #fff; background: #3880ff; background-color: #668bff; } /*スクロール後の色*/ .topnoscroll { background: #fcca80; color: #fff; } .topnoscroll a { color: #fff; background: #fcca80; background-color: #668bff; }
これで「スクロールで縮小する注目のコンテンツ」を設置できると思います。
注目させたいコンテンツがあればぜひ使ってみてください!
他にもカスタマイズ記事を書いていますので是非ご覧ください。
haijpuro.hateblo.jp