この記事を書いた人

【わたたに行政書士法務事務所】 代表 綿谷 俊彦

皆さんのお役に立てるよう、ブログを書いています。

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

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

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

この記事を書いた人

【わたたに行政書士法務事務所】 代表 綿谷 俊彦

皆さんのお役に立てるよう、ブログを書いています。

いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

社長  綿谷 俊彦

行政書士として業務をただこなすのではなく、依頼者さまの想いを実現するために、「法」を分かりやすく伝え、使うようにいたしております。

一般的な行政書士よりも、幅広くさまざまな業務を取り扱っているのはそのためです。

行政書士法人 Zip国際法務事務所

地下鉄谷町線「谷町四丁目駅」から、徒歩3分です。谷町四丁目駅からは一直線ですが、上がる出口によって位置が異なります。お電話ください。くわしい道をお伝えいたします。

行政書士法人 Zip国際法務事務所
〒540-0012  大阪市中央区谷町2丁目5-4 エフベースラドルフ 701
TEL:06-6809-2755

受付時間:9:00-19:00
定休日:土日(緊急対応可)