囲み枠があると記事が見やすいですよね。
わかってはいるけど、どうやって作ればいいかわからないという方もいらっしゃるでしょう。
そこで、基本の囲み枠の例をいくつかあげてみました。
一度作っておいて下書きとして保存しておくと、次からはコピペするだけで使えるので便利です。
もし囲み枠を作るのに時間がかかり過ぎるようでは何のためにブログを書いているの？ということにもなってしまいますので、無理のない程度に活用できるといいですよね。
１．HTML表示画面にする
まずは、いつも記事を書いている「通常表示」画面ではなく、お隣の「HTML表示」画面にします。
「このHTML表示」タブをクリックしてくださいね。
そして、下に書いてあるタグをコピーして、HTML表示画面の方にペースト。
★どこにペーストするかというと、
↓これが「空白行」をあらわすのですが↓
<p>
</p>
この</p>の下の段にペーストするのがいいと思います。（「</div>」の下でもOK）
それでは以下が囲み枠のタグになります。
枠の角が曲線で点線（複数行）
枠の角が曲線で点線枠
ここに文章を入力
ここに文章を入力
＜改行したい場合は、shiftキーとenterキーを同時に押します＞
これがタグです↓
<div style="background:#ffffff; padding:10px; border-radius: 10px; border: 2px dotted
#ff007d;">ここに文章を入力
<br />ここに文章を入力
</div>
「ここに文章を入力」というところに、書きたいことを書いてください。
*****
<br />は改行のこと。
改行したい場合は、shiftキーとenterキーを同時に押して改行
もしくは、
<br />ここに文章を入力
<br />ここに文章を入力
<br />ここに文章を入力
こんな感じで増やしていってくださいね。
*****
枠の角を直角にしたい場合
では、角が直角の場合はどうすればいいのでしょうか？
先程のタグの赤字部分↓
<div style="background:#ffffff; padding:10px; border-radius: 10px; border: 2px dotted
#ff007d;">ここに文章を入力
<br />ここに文章を入力
</div>
「border-radius: 10px; 」
これが角丸指定ですので、これを消してください。
こうなりました。↓
<div style="background:#ffffff; padding:10px; border: 2px dotted
#ff007d;">ここに文章を入力
<br />ここに文章を入力
</div>
線のタイプを変えたい場合
線を変えたい場合はこちらです。
先程のタグの赤字部分↓
<div style="background:#ffffff; padding:10px; border-radius: 10px; border: 2px dotted
#ff007d;">ここに文章を入力
<br />ここに文章を入力
</div>
この赤字部分を置き換えてください。以下基本のみ書いておきますね。
- dotted
点線（丸い点線）
- solid 実線
- double 二重線
太さは緑字部分
1.5px、2px、4px
など。数字が大きくなるほど太くなっていきます。
実線の場合
実線1px・枠が直角
ここに文章を入力
ここに文章を入力
タグ↓
<div style="background:#ffffff; padding:10px; border: 1px solid
#ff007d;">実線1px<br>
ここに文章を入力 <br>
ここに文章を入力</div>
実線2px・枠が直角
ここに文章を入力
ここに文章を入力
タグ↓
<div style="background:#ffffff; padding:10px; border: 2px solid
#ff007d;">実線2px<br>
ここに文章を入力 <br>
ここに文章を入力</div>
二重線の場合
二重線4px
ここに文章を入力
ここに文章を入力
タグ↓
<div style="background:#ffffff; padding:10px;border: 4px double #ff007d;"><span style="font-weight:bold;">二重線4px</span><br>
ここに文章を入力<br>
ここに文章を入力</div>
見出し付きの場合
あいうえお
ここに文章を入力
ここに文章を入力
タグ↓
↓下記のタグをコピぺしてください↓
<div style="background:#bad3ff; border:1px solid #bad3ff; padding-left:10px;"><span style="color:#ffffff;"><span style="font-weight:bold;">あいうえお</span></span></div>
<div style="border:1px solid #bad3ff; padding:10px;">ここに文章を入力<br>
ここに文章を入力</div>
色を変えたい場合
<div style="background:#ffffff; padding:10px; border-radius: 10px; border: 2px dotted #ff007d;">ここに文章を入力
<br />ここに文章を入力
</div>
オレンジの部分
background:#ffffff
これが枠内背景の色コード。#ffffffはホワイトを表しています。
赤字の部分
2px dotted #ff007d
これが線の色コードです。
この6ケタの数字を替えていきます。
記事を書く画面の色指定のところで、お好きな色のカラーコードが何かを確認してくださいね。
そこに載っている以外の色がいい！という場合は、このサイトが便利です。
カラーコード一覧表
原色大辞典
いかがでしょうか？
長くなりましたが、これで基本は全て網羅されたはず。
でも囲み枠って、見やすくなるのはそうなのですが、例えばやり過ぎてしまうとか、それを作るのに時間がかかるとなると、ちょっと目的が違ってきてしまいますよね。
読者の方が読みやすく
充実した内容のもの
これが一番だと思います。
読者を惹きつけるのは結局、文章の内容、書き方、ご本人の魅力などなど．．．体裁ではないのです。
簡単にできる！起業初心者向け・ブログ作り 基本の10ステップ
