この覚書もここにあると便利なので… 。自分用。
このブログで好んで使うベースカラー
#277FD7 ■■■■■■■■■■
#63b8cc ■■■■■■■■■■
#ef3f98 ■■■■■■■■■■
背景色：#ffe4e1 ■■■■ 枠線：#ef3f98
この文字色：#ef3f98
背景色：#fff0f5 ■■■■ 枠線：#ef3f98
この文字色：#ef3f98
背景色：#f0f8ff ■■■■ 枠線：#277FD7
この文字色：#277FD7
マーカー色 オレンジ #ffedab
マーカー色 ピンク #FFD5EC
小文字が大文字か統一しろって思った。
参考サイト：カラーチャート/配色パターン - TAG index
参考サイト：色見本と配色サイト - color-sample.com
div タグに設定したグラデーションと下線
下線 の太さと色： border-bottom:solid 3px #A1C3E6; ■■■■■■■■
グラデーション： 濃色 rgb(183,218,255) ＝ #b7daff ■■■■ 薄い色 #ffffff
background: rgb(183,218,255);
background: linear-gradient(0deg, rgba(183,218,255,1) 0%, rgba(255,255,255,1) 100%);
下線 の太さと色： border-bottom:solid 3px #80C472; ■■■■■■■■
グラデーション： 濃色 rgb(151,215,136) ＝ #97d788 ■■■■ 薄い色 #ffffff
background: rgb(151,215,136);
background: linear-gradient(0deg, rgba(151,215,136,1) 0%, rgba(255,255,255,1) 100%);
下線 の太さと色： border-bottom:solid 3px #C483B3; ■■■■■■■■
グラデーション： 濃色 rgb(238,169,220) ＝ #dea9ee ■■■■ 薄い色 #ffffff
background: rgb(238,169,220);
background: linear-gradient(0deg, rgba(238,169,220,1) 0%, rgba(255,255,255,1) 100%);
下線 の太さと色： border-bottom:solid 3px #F27989; ■■■■■■■■
グラデーション： 濃色 rgb(251,158,170) ＝ #fb9eaa ■■■■ 薄い色 #ffffff
background: rgb(251,158,170);
background: linear-gradient(0deg, rgba(251,158,170,1) 0%, rgba(255,255,255,1) 100%);
下線 の太さと色： border-bottom:solid 3px #84A7E0; ■■■■■■■■
グラデーション： 濃色 rgb(178,206,250) ＝ #b2cefa ■■■■ 薄い色 #ffffff
background: rgb(178,206,250);
background: linear-gradient(0deg, rgba(178,206,250,1) 0%, rgba(255,255,255,1) 100%);
下線 の太さと色： border-bottom:solid 3px #D6A77E; ■■■■■■■■
グラデーション： 濃色 rgb(244,212,184) ＝ #f4d2b8 ■■■■ 薄い色 #ffffff
background: rgb(244,212,184);
background: linear-gradient(0deg, rgba(244,212,184,1) 0%, rgba(255,255,255,1) 100%);
下線 の太さと色： border-bottom:solid 3px #F7AD2E; ■■■■■■■■
グラデーション： 濃色 rgb(249,207,112) ＝ #f9cf70 ■■■■ 薄い色 #ffffff
background: rgb(249,207,112);
background: linear-gradient(0deg, rgba(249,207,112,1) 0%, rgba(255,255,255,1) 100%);
CSS でボタンの形や位置を調整
最初はこれ
ページ右下にピタっとくっつくのがいい感じw と思って設置。しかし、このブログは無料版なので下部に広告が出て 右下にボタンを設置すると隠れてしまった。
見えるところに配置するため、位置指定の CSS を変更。
これ ↓ を
#page_top{
right: 0;/*右からの位置*/
bottom: 0;/*下からの位置*/
opacity: 0.6;/*不透明度*/
}
これ ↓ に書き換え
#page_top{
right: 0;/*右からの位置*/
bottom: 110px;/*下からの位置*/
opacity: 0.6;/*不透明度*/
}
コメントアウトは私が勝手に付けた。110px は Try ＆ Erorr で（主にスマホ表示で、ページ下の広告エリアのすぐ上に戻るナビが表示されるように）。
広告がない時にやや中途半端な位置にくるのは仕方ないので、存在感薄めの、
にして、色はこのブログで使用している淡水色 #277FD7 に変えた。
★スムーズスクロール設定
トップに戻る際に滑らかに戻る方が良さそう。なので、 CSS に
/*スムーズスクロール*/
html{
scroll-behavior: smooth;
}
を設定。JS で実現する方法もあるが、両方試して特に違いは感じなかったので CSS でいいと思う。JS だと戻るスピードなどの調整ができるらしい。
★スクロールでフェイドインする設定
トップ表示で最初から戻るボタンは不要なので、スクロールしてから表示されるように。
jQuery で実現。参考サイト様そのまんま。
はてなブログ ヘッダ周り要素の調整参考サイト
検索先のサイト様が、はてなブログの HTML 構造を解説してくださっていて、すばらしいです。
ちゃんこめブログ https://www.chankome.com/entry/blog-hatenablog-html
ただ、これを見ただけではボリュームがあり過ぎてうまくできず；別の参考ブログも参考にして実現。
フジブロっ！https://www.fuji-blo.com/entry/header-image#余白をなくす
暫定サイトで使ったテーマの制作者さんでとてもキレイなソースと丁寧な説明を書かれている方。但し、これをコピペしただけでは当然うまくいく筈もなかったが（テーマが違うので）、ただわかりやすく結果が出ることと、解説が多いので今後も参考になる。
2023年現在設定中のヘッダー画像は、 PC で全画面にすると途中で切れる。上記サイトを参考にして修正したらいいかなー、と思いつつ、後回しにして今に至る。
トップに戻るボタンはこれまで実装していなかったし考えてもなかったが、気付けば実装してないサイトの方が少ないんじゃないか、という位、設置しているサイトが多くなっていた。これも、暫定サイトで採用したテーマ（Neumorphism）がスマホ表示を意識して丁寧に作られていたので、私自身に自然とスマホ表示をイメージする意識が芽生えたからだと思う（普段 PC で見る事がほとんどなので）。回り道はしてるけど、無駄じゃないというか、変化ってやっぱり大事だな、と思う。
