絶景@日本

素人写真で紹介する日本の絶景スポット

「トップへ戻る」の設置と目次のカスタマイズ


スポンサーリンク

デフォルトでも十分ですが、やはりテーマを変更すると
前回使えていたものが使えなくなったりと色々と変更箇所が生じてきます(>_<)

まぁ~それが面白かったりもするのですが、、、(笑)

「トップへ戻る」の設置

文章を読んでいて下に行くと出てくる「上へ戻る」ボタン
こちら(↓)のサイトを参考に適当にいじってみました

nohack-nolife.hatenablog.com

思うような形に出来ずに試行錯誤して、現在使用しているコードは以下になります

まず、
設定 > 詳細設定 > headに要素を追加
に以下のコードを追加します


続いて、
デザイン > カスタマイズ > フッタ
に以下のコードを追加します

<!--トップへ戻るボタン始まり-->
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が200を超えた場合
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut();
}
});

// ページトップクリック
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
})(jQuery);
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="blogicon-chevron-up lg"></i></a>
<!--トップへ戻るボタン終わり-->


最後に
デザイン > カスタマイズ > デザインCSS
に次のコードを追加して形を整えます

/*****トップへ戻るボタン始まり****/
/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:10px 20px;
color:#c0c0c0;
font-size:30px;
background color:rgba(0,0,0,0.4);
}
/*****トップへ戻るボタン終わり****/


赤字のカラーコードと数字で上へ戻るボタンの色と大きさを指定しています

上のコードでは四角で囲まれた状態ですが、それを丸い形にしたかったんですが、、、
そのやり方がわからなかったので青文字のコードで無理矢理消しました(笑)

まぁ、結果的にはあまり記事の邪魔にならないようになったからいいかな?

目次のカスタマイズ

目次はこちら(↓)のサイトを参考に動きのあるものにしてみました☆

mshitech.hatenablog.com

デザイン > カスタマイズ > デザインCSS
に次のコードを追加します

.table-of-contents li {
font-size:0.9em;
font-weight: bold;
color:#333;
}
.table-of-contents a{
color:#545454;
padding:8px 0;/* 列の間隔 */
display: block;
text-decoration: none;
transition-duration: 0.3s /* カーソルが戻る時間 */
}
.table-of-contents li a:hover {
padding-left: 7px; /* カーソル重ねた時に移動する距離 */
transition-duration: 0.3s /* カーソルが移動する時間 */
}


カラーの変更 目次のカラーについてはテーマのデモページで紹介されていたコードを
以下のように追加しました

/*****目次、サイドバーの配色始まり****/
.hatena-module-title,.comment-box:after,.entry-header .categories a {
background: blue !important;
}
.table-of-contents {
border:1px solid #0000cd90 !important;
border-bottom: 10px solid blue !important;
}
.table-of-contents:before {
border-bottom: 10px solid blue !important;
background: #0000cd90 !important;
}
/*****目次、サイドバーの配色終わり****/

 

なお、色を変えるコードは青文字の5ヶ所で、
赤字の数字は透明度を設定している値だそうです

カラーコードはこちら(↓)を参考下さい

www.colordic.org