【はてなブログ】トップへ戻るボタンを表示する方法【コピペでOK】

f:id:yuu304810:20210317141859j:image

こんにちは祐(@yuu30810)です。

 

今回は『トップへ戻るボタンを表示する方法』について、解説していきます。

 

下記が完成イメージです⇩

 

f:id:yuu304810:20210317111324j:image

 

とくに難しい作業や、専門知識などは必要なく、コピペのみで完了します。

 

ぜひ参考にしてみてください。

 

この記事で得られる情報

・トップへ戻るボタンを表示するメリット
・トップへ戻るボタンの表示方法

 

トップへ戻るボタンを表示するメリット 

 

f:id:yuu304810:20210305065148p:plain
お姉さん
なにか表示するメリットってあるのでしょうか? 
ないよりあるほうが読者に親切だと思います。 
f:id:yuu304810:20210305065242p:plain

 

ブログを最後まで読んだあと、トップへ戻るのに、またスクロールしなければならないって、地味にメンドクサイじゃないですか。

 

記事や、コンテンツ量が多ければ多いほど大変ですよね。

 

そんな苦労をボタン一つで解決できるのであれば、設置しておいて損はないと思います。

 

ぜひ導入してみてください。

 

トップへ戻るボタンを表示するまでの手順

 

①ダッシュボードの【デザイン】を選択

 

f:id:yuu304810:20210317111548j:image

 

②【スパナマーク】→【フッタ】の順で選択し、これから紹介するコードを枠内に貼り付ける

 

f:id:yuu304810:20210317114709j:image

 

トップへ戻るボタンを表示するHTMLコード

 

<a href="#container" id="page-top"><i class="blogicon-chevron-up"></i>トップへ戻る</a>

 

上記のコードを、フッタに貼り付けます。

 

まだ、この時点では完成していません。

 

f:id:yuu304810:20210305065148p:plain
お姉さん
なにをすればいいのでしょう…? 
デザインCSSを少しイジります。
とても簡単な作業です。 
f:id:yuu304810:20210305065242p:plain

 

④ダッシュボードの【デザイン】を選択

 

f:id:yuu304810:20210317111548j:image

 

⑤【スパナマーク】→【デザインCSS】の順で選択し、これから紹介するコードを枠内に貼り付ける

 

f:id:yuu304810:20210317111646j:image

 

トップへ戻るボタンを表示するCSSコード

 

/***トップへ戻るボタン***/
#page-top {
display: block;
font-weight: bold;
padding: .7em;
text-align: center;
background: #fff; /*背景色*/
color: #666; /*文字色*/
transition: .3s;
}
/***マウスオーバー時***/
#page-top:hover {
background: #666; /*背景色*/
color: #fff; /*文字色*/
}
/***トップへ戻るボタンここまで***/

 

上記のコードを、デザインCSSに貼り付けます。

 

以上で、完成です。

 

f:id:yuu304810:20210305065148p:plain
お姉さん
固定ではなく追従するボタンを表示したいのですが…。 
それなら下記をコピペしてください。工程は先ほどと同じです。 
f:id:yuu304810:20210305065242p:plain

 

追従するトップへ戻るボタンのHTMLコード

 

デザインは下記の通り⇩

 

f:id:yuu304810:20210317111839j:image

 

<a href="#container" id="page-top"><i class="blogicon-chevron-up"></i></a>

 

上記のコードを、フッタに貼り付けてください。

 

追従するトップへ戻るボタンのCSSコード

 

/***追従するトップへ戻るボタン***/
#page-top {
position: fixed;
right: 10px;
bottom: 10px;
font-size: 1.2rem;
line-height: 1.2rem;
background: #fff;
color: #737373;
padding: 10px;
border: solid 1px;
border-radius: 50%;
box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2);
}
/***トップへ戻るボタンここまで***/

 

上記のコードを、デザインCSSに貼り付けます。

 

以上で完成です。

 

◆注意点◆ 使用しているテーマや、CSSの状況によっては上手く動作しない場合があります。

 

少しでも参考になれば嬉しいです。

トップへ戻る