みいの記録帳

旅行、コーヒー、ベランダ園芸好きな30代OLの雑記ブログ

はてなブログで上に戻るボタンを設置する方法と自分のブログに合わせた色に変更する方法

f:id:Miiiii:20190628235720p:image


ブログを始めてからたくさんの人のブログを改めて見る機会が増えました。

 

ですが、自分のブログをトップページから見返す事はあまりせずにいました。

グーグルアドセンスに落ちてから改めて自分のブログを見返してみると、

 

上に戻るボタン設置した方が見やすいんじゃない?

 

と思い、設置することにしました!

 

 

上に戻るボタン設置方法

設置する方法は下記のブログを参考にさせて頂きました。

3つのコードをそれぞれコピーして所定の場所に貼り付けるだけですのでわかりやすくて、簡単でした!!


上記のブログでは

f:id:Miiiii:20190628145837p:plain

このようなグレーの上に戻るボタンが設置できる方法が記載されています。

 

もちろんこのままでも問題なく使えるのですが、私のブログではこの色のボタンではちょっと合いません。

 

 

 自分のブログに合わせた色に変更する方法

 はてなブログ管理画面⇢「デザイン」⇢「カスタマイズ(スパナのマーク」⇢「デザインCCS」欄に張り付けした3つめのコードの一部を変更します。

color: 〇〇の〇〇の部分

 f:id:Miiiii:20190628170553p:plain

〇〇の部分に自分の選んだ色のコードを入力します。

1つ目に入力した色は表示される色。

2つ目に入力した色はカーソルを持っていくと変わる色になります。

 

色のコードはこちらのサイトで調べました。

 

自分の好みの色に設定できました!

 

これから上へ戻るボタンを設置するか検討している方は是非、自分の選んだ色で設置してみてください。