PCインストラクターの川上雄大です。
以前、『アメブロ 記事内に枠で囲む方法』をアップして、いろんな方にご紹介されたり、使ったよ～、というご報告をいただいたりしました。
そして、次のコメントまでいただきました↓↓↓
33. こんにちは
ブログに枠をつける！
今日やってみたら、できました(^O^)/
綺麗にできました♪
ありがとうございます♪♪♪
お願いがあります―リクエスト―です！
薄いグレーに薄いピンクの線で囲みたいのですが、線の種類のように、色の種類も教えてください(^人^)
ぜひぜひ、よろしくお願いたします！
ホンロンさん
ブログに枠をつける！
今日やってみたら、できました(^O^)/
綺麗にできました♪
ありがとうございます♪♪♪
お願いがあります―リクエスト―です！
薄いグレーに薄いピンクの線で囲みたいのですが、線の種類のように、色の種類も教えてください(^人^)
ぜひぜひ、よろしくお願いたします！
ホンロンさん
そして、「記事にしますね～」と返信していましたので、今日はリクエストにお答えいたしますね（＾ｕ＾）
薄いグレーに薄いピンクの線の囲み枠
まず、
「薄いグレーに薄いピンクの線で囲みたい」というご要望について
【うすいグレーに薄いピンクの線（四角）】
枠内の記事本文
<div style="background:#f7f7f7; padding:10px; border:3px dotted #ffb6c1;">枠内の記事本文</div>【うすいグレーに薄いピンクの線（角丸）】
（ただし、角丸はIE8以前だと丸く見えませんのでご注意を）
枠内の記事本文
<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</div>
こんな感じでしょうか。
背景の薄いグレーのカラーコードは「#f7f7f7」
線の薄いピンクは「#ffb6c1」lightpinkを使っています。
また、別の色にしたいときは、赤色の部分↓を好きな色に変更するとよいです。
<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</div>
色の種類
･･･で、色の種類ですが･･･
代表的な色は
黒･･･ #000000（black）
白･･･ #ffffff（white）
赤･･･ #ff0000（red）
青･･･#0000ff（ blue）
黄･･･#ffff00（ yellow）
緑･･･#008000（green）
ピンク･･･#ffc0cb（ pink）
とあります。
「色見本」とか「カラーコード」でググると、
た～くさんありますが、その一部をこちら↓で表示しておきますね^^!
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0000 | 990000 | 660000 |
| FFDDCC | FFBB99 | FF9966 | FF6633 | FF3300 | CC3300 | 993300 | 661100 |
| FFEECC | FFCC99 | FFBB66 | FF9933 | FF6600 | CC5500 | 994400 | 662200 |
| FFEECC | FFDD99 | FFCC66 | FFBB33 | FF9900 | CC6600 | 995500 | 663300 |
| FFFFCC | FFEE99 | FFDD66 | FFCC33 | FFCC00 | CC9900 | 996600 | 664400 |
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 | 999900 | 666600 |
| FFFFCC | EEFF99 | DDFF66 | CCFF33 | CCFF00 | 99CC00 | 669900 | 446600 |
| EEFFCC | DDFF99 | CCFF66 | BBFF33 | 99FF00 | 66CC00 | 559900 | 336600 |
| EEFFCC | CCFF99 | BBFF66 | 99FF33 | 66FF00 | 55CC00 | 449900 | 226600 |
| DDFFCC | BBFF99 | 99FF66 | 66FF33 | 33FF00 | 33CC00 | 339900 | 116600 |
| CCFFCC | 99FF99 | 66FF66 | 33FF33 | 00FF00 | 00CC00 | 009900 | 006600 |
| CCFFDD | 99FFBB | 66FF99 | 33FF66 | 00FF33 | 00CC33 | 009933 | 006611 |
| CCFFEE | 99FFCC | 66FFBB | 33FF99 | 00FF66 | 00CC55 | 009944 | 006622 |
| CCFFEE | 99FFDD | 66FFCC | 33FFBB | 00FF99 | 00CC66 | 009955 | 006633 |
| CCFFFF | 99FFEE | 66FFDD | 33FFCC | 00FFCC | 00CC99 | 009966 | 006644 |
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | 009999 | 006666 |
| CCFFFF | 99EEFF | 66DDFF | 33CCFF | 00CCFF | 0099CC | 006699 | 004466 |
| CCEEFF | 99DDFF | 66CCFF | 33BBFF | 0099FF | 0066CC | 005599 | 003366 |
| CCEEFF | 99CCFF | 66BBFF | 3399FF | 0066FF | 0055CC | 004499 | 002266 |
| CCDDFF | 99BBFF | 6699FF | 3366FF | 0033FF | 0033CC | 003399 | 001166 |
| CCCCFF | 9999FF | 6666FF | 3333FF | 0000FF | 0000CC | 000099 | 000066 |
| DDCCFF | BB99FF | 9966FF | 6633FF | 3300FF | 3300CC | 330099 | 110066 |
| EECCFF | CC99FF | BB66FF | 9933FF | 6600FF | 5500CC | 440099 | 220066 |
| EECCFF | DD99FF | CC66FF | BB33FF | 9900FF | 6600CC | 550099 | 330066 |
| FFCCFF | EE99FF | DD66FF | CC33FF | CC00FF | 9900CC | 660099 | 440066 |
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC00CC | 990099 | 660066 |
| FFCCFF | FF99EE | FF66DD | FF33CC | FF00CC | CC0099 | 990066 | 660044 |
| FFCCEE | FF99DD | FF66CC | FF33BB | FF0099 | CC0066 | 990055 | 660033 |
| FFCCEE | FF99CC | FF66BB | FF3399 | FF0066 | CC0055 | 990044 | 660022 |
| FFCCDD | FF99BB | FF6699 | FF3366 | FF0033 | CC0033 | 990033 | 660011 |
6桁の英数字の前に「＃（シャープ）」をお忘れなく！
ちなみに･･･
上↑の表の作り方はこちらの記事『記事内でイベントの告知などを見やすくするための表の作り方』を見ていただけるとよいですよ^^
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大