全て
| カテゴリ未分類
| 送料無料ショップ
| 絶対買わなきゃ損
| レアもの
| ショッピング技
| 美容・健康
| 当ブログオリジナル
| 楽天ブログ・アフィリエイト関連
| 元気が出る話
| 楽天プロフィール関連
| なんちゃってレビュー
| 生活向上チャレンジ
| テキトーな映画レビュー
| 業務連絡
2014.06.22
テーマ： 楽天ブログいろいろ(1503)
カテゴリ： 楽天ブログ・アフィリエイト関連
当ブログの公開コンテンツのひとつ、「css でつくる h タグ」はコピー＆ペーストでお使いいただくことができ、またカスタマイズフリーとなっております。
今回は、フラットタイプの見出しの色の変更方法をご紹介します。
コピー＆ペーストに物足りなさを感じてきた方、人とはちょっと違うデザインをご希望の方は、カスタマイズ時の参考にしていただければ幸いです。
まずは、以下のページをご覧ください（クリックで別タブで開きます）。
さて、それでは実線タイプ、一番上の「のしめはないろ」の見出しの色を変えてみましょう。
コピー＆ペースト用コードの、赤色がついた部分に注目してください。
#426579 が Web ブラウザで色を表現するためのコードとなります。
この 2 箇所を変更するだけです。
のしめはないろ 」から、「 firebrick（赤レンガ色 = #b22222） 」に変更したい場合は、色コードを以下のように書きかえます。
カスタマイズ後の表示効果はこのようになります。
カスタマイズの際は、コードの区切りを示すセミコロン（;）や半角スペースを消さないように注意してください。
それでは次に、ボックスタイプの「べにみどりいろ」の見出しの色を変えてみましょう。
考え方は実線タイプと同様です。
シャープ（#）で始まるコードが色コードですから、それを見つけて変更してみましょう。
コピー＆ペースト用コードの、赤色がついた部分に注目してください。
サンプルでご紹介している見出しには、 #8491c3 （左端のバーの色） と #ccd6ff （背景の色） という二種類の色コードが指定されています。
カスタマイズ後の表示効果はこのようになります。
見やすさを考慮するなら、背景色はできるだけ淡い色を使うとよいでしょう。
さてここでは、トップラインタイプの「ねずみいろ」の見出しを使って、背景色をつけてみることにします。
もともと背景色がついていないため、色コードを指定する場所を間違わないように注意してください。
サンプルはこちらです。
◆ココ◆ と記された部分に色コードを設定します。
背景色を指定するには、以下のコードを追加します。
太字で示したように、最後のセミコロン（;）を忘れないようにしてください。
上記のコードに色コードを追加すると、カスタマイズ後の表示効果はたとえばこのようになります。
ちなみに、ここで指定した色は「コーンシルク（cornsilk = #fff8dc）」です。
以上で、フラットタイプの見出しの色のカスタマイズ方法の基礎は網羅できたと思います。
今後は不定期更新で、他のタイプの見出しのカスタマイズについてもご紹介していきたいと考えております。
参考リンク：
WEB色見本 原色大辞典 [外部リンク]
←こちらからこっそりコメントでけます
今回は、フラットタイプの見出しの色の変更方法をご紹介します。
コピー＆ペーストに物足りなさを感じてきた方、人とはちょっと違うデザインをご希望の方は、カスタマイズ時の参考にしていただければ幸いです。
まずは、以下のページをご覧ください（クリックで別タブで開きます）。
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色見本 原色大辞典 [外部リンク]
お気に入りの記事を「いいね！」で応援しよう
最終更新日
2014.06.23 00:43:17
[楽天ブログ・アフィリエイト関連] カテゴリの最新記事
-
[楽天ブログユーザ向け] 特定記事編集呼び… 2016.08.12
-
【更新情報】 Amazon Fire タブレットで G… 2016.07.16
-
Kindle Fire HD に Android アプリをムリ… 2016.06.02
【毎日開催】
15記事にいいね！で1ポイント
PR
キーワードサーチ
▼キーワード検索
© Rakuten Group, Inc.
