【簡単コピペ】はてなブログにトップへ戻るボタンを設置する方法【カスタマイズ】

スポンサードリンク
この記事は約4分で読めます。
スポンサードリンク

f:id:a720b720c720:20190518191210j:plain

 どうも。

 

読者の方がブログの中を周遊しやすいように工夫をすることは大事ですよね。グローバルナビゲーションであったり、ハンバーガーメニューであったり。

 

その中でも今回は、トップへ戻るボタンの設置方法をご紹介します。すべてピペOKです!

 

ブログだけでなく様々なウェブサイトにも取り入れられています。まだの方はぜひ設定してみてください!

 

トップへ戻るボタン完成イメージ

完成するとこんな感じ。ページトップでは表示されずに、下に少しスクロールすると出現します。

f:id:a720b720c720:20190518073641p:plain

事前準備:トップへ戻るボタンのアイコンを取得

まずは事前準備として、ボタンのアイコンを取得します。この設定をしてなければアイコンが表示されません。

 

アイコンを設定するには、Font Awesomeというサイトからコードを取得しなければなりません。コードは下にありますので、こちらも下記の場所にコピペしていただければOKです。

 

アイコンコードコピペ場所
ダッシュボード→設定→詳細設定→headに要素を追加

 

アイコンのコード

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css“>

 

f:id:a720b720c720:20190518072446p:plain

 

ここに追加してください。

f:id:a720b720c720:20190518072931p:plain

トップへ戻るボタンの設置方法【コピペ】

事前準備でアイコンのコードは取得できました。ここから以下のコードをコピペしていただければ、正常にアイコンが表示され、稼働するはずです。

 

Java Scriptのコピペコード

まずはJava Scriptを読み込みます。こいつを設定することで、「ボタンを押したときに上に戻る」という動きをしてくれます。

コピペ場所
ダッシュボード→デザイン→カスタマイズ(スパナマーク)→フッタ

 

f:id:a720b720c720:20190518073408p:plain

 

Java Scriptコード

 

上の場所にこのコードをコピペしてください。

<!– 「ページトップへ戻る」ボタン –>
<div id=”page-top-area”>
<a id=”page-top-button”><i class=”fa fa-chevron-up“></i></a>
</div>

<script>
(function($) {
$(function() {
var $w = $(window), $pageTopArea = $(‘#page-top-area’), isShow = false;
setInterval(function() {
if ($w.scrollTop() > 500) {
if (!isShow) {
isShow = true;
$pageTopArea.fadeIn();
}
} else {
if (isShow) {
isShow = false;
$pageTopArea.fadeOut();
}
}
}, 1000 / 30);
$(‘#page-top-button’).click(function(){
$(‘html, body’).animate({scrollTop:0}, ‘slow’);
});
});
})(jQuery);
</script>

CSSのコピペコード

次に、CSSでトップへ戻るボタンを配置します。このコードでは位置、サイズなどを指定しているんだな~くらいに思ってください。

 

CSSコピペ場所
ダッシュボード→デザイン→カスタマイズ(スパナマーク)→デザインCSS

 

f:id:a720b720c720:20190518073411p:plain

 

CSSコード

上の場所に下記のコードをコピペしてください。

 

/* ページトップへ戻るボタン */
#page-top-area {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
margin: 0;
padding: 0;
text-align: center;
}
#page-top-button {
color: rgba(0,0,0,0.6);
text-decoration: none;
display: block;
cursor: pointer;
font-size: 200%;
}
#page-top-button:hover {
color: rgba(0,0,0,0.95);
}

 

font-size:200%;の数字をいじってもらえればアイコンの大きさを変えていただえることができます。

僕はあまり目立たないように、小さめにしています。アイコンサイズは200%より大きくすると大きくなり、小さくすると小さくなります。そのままですね。

 

これで、トップへ戻るボタンの設置は完了です!あとは、正常に動くか確認してあげてください。

参考にした記事

「ページトップへ戻る」ボタンを導入する方法【はてなブログ カスタマイズ忘備録(7)】 – 思考は現実化する

最後に

簡単にできましたね。

 

デザインコードをこんな風にご紹介してくださっている方はたくさんいるので、色々楽しみながら試してみましょう。

コメント

タイトルとURLをコピーしました