ブログの見出しデザインを変更してみました

こんにちは！

今回は、ブログ活動の覚書として、「見出しデザインを変更する方法」について、紹介します。

見出しデザインを変更する方法

f:id:theminimaljapanesemom:20220911082236j:image

各ブログ記事のタイトル、小見出し（h1～h6タグ）のデザインを変更したいと、ここ1年ほど、思っていました。

スタイルシート（CSS）に、希望するコードを記入しておくと、デザインが変更されます。

デザインスタイルとコードについては、以下のブログ記事を参考にさせていただきました。

また、色のサンプルとしては、color-sample.comがすばらしいです。

今後もまた利用できそうです！！

f:id:theminimaljapanesemom:20220911082256j:image

個人的な好みですが、ブログのサイトデザインも、シンプルでスッキリした方がいいなあ～、と思い、

白基調に、ちょっとだけ、色を入れている、超シンプルテイストです。

とはいえ、タイトルや見出しまで、埋もれてしまっているような気もしていたので、以下のように、変更してみました。

タイトル見出し→背景をライトシアン系の色、文字は、黒でそのまま。

※さわやかな色が落ち着かず、数日後、背景色をライトグレーに変更してみました（後日追記）。

記事内の見出し→背景は透明、文字も黒、左横に青色で縦線をひくデザイン。

色の配色を変えるだけで、ウェブサイトの印象も変わるので、面白いなあ～、と思います。

また、ウェブサイト内で使われている色は、すべて、１つ１つ選択/指定されているのだと、思うと、とても奥深いです。

f:id:theminimaljapanesemom:20220911082308j:image

以上、ブログの見出しデザインを変更したので、紹介させていただきました😊

基本、書きたいこと＆紹介したいことが多すぎて、字ばっかりのブログになっていますが、

全体的な読みやすさの向上のためにも、どうにも気になってしまうようなデザイン的なところは、

少しずつ情報収集して、手を加えていきたいです。

プログラミングというと、難解そう、というイメージもありますが、実際、少しいじってみると、HTMLやCSSって、直感的に理解できる部分もあるので、楽しそうだな、なんて思います💡

【こんな記事も書いています】

リンク