現在サイト移行後の調整中にてお見苦しい点多数あります

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

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

※この記事は『はてなブログ』でブログ運営をしている時の記事になります。
現在は『WordPress』へ移行しています。

こんにちは、

あーちゃんママ(@a_a_chanm0m)です。

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

あーちゃんママ

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

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

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

見出しのカスタマイズ記事はこちら。

【はてなブログ】見出しのカスタマイズ|コピペOK|ブログ初心者向けカスタマイズ|Haruni

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

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

hatebumaru.hatenablog.com

www.htmq.com

tech-unlimited.com

www.colordic.org

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

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

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

hatebumaru.hatenablog.com

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

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

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

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

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

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

矢印の色を変更したい

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

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

あーちゃんママ

という事で、初心者ブロガーの私はこの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のコードが表示されている画面

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

あーちゃんママ

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

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

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

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

矢印の透明度も変更

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

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

こんな感じになりました⬇︎

スマートフォンの画面

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

〈矢印の位置変更〉

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

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

  • カラーコードの変換をする
  • 変換したらCSSを変更して完了
  • 透明度も変更可能

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

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

【はてなブログ】見出しのカスタマイズ|コピペOK|ブログ初心者向けカスタマイズ|Haruni 【はてなブログ】カスタマイズまとめ|ブログ初心者向け

2 COMMENTS

a-a-chan

YUKAHISA様(id:YUKAHISA)
はてブ・コメントありがとうございます!!
そう言っていただき大変嬉しいです!!m(_ _)m

返信する
a-a-chan

dajyaresensei様(id:dajyaresensei)
はてブありがとうございます!
そう言っていただけて嬉しいです!!^ ^
私も初心者なので全然簡単ではなかったのです(笑)
ですが少しでもdajyaresensei様の参考になれば…!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です