MARTHAの日記

頓痴気な知命(50歳)を過ぎた男が、日常・趣味(音楽・本・映像など)を綴ります

Amazon Music Unlimited

はてなブログの構築003 (見出しのカスタマイズ)

f:id:MS1967:20190223150600j:plain

 

 


さらに皆さまのお知恵をお借りして

 

 

見出しのカスタマイズ

見出しのデザイン

 

はてなブログ 見出し カスタマイズ」と検索をかけると

 

 

www.notitle-weblog.com

「NON TITLE」さんのブログ

saruwakakun.com

「サルワカ」さんのブログ

にたどりつきました

 

見出しのタグというものが「h1~h6」まであり(本文は「p」らしい)、

はてなブログの編集画面では、記事の

大見出しが「h3」

中見出しが「h4」

小見出しが「h5」

とのこと

 

試しに、皆さまのコードを借用し、見出しのカスタマイズに挑戦を

サルワカさんのCSS

 

h1 {
  background: #c2edff;/*背景色*/
  padding: 0.5em;/*文字まわり(上下左右)の余白*/
}

 を用いてみると

 

f:id:MS1967:20190222182031p:plain

f:id:MS1967:20190222182057p:plain

おー、変わっていますね!

 

見出しの色

 

でも、背景色と被っています(後に若干、背景色を変更しました)ので、色の変更が

必要ですね…

 

背景色のCSSはこちらで

background: #c2edff;/←ここがカラーコード とのことなので、

 

「色 コード表」で検索をかけると

www.color-sample.com

こちらと

www.colordic.org

こちらのサイトが

 

こちらの和色大辞典の「虹色」のコード(#f6bfbc)を、先ほどの背景色の

カラーコードへ書き改めると

 

f:id:MS1967:20190222183858p:plain

f:id:MS1967:20190222183915p:plain

おー、変わっていますね

(この程度で喜ぶのは、初心者の極みですね…)

 

 ならば、見出しのすべて(h1~h5)を変更してみることに

 

こちらの投稿に、あえてすべての見出しをつけ(後ほど修正致します)

各見出しを色違いの背景色にしてみます

 

f:id:MS1967:20190222185914p:plain

見出しのサイズは、バラバラですが、変更できました!

 

 

<続く>