[やってみよう] css でつくる h タグの色をカスタマイズしてみよう
当ブログの公開コンテンツのひとつ、「css でつくる h タグ」はコピー&ペーストでお使いいただくことができ、またカスタマイズフリーとなっております。 今回は、フラットタイプの見出しの色の変更方法をご紹介します。 コピー&ペーストに物足りなさを感じてきた方、人とはちょっと違うデザインをご希望の方は、カスタマイズ時の参考にしていただければ幸いです。 まずは、以下のページをご覧ください(クリックで別タブで開きます)。ブログ用見出しテンプレート[フラット系]1. 実線タイプの見出しの色をカスタマイズ さて、それでは実線タイプ、一番上の「のしめはないろ」の見出しの色を変えてみましょう。 コピー&ペースト用コードの、赤色がついた部分に注目してください。のしめはないろ<h3 style="border-bottom:1px solid #426579;border-left:10px solid #426579;padding:7px;">ここにテキストを入力します</h3> #426579 が Web ブラウザで色を表現するためのコードとなります。 この 2 箇所を変更するだけです。 たとえば、色を「のしめはないろ」から、「firebrick(赤レンガ色 = #b22222)」に変更したい場合は、色コードを以下のように書きかえます。<h3 style="border-bottom:1px solid #b22222;border-left:10px solid #b22222;padding:7px;">ここにテキストを入力します</h3> カスタマイズ後の表示効果はこのようになります。ここにテキストを入力します カスタマイズの際は、コードの区切りを示すセミコロン(;)や半角スペースを消さないように注意してください。2. ボックスタイプの見出しの色をカスタマイズ それでは次に、ボックスタイプの「べにみどりいろ」の見出しの色を変えてみましょう。 考え方は実線タイプと同様です。 シャープ(#)で始まるコードが色コードですから、それを見つけて変更してみましょう。 コピー&ペースト用コードの、赤色がついた部分に注目してください。べにみどり<h3 style="border-left:15px solid #8491c3;padding:7px;background: #ccd6ff;">ここにテキストを入力します</h3> サンプルでご紹介している見出しには、#8491c3(左端のバーの色) と #ccd6ff(背景の色) という二種類の色コードが指定されています。 色コードを書きかえると、たとえば次のようになります。<h3 style="border-left:15px solid #006400;padding:7px;background: #7fffd4;">ここにテキストを入力します</h3> カスタマイズ後の表示効果はこのようになります。ここにテキストを入力します 見やすさを考慮するなら、背景色はできるだけ淡い色を使うとよいでしょう。3. トップラインタイプの見出しに背景色をプラス さてここでは、トップラインタイプの「ねずみいろ」の見出しを使って、背景色をつけてみることにします。 もともと背景色がついていないため、色コードを指定する場所を間違わないように注意してください。 サンプルはこちらです。 以下の◆ココ◆と記された部分に色コードを設定します。ねずみいろ<h3 style="border-top: 3px solid #808080;◆ココ◆-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);padding:7px;">ここにテキストを入力します</h3> 背景色を指定するには、以下のコードを追加します。background: #色コード; 太字で示したように、最後のセミコロン(;)を忘れないようにしてください。 上記のコードに色コードを追加すると、カスタマイズ後の表示効果はたとえばこのようになります。ここにテキストを入力します ちなみに、ここで指定した色は「コーンシルク(cornsilk = #fff8dc)」です。 以上で、フラットタイプの見出しの色のカスタマイズ方法の基礎は網羅できたと思います。 今後は不定期更新で、他のタイプの見出しのカスタマイズについてもご紹介していきたいと考えております。参考リンク:WEB色見本 原色大辞典 [外部リンク] ←こちらからこっそりコメントでけます