【簡単１分】はてなブログに「トップに戻る」ボタンを設置するやり方
はてなブログに「トップに戻る」ボタンを設置するやり方を解説します。
「はてなブログ トップに戻る」と検索してやってみるけど上手に表示できないという方の参考になればと思います。
ボタンの色や透明度を変更するやり方やデザインCSSが反映されないときの対処方法も解説しています。
目次
【簡単１分】はてなブログに「トップに戻る」ボタンを設置するやり方
実際にわたし「はてなブログ トップに戻る」と検索して、いろいろと試してみたのですが、はてなブログにトップに戻るボタンがうまく作動しませんでした。
はてなブログに「トップに戻るボタン」が画面の真ん中に表示されてしまったりしました。
あるサイトを参考にさせていただいたら、簡単にカスタマイズができましたのでご紹介させていただきます。
他のデザインテーマで「トップに戻る」ボタンが設置できるか試してみてください。
はてなブログに「トップに戻る」ボタンを設置するとは?
はてなブログに「トップに戻る」ボタンとはどういうことかというと、クリックするとトップページに戻るボタンをつけるということです。
これが、はてなブログに設置した「トップに戻る」ボタンです。
はてなブログに「トップに戻る」ボタンを設置するには、デザインテーマをレスポンシブ対応にする
はてなブログをレスポンシブデザインにしておくと、スマホからも、パソコンからも表示されます。
そのため、はてなブログをレスポンシブデザインのテーマにしてから、「トップに戻る」ボタンを設置しましょう。
レスポンシブデザインにするやり方はこちら。
はてなブログのおすすめデザインテーマ（テンプレート）の変更方法とレスポンシブデザイン対応のやり方（動画と画像）
はてなブログに「トップに戻る」ボタンを紹介しているコトダマウェブさんの見方
コトダマウェブさんのカスタマイズが分かりやすかったので、ご紹介させていただきます。
２つの工程で簡単にできます。
コトダマウェブさんのサイトにアクセスしてください。
スクロールすると出てくる「トップへ戻る」ボタンの作り方
「トップに戻る」ボタンの種類がたくさんあるので、はてなブログに設置したいデザインのを選びましょう。
コトダマウェブさんで押すボタンは以下の４つです。
- HTML
- CSS
- Result
- １× 0.5×
HTML
フッタに貼る「トップに戻る」ボタンのコードが表示されます。
CSS
デザインCSSに貼る「トップに戻る」ボタンのコードが表示されます。
Result
押すと、「トップに戻る」ボタンのデザイン表示され、見ることができます。
１× 0.5× ×0.25
はてなブログに表示させる「トップに戻る」ボタンの大きさ（サイズ）を変更して見ることができます。
大きさを変更させると、デザインCSSが変わるわけではないので、はてなブログに実際に設置する「トップに戻る」ボタンの大きさを変更できるものではないようです。
実際に試してみましたが、「トップに戻る」ボタンを小さく表示させることはできませんでした。
「トップに戻る」ボタンをはてなブログに設置する手順
コトダマウェブさんの、「トップに戻る」ボタンのデザインを選ぶ。
HTMLボタンのグレーのボタンを押して、HTMLのコードをはてなブログのフッタに貼り付けます。
はてなブログの管理画面のデザインボタンを押します。
「スパナのマーク」→「フッタ」
CSSのグレーのボタンを押して、HTMLのコードをはてなブログのデザインに貼り付けます。
「スパナのマーク」→「デザインCSS」
はてなブログの「トップに戻る」ボタンの色をカスタマイズ変更するやり方
「はてなブログのデザインの色に合わせたい」という方も多いのではないでしょうか?
コトダマウェブさんのCSSのコードに以下のような記載があるので見つけてください。
#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 0;
background: #3f98ef;
opacity: 0.6;
background: #3f98ef; という部分が色の設定ができるCSSのコードの部分になります。
#3f98efという部分を以下の色のHTMLサイトから表示したい色を選びましょう。
このコードを変えるだけで、「トップに戻る」ボタンの色も変更することができます。
数値を変更して、はてなブログの「トップに戻る」ボタンの色の調整をしましょう。
はてなブログの「トップに戻る」ボタンの透明度をカスタマイズ変更するやり方
「トップに戻る」ボタンを設置するけど、もっと透明度を薄くしたいという場合や、透明度をもっと濃くしたいという方もいるかもしれません。
コトダマウェブさんのCSSのコードに以下のような記載があるので見つけてください。
#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 0;
background: #3f98ef;
opacity: 0.6;
opacity: 0.6; という部分が透明度の設定ができるCSSのコードの部分になります。
opacity: 0.1; にするとより透明度が増します。
opacity: 1.0; にすると透明度が無くなります。つまり色が濃くなります。
数値を変更して、はてなブログの「トップに戻る」ボタンの透明度の調整をしましょう。
はてなブログの「トップに戻る」ボタンが表示されないときの対処方法
他にたくさんのカスタマイズコードをデザインCSSに入れている方は、はてなブログの「トップに戻る」ボタンが表示されない」という可能性もあります。
デザインCSSに貼ったコードの位置を変えてみましょう。
一番したにコードを貼っているのであれば、一番上にもってきて反映されるかというのを確認してください。
はてなブログの「トップに戻る」ボタンが表示されないときは、以下の動画を確認してみてください。
