パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:
こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


昨日の記事『見出し付きの囲い枠』について、リクエストがありましたので、その2として追加いたしますね。

見出しの行が、枠いっぱいの背景色にしたい、といったリクエストになります。


それはこちら↓↓↓

紺色(カラーコード:#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色見本 原色大辞典




<追記1>
あめつくさんから、有難いご指摘をいただきました!

「以下のコードをコピぺして利用させていただいたのですが、タグ編集エディタやスマホの旧エディタで使用すると、見出しと本文の間に空白行が出来てしまいます。」

<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

コードは修正しておきました。

あめつくさん、ご指摘ありがとうございました!


・・・と思ったら、キョロちゃんから業務連絡が(笑)
あめつくさんが早速、記事にしてくださったようです↓↓↓

『「見出し付きの囲み枠」がめっちゃ見やすい! 』

感謝、感謝!!


<関連記事>
見出し付き囲い枠の関連記事がこちらにあります↓↓↓

見出し付きの囲い枠

見つけた!早くも【見出し付き囲い枠】が・・・

見出し付き囲い枠のその後のご質問・・・

『見出し付きの囲い枠 -その2』の角を丸く

【続々編】見出し付きの囲い枠(角を丸く・背景グラデーション・枠に影・文字に影)



<参考>
見出し付きの囲い枠が簡単にできました、とご報告していただいた記事をこちら↓↓↓で紹介しております。

あなたもチャレンジ!アメブロカスタマイズ--本当に私にもできた!


<追記2>
この記事内の囲い枠の幅を調整したい、という方はこちらの記事をご覧くださいませ↓↓↓

『見出し付き囲い枠-その2』の幅の調節は?(枠の幅を狭くしたい、枠を中央にしたい・・)





以上、アメブロ便利技でした。


LIDS澄川・ライフデザインスクール
川上 雄大
いいね!(233)  |  コメント(57)  |  リブログ(0)