【はてなブログアレンジ】「記事の上へ戻る」「HOMEへ戻る」ボタンの設置方法

(スポンサーリンク)

2022年1月時点で本ブログはWordPressに移管しました。
当時のカスタム記事になります。はてなブログユーザーは参考ください。

はてなブログの記事の右下にボタンを押すと「記事の上へ戻る」「HOMEへ戻る」ボタンを設置しました。
読者も、筆者も記事の確認にあると意外と便利です。
今回は、記事の上へ戻る・HOMEへ戻るボタンの設置について紹介します。

(スポンサーリンク)

目次

「記事の上へ戻る」「HOMEへ戻る」ボタンとは

 「記事の上へ戻る」「HOMEへ戻る」ボタンとは、現在この記事の右下に出ているアイコンのことです。

f:id:zero_point_5:20200627150011p:plain

この「∧」をクリックすると、記事の一番上までスクロールされます。
「家」のアイコンをクリックすると、当ブログのHOMEにジャンプします。
記事の一番下まできてしまった時に、スマホでスクロールをするのが手間になったりするので、ワンタップで一番上まで戻ることができます。

ボタンの設置方法

なんだか難しそう。と思いますが、コピペですぐに設定できます。
以下3つの手順で完了します。所要時間は1分ほどです。

1、ページトップへ戻るスクロールCSSの準備

以下がCSSになるので、あらかじめ準備してください。(コピペ可)
赤字の部分はご自身で設定するブログのホームページURLを入力してください。

<!– ページトップへ戻るすスムーズスクロール –>
<ul class=”toTop-nav”>
<li><a href=”javascript:void(0);” onclick=”smoothScroll(0);return false;”><i class=”blogicon-chevron-up”></i></a></li>
<li><a href=”設定するブログのURL“><i class=”blogicon-home”></i></a></li>
</ul>
<script>
function smoothScroll(o){var e=window.pageYOffset,l=o>e;setTimeout(function(){l&&o>=e?(e=e+(o-e)/20+1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):!l&&e>=o?(e=e-(e-o)/20-1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):window.scrollTo(0,o)},10)}
</script>

2、ホームへ戻るスクロールCSSの準備

以下がCSSになるので、あらかじめ準備してください。(コピペ可)

/* To Top */
.toTop-nav {
position: fixed;
bottom: 10px;
right: 10px;
display: -webkit-flex;
display: flex;
padding: 0;
margin: 0;
z-index: 999; }
.toTop-nav li {
list-style-type: none;
background: rgba(0, 0, 0, 0.3);
border-radius: 50px;
text-align: center; }
.toTop-nav li:first-child {
margin-right: 10px; }
.toTop-nav li a {
display: block;
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px; }
.toTop-nav li a {
color: #fff;
text-decoration: none; }
.toTop-nav li a:visited {
color: #fff; }
.toTop-nav li a:hover {
color: #fff;
text-decoration: underline; }
.toTop-nav li a:active, .toTop-nav li a:focus {
color: #fff; }
.toTop-nav li a:hover {
text-decoration: none; }

3、はてなブログでの設定

1、2の準備ができたらはてなブログ側で設定をします。
ブログの管理画面から、デザイン→カスタマイズ→フッタを開きます。
フッタの記述欄に1のCSSコードをコピペします。
デザイン→カスタマイズ→デザインCSSを開きます。
デザインCSS欄に2のCSSコードをコピペします。

以上で完了です。

最後に

この「記事の上へ戻る」「HOMEへ戻る」ボタンは読み手も便利ですが、記事の作者も記事のチェックをするときに便利です。
気合いを入れて長編の記事を書いた時など、一番上までスクロールするのが手間だったりします。
これがあれば一発でTOPまで戻れますし、HOMEにもいけます。
あって損をしないし無駄ではないツールなので、一手間加えてボタンを設置しましょう!

(参考)関連記事

(スポンサーリンク)

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

「イラスト」「アイテム紹介」「ブログ運営」「勝手に応援」を中心に発信しています。

コメント

コメント一覧 (2件)

コメントする

目次
閉じる