コピペで使える

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

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. 大阪で建設業許可(知事)申請を新規でする方に役立つエントリー

  2. 実務経験で建設業許可を複数業種を取得する方法について(一人親方の場合)

  3. 建設業許可の健康保険等の加入状況の書き方について解説

  4. 一軒家で民泊許可を取得する時の消防設備に関するポイントについて解説

  5. 経営業務の管理責任者(常勤役員等)の略歴書の書き方や記入例を解説