前回、ブログで書いた、囲み枠編の続編を今回は書いていこうと思います。
下のHTMLをコピペするだけで、色々な囲み枠が誰でもできます。
ブログで、大事なことを告知するときなど、以下のことを知っていると、きっと役に立ちます。
囲み枠
＜サンプル１（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background:#f7f7f7; padding:10px; border:3px dotted #ffb6c1;">ここに本文を入力</div>
＜サンプル２（丸の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">ここに本文を入力</div>
囲み枠の色を変えるには？
囲み枠の色を変えるには、
<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">ここに本文を入力</div>
赤色と青色で書かれた部分を変更すると、囲み枠の色を変えることができます。
囲み枠の中の色を変えたいときは、#f7f7f7の部分を変更すると色を変えることができます。
囲み枠の外側の線を変えたいときは、#ffb6c1の部分を変更すると変えることができます。
基本的な色のカラーコード
基本的な色のカラーコードは以下になっています。
上述した箇所を変更すれば色を変えることができます。
黒･･･ #000000（black） 白･･･ #ffffff（white） 赤･･･ #ff0000（red） 青･･･#0000ff（ blue） 黄･･･#ffff00（ yellow） 緑･･･#008000（green） ピンク･･･#ffc0cb（ pink）
囲み枠サンプル例
＜サンプル１ 黄色+緑の線（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #ffff00; padding: 10px; border: 3px dotted #008000;">ここに本文を入力</div>
＜サンプル２ 白色+黒の線（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #ffffff; padding: 10px; border: 3px dotted #000000;">ここに本文を入力</div>
＜サンプル２ ピンク+赤の線（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #ffc0cb; padding: 10px; border: 3px dotted #ff0000;">ここに本文を入力</div>
カラーコードを知っていると様々な組み合わせが可能
上記以外のカラーコードを知っていると色鮮やかな様々な組み合わせも可能になります。
以下に、バリエーションを載せておきますので、気に入ったパターンがありましたら、ご活用ください。
＜サンプル１（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #99FFFF; padding: 10px; border: 3px dotted #CC99FF;">ここに本文を入力</div>
＜サンプル２（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #BBFF99; padding: 10px; border: 3px dotted #CCFFFF;">ここに本文を入力</div>
＜サンプル３（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #FFFFCC; padding: 10px; border: 3px dotted #FF9999;">ここに本文を入力</div>
＜サンプル４（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #FF99BB; padding: 10px; border: 3px dotted #CCFF33;">ここに本文を入力</div>
＜サンプル５（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #FF6666; padding: 10px; border: 3px dotted #FFCCCC;">ここに本文を入力</div>
＜サンプル６（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #CCFFEE; padding: 10px; border: 3px dotted #00FF66;">ここに本文を入力</div>
＜サンプル７（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #EEFFCC; padding: 10px; border: 3px dotted #66FF00;">ここに本文を入力</div>
＜サンプル８（四角の囲み枠）＞
下のコードをコピーして、ブログの文章を書くところに貼り付けてください。
<div style="background: #FFCCEE; padding: 10px; border: 3px dotted #FF3399;">ここに本文を入力</div>
まとめ
今回は、前回に記載した内容に引き続き、見やすいブログに必須の簡単な囲み枠のテクニックをご紹介しました。
色を種類を変えるだけで、多種多様な囲み枠を使用することができます。
情報発信をするためのブログツールは沢山ありますので、ブログを使って集客や情報発信を考えている方の参考になれば幸いです。