minimal-japanese-mom’s blog

元アメリカ駐在妻の40代主婦が、充実したおうち時間/1人時間を過ごすコツを伝えます!

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

こんにちは!

 

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

 

 

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

f:id:theminimaljapanesemom:20220911082236j:image

 

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

 

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

 

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

 

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

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

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

 

色見本と配色サイト - color-sample.com

 

ブログ見出しのデザイン

f:id:theminimaljapanesemom:20220911082256j:image

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

まとめ

f:id:theminimaljapanesemom:20220911082308j:image

 

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

 

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

 

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

 

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

 

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

 

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

theminimaljapanesemom.hatenablog.com

 

theminimaljapanesemom.hatenablog.com

 

theminimaljapanesemom.hatenablog.com

 

にほんブログ村 海外生活ブログ アメリカ情報へ
にほんブログ村