【はてなブログ-カスタマイズ】HOMEボタンをページに固定表示する（HTML・CSS対応）

数日前から適用していますが、HOMEボタンを配置してみました。
ページの右下に常に表示されているボタンです。

以前も「トップへ戻る」ボタンを配置しており、そこに縦に並ぶ形で「HOME」ボタンも配置してみました。

【はてなブログ-カスタマイズ】「トップへ戻る」ボタンをページに固定表示する

「HOME」のページに戻りたい時が多いので、せっかくなら右下に固定表示してしまおうと思った次第です。

今回の対応で「トップへ戻る」ボタンも微調整しているので、その件も含めて書いていきます。

変更内容（画像）
- 変更前
- 変更後
適用したHTML・CSS
- 「HOME」ボタン単独
  - HTML
  - CSS
- 「HOME」＋「トップへ戻る」ボタン
  - HTML
  - CSS
デザインの適用手順
注意事項
おわりに
関連記事

変更内容（画像）

まずは変更前後の画像を貼ります。

変更前

変更後

こんな感じです。

変更前は、ページの右下に「トップへ戻る」ボタンのみが配置されています。

変更後は、ページの右下に「HOME」ボタンも追加配置されています。
HOMEボタンの追加配置により、「トップへ戻る」ボタンは上に移動しています。

適用したHTML・CSS

今回の対応で「トップへ戻る」ボタンのコードも微調整しています。

「HOME」ボタン単独のコード、「トップへ戻る」ボタンも併せたコード、それぞれ貼ります。

※HOMEボタンのURL部分（href部分）は、自分のブログのURLに差し替えてください。

「HOME」ボタン単独

HTML

<!-- 追従するHOMEボタンHTML -->
<a href="https://miya-moto-memo.hatenablog.com/" id="home-link"><i class="blogicon-home"></i></a>
<!-- 追従するHOMEボタンHTML -->

※「href」は自ブログのURLに差し替えてください。

CSS

/***追従するHOMEボタン***/
#home-link {
    position: fixed;
    right: 10px;
    bottom: 60px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    background: #fff;
    color: #111;
    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);
    z-index: 10;
}
#home-link:hover {
    background: #111;
    color: #FFF;
}
/***追従するHOMEボタン***/

「HOME」＋「トップへ戻る」ボタン

HTML

<!-- 追従するトップへ戻るボタンHTML -->
<a href="#" id="page-top"><i class="blogicon-chevron-up"></i></a>
<!-- 追従するトップへ戻るボタンHTML -->

<!-- 追従するHOMEボタンHTML -->
<a href="https://miya-moto-memo.hatenablog.com/" id="home-link"><i class="blogicon-home"></i></a>
<!-- 追従するHOMEボタンHTML -->

※「href」は自ブログのURLに差し替えてください。

CSS

/***トップへ戻るボタン***/
#page-top {
    position: fixed;
    right: 10px;
    bottom: 60px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    background: #FFF;
    color: #111;
    padding: 10px 11px;
    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);
    z-index: 10;
}
#page-top:hover {
    background: #111;
    color: #FFF;
}
/***トップへ戻るボタンここまで***/

/***追従するHOMEボタン***/
#home-link {
    position: fixed;
    right: 10px;
    bottom: 10px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    background: #fff;
    color: #111;
    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);
    z-index: 10;
}
#home-link:hover {
    background: #111;
    color: #FFF;
}
/***追従するHOMEボタン***/