コピペで使える

ブログに必須!コピペで使える囲み枠・続編

pak145152451_tp_v
前回、ブログで書いた、囲み枠編の続編を今回は書いていこうと思います。
下のHTMLをコピペするだけで、色々な囲み枠が誰でもできます。
ブログで、大事なことを告知するときなど、以下のことを知っていると、きっと役に立ちます。

囲み枠

gori0I9A2979072100725_TP_V
<サンプル1(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background:#f7f7f7; padding:10px; border:3px dotted #ffb6c1;">ここに本文を入力</div>

<サンプル2(丸の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">ここに本文を入力</div>

囲み枠の色を変えるには?

PAK69_penwomotunotedesu20140312_TP_V
囲み枠の色を変えるには、

<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)

囲み枠サンプル例

pak153130225_tp_v
<サンプル1 黄色+緑の線(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #ffff00; padding: 10px; border: 3px dotted #008000;">ここに本文を入力</div>

<サンプル2 白色+黒の線(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #ffffff; padding: 10px; border: 3px dotted #000000;">ここに本文を入力</div>

<サンプル2 ピンク+赤の線(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #ffc0cb; padding: 10px; border: 3px dotted #ff0000;">ここに本文を入力</div>

カラーコードを知っていると様々な組み合わせが可能

上記以外のカラーコードを知っていると色鮮やかな様々な組み合わせも可能になります。
以下に、バリエーションを載せておきますので、気に入ったパターンがありましたら、ご活用ください。

<サンプル1(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #99FFFF; padding: 10px; border: 3px dotted #CC99FF;">ここに本文を入力</div>

<サンプル2(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #BBFF99; padding: 10px; border: 3px dotted #CCFFFF;">ここに本文を入力</div>

<サンプル3(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #FFFFCC; padding: 10px; border: 3px dotted #FF9999;">ここに本文を入力</div>

<サンプル4(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #FF99BB; padding: 10px; border: 3px dotted #CCFF33;">ここに本文を入力</div>

<サンプル5(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #FF6666; padding: 10px; border: 3px dotted #FFCCCC;">ここに本文を入力</div>

<サンプル6(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #CCFFEE; padding: 10px; border: 3px dotted #00FF66;">ここに本文を入力</div>

<サンプル7(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #EEFFCC; padding: 10px; border: 3px dotted #66FF00;">ここに本文を入力</div>

<サンプル8(四角の囲み枠)>

ここに本文を入力

下のコードをコピーして、ブログの文章を書くところに貼り付けてください。

<div style="background: #FFCCEE; padding: 10px; border: 3px dotted #FF3399;">ここに本文を入力</div>

まとめ

mba15_gori_tp_v
今回は、前回に記載した内容に引き続き、見やすいブログに必須の簡単な囲み枠のテクニックをご紹介しました。
色を種類を変えるだけで、多種多様な囲み枠を使用することができます。

情報発信をするためのブログツールは沢山ありますので、ブログを使って集客や情報発信を考えている方の参考になれば幸いです。

関連記事

最近の記事

  1. 特別高度人材(J-Skip)について解説します

  2. 自分で帰化申請をする際に行く、大阪法務局について

  3. 建設業許可(電気通信)工事担任者の資格について解説

  4. 介護分野の特定技能協議会の加入について

  5. 大阪で民泊許可をもらうために役立つエントリー