ゆるかんママブログ

1児の看護師ママが妊娠・子育て・日々の事・看護関係についてゆるーくブログをお届け!

【はてなブログ】トップに戻るボタンの設置|コピペOK|ブログ初心者向けカスタマイズ

トップへ戻るボタンの設置を解説しているスパナを持った白い人型のイラスト

どうも、あーちゃんママです!

 

最近ブログのカスタマイズをしていて

 

f:id:a-a-chan:20200229173542p:plain
あーちゃんママ

トップに戻るボタンを設置したい!

 

と考え、軽い気持ちでカスタマイズを始めました。

ですが『見出しのカスタマイズ』と同様に苦戦したので、今回はその事を書きました。

 

見出しのカスタマイズで、ブログ初心者の私が翻弄された記事はこちら↓

www.yurukanmama.com

   

 

スポンサーリンク

 

 

お世話になったサイト紹介 

はじめにお世話になったサイト様の紹介から! 

 

hatebumaru.hatenablog.com

 

www.htmq.com

 

tech-unlimited.com

 

www.colordic.org

 

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

ボタンの設置は3つの工程を踏むだけなので、とっても簡単でした!

 

こちらのサイト様↓の通りにコピペをすればOKです!

hatebumaru.hatenablog.com

 

設置完了!が、2点気になる部分が…

さてさて、トップに戻るボタンの設置が無事済んだのは良いのですが…

2点気になる部分がありました。

 

  1. スマホだと矢印の位置が下過ぎる
  2. 矢印の色を変更したい

 

①矢印の位置が下過ぎる

私のブログではスマホ画面下に『ボトムナビゲーション』を設置しています。

 

下にスクロールしている時に、矢印の半分以上がボトムナビゲーションに隠れてしまっていました。

②矢印の色を変更したい

紹介サイトの通りにボタンを設置すると、グレーの矢印になります。

 

私のブログのテーマカラーがピンクなので、矢印も同系色へ変更したいなと思いました。

 

f:id:a-a-chan:20200228172500p:plain
あーちゃんママ

という事で、初心者ブロガーの私はこの2点を変更しよう!と奮起したのです。

 

   

矢印の位置を変更させる方法

こちらも簡単でした。

 

デザインCSSの『bottom』部分を変更するだけ。

はじめは「20」に設定されていましたが、私の場合は「60」へ変更しました。

デザインSCCの変更点を示しているSCC画面


60へ変更した後のスマホ画面がこちら↓ 

スマートフォンの画面が表示されている

 

変更前の矢印の状態をスクショしていないので比較が出来ないと思いますが(汗)、だいぶ上に出てきました! 

 

私的には満足したので(笑)矢印の位置変更はこれで終了にしました^ ^

 

矢印の色の変更

両手を頭に当て考えている女性

これがかなり苦戦しました(ーー;)

今までならデザインCSSの『color』部分のカラーコード(#~)を変更すれば色変更が出来ていました。

 

「colorの部分があったぞ!あれ?でもいつもと違うな…。どうすりゃいいんだ?」 

「rgba」ってなんだ!?

デザインSCCコードが表示されている画面

 

初心者の私。

ちゃんと調べれば良いのに独自にCSSを変更。

 

適当な部分に

『color:#~』と挿入してみたり。

 

『color:#~:rgba(~)』にしてみたり。

 

ま、変更出来るはずがないですよね!(T-T)

 

スポンサーリンク

 

 

rgba()とは

こちらのサイト↓で解説があります。

www.htmq.com

 

ようするに、

いつもと違う方法で色変更をする!

という事でした(笑)

  

rgba()の色変更の方法

①まずはこちら↓で変更したいカラーコードをコピー。

www.colordic.org

 

②変更したいカラーコードをコピーできたら、こちら↓でカラーコードを変換する。

tech-unlimited.com

 

③変換できたらCSSを変更!

これで色変更が完了です。

デザインCSSのコードが表示されている画面
デザインCSSのコードが表示されている画面

 

無事にグレーからパープルの矢印へ変更出来ました!

 

f:id:a-a-chan:20200229173546p:plain
あーちゃんママ

ここにたどり着くまでが長かった…。

 

そもそも『rgba』とは何かを調べるまでが長かった…。

 

そもそも『rgba』って調べる気になる…?

 

リサーチの仕方が悪かった…。

 

矢印の透明度も変更

rgba()は色の透明度も変更出来るので、そちらも変更しました。

 

デザインCSSのコードが表示されている画面
デザインCSSのコードが表示されている画面

 

 こんな感じになりました↓

スマートフォンの画面

 

まとめ

 

矢印の位置変更をする場合は

『bottom』のpx値を変更する(←高さのみの変更)

 

(今回ノータッチだった『right』のpx値を変更すれば横の位置変更が出来る)

 

rgba(~)の色変更をするには

カラーコードの変換をする

変換したらCSSを変更して完了

 

透明度も変更可能

 

今回のカスタマイズでも勉強になる事が多く、今後のカスタマイズにも役に立ちそうだなと思いました。

 

どんどんカスタマイズが楽しく感じているので、カスタマイズ欲が高まっている私でした。

 

スポンサーリンク

 

 

 

www.yurukanmama.com

www.yurukanmama.com

www.yurukanmama.com

www.yurukanmama.com