コピペで使える

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

mba15_gori_tp_v

囲み枠とは?
ブログを見やすくするための必須テクニックです。
下のHTMLをコピペするだけで、こんな囲み枠が誰でもできます。
大事なことやタイトルをお知らせするときに重宝します!

囲み枠編

<<サンプル例>>

ここに文章を入れる

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

<div style="background:#ffeeee; padding:10px; border:2px solid #ff0000;">
ここに文章を入れる</div>

<<サンプル例>>

ここに文章を入れる

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

<div style="background:#bfffdf; padding:10px; border:2px dotted #00bf00;">
ここに文章を入れる</div>

<<サンプル例>>

ここに文章を入れる

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

<div style="background:#eeeeff; padding:10px; border-radius: 10px; 
border: 2px dotted #0000ff;">ここに文章を入れる</div>

<<サンプル例>>
薄いピンク

ここに文章を入れる

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

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

複数行の囲み枠

複数行使って囲み枠を使いたい場合は、以下のように入力するとできるようになります。
<<サンプル>>

○○○
○○○
○○○
○○○
○○○

 

<div style="background-image:linear-gradient(#f7fbfc,#d9edf2,#add9e4);background-color:#eeffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #333333; box-shadow: 5px 5px 5px #AAA;">○○○
○○○
○○○
○○○
○○○</div>

<<サンプル>>

○○○
○○○
○○○
○○○
○○○

 

<div style="background-image:linear-gradient(#ffeeee,#ffdddd,#ff9999);
background-color:#ffeeee; padding:10px; 
width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #ff0000; 
box-shadow: 5px 5px 5px #AAA;"> ○○○
○○○
○○○
○○○
○○○</div>

囲み枠まとめ

PAK58_kiokuyorikiroku_TP_V
今回は、見やすいブログに必須の簡単な囲み枠のテクニックをご紹介しました。
上記以外にも、多種多様な色や形も入力を変えるだけで使用することができます。

ワードプレスやアメブロ等、情報発信をするためのツールは沢山ありますので、自身が一番使いやすいものから使っていくことも良い選択肢かもしれません。

ブログを使って集客や情報発信を考えている方の参考になれば幸いです。

関連記事

最近の記事

  1. 「帰化する」とはどういう意味?

  2. 国籍証明書とは?中国人の方が帰化する時に必要な書類の1つ

  3. 帰化申請にかかる費用について色々考えてみました。

  4. 帰化したいけど、帰化とは何か?を知らない方へ、帰化申請の方法を紹介します

  5. 建設業許可に必要な専任技術者一覧表について解説