コピペで使える

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

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. 建設業の専任技術者を変更する時の手続きについて解説

  3. 建設業許可を取得する際に定款で注意すべきこと

  4. 特区民泊の許可に必要な消防法令適合通知書について

  5. 経営業務の管理責任者(常勤役員等)とは?証明書の書き方も徹底解説