PCインストラクターの川上です。
昨日の記事『見出し付きの囲い枠』について、リクエストがありましたので、その２として追加いたしますね。
見出しの行が、枠いっぱいの背景色にしたい、といったリクエストになります。
それはこちら↓↓↓
紺色（カラーコード：#000066）は↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>
冷静沈着の青色（カラーコード：#0000ff）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#0000ff; border:1px solid #0000ff; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #0000ff; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>情熱的な赤色（カラーコード：#ff0000）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ff0000; border:1px solid #ff0000; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ff0000; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>可愛らしいピンク色（カラーコード：#ff1493）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ff1493; border:1px solid #ff1493; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ff1493; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>平和的な緑色（カラーコード：#008000）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#008000; border:1px solid #008000; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #008000; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>好奇心をそそるオレンジ色（カラーコード：#ff9933）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ff9933; border:1px solid #ff9933; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ff9933; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>ちょい薄めのオレンジ色（カラーコード：#ffa566）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ffa566; border:1px solid #ffa566; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ffa566; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>背景色が薄い場合は、文字色は白抜きでなく、黒もいいかも^^;
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ffa566; border:1px solid #ffa566; padding-left:10px; font-size:1.16em;"><font style="color:#000000; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ffa566; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>目立たない茶色（カラーコード：#994c00）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#994C00; border:1px solid #994C00; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #994C00; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>注意を意味する黄色（カラーコード：#ffd400）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#FFD400; border:1px solid #FFD400; padding-left:10px; font-size:1.16em;"><font style="color:#000000; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #FFD400; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>スピリチュアルセラピスト のりこさんが使っている枠
はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:rgb(184, 134, 11); border:1px solid rgb(184, 134, 11); padding-left:10px; font-size:1.16em;"><font style="color:rgb(255, 255, 255); font-weight:bold;">■タイトルはこちら■</font></div><div style="background-color: rgb(255, 248, 220);border:1px solid rgb(184, 134, 11);color:rgb(0, 0, 0);padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>
今回は、ちょっと色を増やしてみました^^
ご自由にお持ち帰りくださいませ^^!
さらにご自分のお好きな色を
さらに、ご自分専用の色で作成したい方は、色見本サイトで探してみてくださいませ^^
色見本と配色サイト
WEB色見本 原色大辞典
＜追記１＞
あめつくさんから、有難いご指摘をいただきました！
「以下のコードをコピぺして利用させていただいたのですが、タグ編集エディタやスマホの旧エディタで使用すると、見出しと本文の間に空白行が出来てしまいます。」
<div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div>
<div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>
↑このように、</div>と<div>の間に改行があると、空白行が出来てしまいます^^;
大変失礼しましたm.m
コードは修正しておきました。
あめつくさん、ご指摘ありがとうございました！
･･･と思ったら、キョロちゃんから業務連絡が（笑）
あめつくさんが早速、記事にしてくださったようです↓↓↓
『「見出し付きの囲み枠」がめっちゃ見やすい！ 』
感謝、感謝！！
＜関連記事＞
見出し付き囲い枠の関連記事がこちらにあります↓↓↓
見出し付きの囲い枠
見つけた！早くも【見出し付き囲い枠】が･･･
見出し付き囲い枠のその後のご質問･･･
『見出し付きの囲い枠 -その２』の角を丸く
【続々編】見出し付きの囲い枠（角を丸く・背景グラデーション・枠に影・文字に影）
＜参考＞
見出し付きの囲い枠が簡単にできました、とご報告していただいた記事をこちら↓↓↓で紹介しております。
あなたもチャレンジ！アメブロカスタマイズ－－本当に私にもできた！
＜追記２＞
この記事内の囲い枠の幅を調整したい、という方はこちらの記事をご覧くださいませ↓↓↓
『見出し付き囲い枠-その２』の幅の調節は？（枠の幅を狭くしたい、枠を中央にしたい・・）
以上、アメブロ便利技でした。
LIDS澄川・ライフデザインスクール
川上 雄大