囲み枠とは？
ブログを見やすくするための必須テクニックです。
下のHTMLをコピペするだけで、こんな囲み枠が誰でもできます。
大事なことやタイトルをお知らせするときに重宝します！
ブログを見やすくするための必須テクニックです。
下の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>
囲み枠まとめ
今回は、見やすいブログに必須の簡単な囲み枠のテクニックをご紹介しました。
上記以外にも、多種多様な色や形も入力を変えるだけで使用することができます。
ワードプレスやアメブロ等、情報発信をするためのツールは沢山ありますので、自身が一番使いやすいものから使っていくことも良い選択肢かもしれません。
ブログを使って集客や情報発信を考えている方の参考になれば幸いです。