デザイン変更しました
テーマやデザインを色々と変更したので、備忘録としてまとめておくことにしました。
それに伴って記事も修正中です。
よく分かってないんですが修正した記事って更新しなおすと通知が来ちゃうんですかね？まぁ、なんかいっぱい記事更新してんなって思っても無視してください。
以前からちょこちょこやっていたものの、やればやるほど何故かダサいなーと思っていたので、丸ごと一気にデザインを変えてみました。
ずっとダサいなって！ほんとに思ってて！！ようやく！！！！
もちろん、CSSやらHTMLやらをきちんと理解はしていないのでネットで検索しまくり、コピペしまくりました。もちろん自分好みに多少変更していますが。
楽しかったけど結構時間掛かった。
- テーマをMinimalismへ変更
- 見出し（h1）の最初の文字を大きくし、色をブルーに変更
- 記事内の行高を変えてスッキリ見えるように変更
- 目次のデザインを変更
- 下線の色を水色から赤へ変更
- 囲み枠のデザインの変更と追加
- サイドバーとコメント欄のフォントサイズ・リンクカラーの変更
- ページトップ・ボトムに移動できるボタンの設置
コピペしまくりましたのでめちゃくちゃまともになったと思います。
デザインを変更するにあたってcanvaで紹介されていたものを参考に色合いを決めました。
1.テーマをMinimalismへ変更
前使っていた「Smooth」も気に入ってたんですが所々気になる点があり、変更することにしました。
最初は他のテーマにしようと思ってたんですが、2転3転してまた似たようなのになりました。
2．見出し（h1）の最初の文字を大きくし、色をブルーに変更
本当は大見出し（h3）・中見出し（h4）・小見出し（h5）を変更しようと思っていたのですが、コピペ元が<h1>だったのでそのまま試したところいい感じだった為採用しました。
/*見出しデザイン*/
h1:first-letter { font-size: 2em; color: #2988BC; }
3．記事内の行高を変えてスッキリ見えるように変更
1行ごとに改行したりしていないので元々見づらかったのですが、行の高さを調節して見やすくしました。
参照元はちょっと分からなくなってしまいました……。
/* 行高 */
.entry-content p { line-height: 2.6em; margin:0; }
4．目次のデザインを変更
元々のデザインがイマイチだったので検索しまくっていたところ、めちゃくちゃかっこいいのを見つけたので丸パクリさせていただきました。
ただ、CSSをコピペしただけだと余白がイマイチだったのでそこは変更しています。
5．下線の色を水色から赤へ変更
水色の下線にしていたのですが、赤（#ED8C72）へと変更しました。
同時に線の幅や濃さも調節しました。
/* 下線 */
.under { background: linear-gradient(transparent 75%, #ED8C72 50%);}
6．囲み枠のデザインの変更と追加
こちらも色を少し変更したのみでほぼ丸パクリです。
7．サイドバーとコメント欄のフォントサイズ・リンクカラーの変更
もともとの色合いも可愛かったのですが、色合いを自分好みにしたかったため変更しました。すべて紹介するのはめんどくさいので、一部のみ紹介します。
サイドバーにあるものに関しては、category(赤い文字のところ)を変更してprofileに変更すると、プロフィールの部分を変更できます。
その他についてはリンク先を参考にしてみてください。
/*サイドバーカテゴリー*/
.hatena-module-category a:link {color:#2988BC; /*クリック前の色*/}
.hatena-module-category a:visited {color:#2F496E; /*クリック後*/}
.hatena-module-category a:hover {color:#ED8C72; /*マウスを重ねた時*/}
.recent-entries-category{font-size: 75%; /*文字サイズ*/}
/*コメント欄*/
.comment-box a:link {color:#2988BC; /*クリック前の色*/}
.comment-box a:visited {color:#2F496E; /*クリック後*/}
.comment-box a:hover {color:#ED8C72; /*マウスを重ねた時*/}
8．ぺージトップ・ボトムに移動できるボタンの設置
これずっとやりたかったんですよね…！
でもイマイチやり方が分かってなかったので放置してたんですが、検索してたらいい感じのを見つけたのでパクらせていただきました。色は変更しています。
めっちゃかっけーーー！
今後ももう少しいじっていくつもりです
小学生ぐらいの時からブログをやっていたこともあって、そのときの将来の夢はウェブデザイナーになる事でした。
今思うと、センスが0なのでやらなくてよかったです。
こういうコード的なの書く作業って楽しいし好きなんですけどね、本職にはできないタイプ。
見出しのところとかまだまだ変えたいところがあるので、気づいたら変わっているかもしれません。
デザイン変だなぁって思っても温かい目で見ててください。
