ページのトップへ戻るボタンを設置する
このブログにページのトップへ戻るボタンの設置しました。ナチュログのテンプレートカスタマイズ・ブログデザイン・ブログカスタマイズ。
ページが長くなるとトップへ戻るボタンがあると便利ですよね。
ナチュログでは右下に広告が入る場合があるので、ブラウザの表示画面右上を基点に下に50px、左に50pxで指定しています。
※やっぱり通常の右下起点に変えました。（2016-01-17追記）
「jQuery」という軽量なJavaScriptライブラリを使用します。
詳しく知りたい方は「jQuery」「トップへ戻るボタン」とかでグーグル検索していただければたくさん出てきますよ。
コードの詳細を詳しく説明すのは割愛させていただいて、「このブログと同じでいいや」という方に設置方法をご案内します。
ナチュログにあわせたクラス名にしてあるのでコピペでOKです。
スタイルシートとHTMLをいじります。TOP画像の差し替えの時と同様に、スタイルシートのオリジナル部分はいじらずに最後に追記します。
HTMLも後でコードを見てわかりやすい様に末尾に追記する方法をとります。
HTMLは「トップページ」だけの場合は「トップページ」ファイルに書き足し。
全てのページで表示させたい場合は「トップページ」「アーカイブ」「個別記事」の3個全てに追記します。
今回は末尾に追記といっても、HTML、CSSファイルですので間違えると表示が崩れます。必ずファイルの「バックアップ」をやってから作業してくださいね。
■スタイルシートの末尾に追記する文
/*ページのトップへ戻るボタンここから*/
.page_top {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
}
.page_top a {
display: block;
width: 50px;
height: 50px;
background-color: #333;
text-align: center;
color: #fff;
font-size: 24px;
text-decoration: none;
line-height: 50px;
}
/*ページのトップへ戻るボタンここまで*/
■HTMLの
</body>の直前に追記する文
<!-- ページのトップへ戻るボタンここから-->
<p class="page_top"><a href="#container">▲</a></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var pagetop = $('.page_top');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
<!-- ページのトップへ戻るボタンここまで-->
前回スタイルシートでは /* と */ の間はコメントと説明しましたが、HTMLでは <!-- と --> の間がコメントになります。
HTML文書では<body>～</body>の間に、実際にブラウザに表示される文書を記述しますので、今回は
</body>の直前に追記したということになります。
※今回はスクロール後、早めにボタンが表示される設定になってます。
2015/08/04
ナチュログのカスタマイズ記事1個目、ブログの看板画像（ページのタイトル画像）を差し替える方法です。今回は使っている方も多いみたいなんで「緑という空間は癒しの場所(3カラム)」というテンプレートでやってみます。まずはこのテンプレートの横幅を調べます。スタイルシートの項目から…