ブログやWEBサイトを見てると「上に戻る」ボタンってあるよね？
ブログの下とか途中から一番上にビューンと戻れるやつ。
自分でブログ作ったはいいけど、このボタンが最初はなかったので、若干メンドクサイなった思うことが度々あったので、設置してみよう!!!と思い挑戦。
まぁ、今回もコピペさせてもらったんだけどね!!!
そこに自分のブログに合う様に、ほんのちょびっとだけ手を加えたので、記録がてら書いていきま～す。
誰かの参考になるかも？
元コードをコピペ
コトダマウェブさん
はてなブログでも使えるのかわからなかったけど、とにかくやってみた。
こちらのサイトの指示通りにコードを貼りつける。
HTML
「ダッシュボード→デザイン→カスタマイズ→フッタ」に貼る。
ここに貼るってどっかで調べたらで出来たから貼ったんだけど、どのサイトだったかな？
CSS
「ダッシュボード→デザイン→カスタマイズ→デザインCSS」に貼った。
結果
ひとまず設置出来る事がわかったし、ちゃんと上に戻ることもできる。
ではここから、少し手を加えていく。
「デザインCSS」に貼るコードの変更
色の変更
colorpick eyedropperで色を調べる
元の色だとブログの中で浮く感じだったので、馴染むような色に変更。
ブログデザインのメインカラーはグラデーションになってたので、良さそうな所を探した。
CSSコードの内のcolorを変更
元コード
- #page_top a::before{
- font-family: 'Font Awesome 5 Free';
- font-weight: 900;
- content: '\f0aa';
- font-size: 60px;
- color: #ef3f40;
- }
変更後
- #page_top a::before{
- font-family: 'Font Awesome 5 Free';
- font-weight: 900;
- content: '\f0aa';
- font-size: 60px;
- color: #f3bf94;
- }
結果
ブログと馴染んでいい感じ!!!
位置の調整
私のパソコンだけかもしれないけど、ちょっと切れちゃうので、位置の調整を。
これが最初わかんなくて困った。
検証を使ってみてもよくわからず。
で、色々調べたり、コードの数字をいじってみたらなんかうまくいった。
CSSコード内のwidthとheightの変更
元コード
- #page_top{
- width: 60px;
- height: 60px;
変更後
- #page_top{
- width: 70px;
- height: 85px;
数字は実際の物を見ながら調整した。
結果
切れずにちゃんと見えてる!!!
嬉しいいいい～～～～!!!
まとめ
今回は上に戻るボタンを設置した話でした。
ここをいじればいいのかなぁ？と考えたり探したりするのが結構楽しい。
仕事じゃないからだろうけども(笑)
今後も自分の記録としての意味も含め、こういうカスタマイズしたことを書いていけたらいいなと思う。
なにせ変更とかがなければ、最初のうちしか出来ないだろうし。
