きらっしゅ

気楽に主婦がつぶやくブログ

トップ > ブログ > 【はてなブログ】トップへ戻るボタンの設置《Minimalism他》

【はてなブログ】トップへ戻るボタンの設置《Minimalism他》

ブログ

【はてなブログ】Minimalismのカスタマイズ方法！トップへ戻るボタンの設置方法を紹介中！
3ステップで設置できます！

こんにちは、アキ(@iaki1121)です。

『はてなブログ』で、トップへ戻るボタンの設置方法を紹介します。

 

こんな人にオススメ

  • はてなブログを使っている　※無料版・有料版どちらでも可
  • トップへ戻るボタンを表示させたい
  • インストールしたテーマは【Minimalism】【UnderShirt】【薄グレーなテンプレ】【JOURNAL.】のいずれか

 

トップへ戻るボタンとは？

【はてなブログ】トップへ戻るボタンの設置方法を紹介！インストールテーマ『UnderShirt』『Minimalism』で使用可
丸で囲んだ部分が『トップへ戻るボタン』

ブログ記事を読んでいった時に、右下に現れるボタンのことです。

ボタンをクリックすると、記事の上に戻ることができます。

記事が長くなった時に、オススメの機能です。

私のブログ状況

トップへ戻るボタンを設置したサイトは、このブログではありません。

私のメインブログで行いました。

※現在は、このサブブログでも「トップへ戻るボタン」を設置しました。

▼私のメインブログ▼

www.iaki1121.com

  • はてなブログProを使用中
  • インストールしたテーマは【薄グレーなテンプレ】※現在は【Minimalism】を使用中
  • このテーマには、トップへ戻るボタンがありませんでした。

参考にしたサイト

そこで、『たつブロさん』の記事を参考に、トップへ戻るボタンを設置してみました。

▼参考にさせて頂いたブログ▼

www.tatsublo.net

トップへ戻るボタンの設置方法とは？

3カ所に必要なコードを入れるだけで、トップへ戻るボタンが設置されます。

ステップ1：設定にコードを入れる

【ダッシュボード】＞【設定】＞【詳細設定】＞【検索エンジン最適化】＞【headに要素を追加】の中にコードを入れます。

入れるコードは、以下の通りです。コピーして貼り付けして下さい。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">

ステップ2：デザインにコードを入れる

【ダッシュボード】＞【デザイン】＞【カスタマイズ】＞【記事】＞【記事下】の中にコードを入れます。

入れるコードは、以下の通りです。コピーして貼り付けて下さい。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">   

<div id="page_top"><a href="#"></a></div>

ステップ3：CSSにコードを入れる

 【ダッシュボード】＞【デザイン】＞【カスタマイズ】＞【デザインCSS】の中にコードを入れます。

入れるコードは、以下の通りです。コピーして貼り付けて下さい。

#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #3f98ef;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #3f98ef;
}

トップへ戻るボタンの動作確認

最後にトップへ戻るボタンが正しく動いているか、確認をして下さい。

右下に矢印が付いているボタンが表示されたら、成功です。

ボタンをクリックし、記事の上に戻るかも確認しましょう。

トップへ戻るボタンの色を変える方法

上のコードは水色が出ますが、色を変える場合は#3f98efを他のカラーコードに変更すると、お好みの色に変えることができます。

動作確認済みの『はてなブログ』テーマ

  • 【Minimalism】
  • 【UnderShirt】
  • 【薄グレーなテンプレ】
  • 【JOURNAL.】

【はてなブログ】トップへ戻るボタンの設置方法　まとめ

3カ所に必要なコードを入れるだけで、トップへ戻るボタンが設置されます。



ここまでお読み頂き、ありがとうございました！

応援して頂けると嬉しいです。

 

2020/02/17

アキ