囲み枠があると記事が見やすいですよね。

わかってはいるけど、どうやって作ればいいかわからないという方もいらっしゃるでしょう。

 

そこで、基本の囲み枠の例をいくつかあげてみました。

 

一度作っておいて下書きとして保存しておくと、次からはコピペするだけで使えるので便利です。

 

もし囲み枠を作るのに時間がかかり過ぎるようでは何のためにブログを書いているの？ということにもなってしまいますので、無理のない程度に活用できるといいですよね。

 

 

１．HTML表示画面にする

 

まずは、いつも記事を書いている「通常表示」画面ではなく、お隣の「HTML表示」画面にします。

 

「このHTML表示」タブをクリックしてくださいね。

 

 

 

そして、下に書いてあるタグをコピーして、HTML表示画面の方にペースト。

 

 

 

 

 

 

それでは以下が囲み枠のタグになります。

 

枠の角が曲線で点線（複数行）

 

 

 

 

これがタグです↓

 

 

「ここに文章を入力」というところに、書きたいことを書いてください。

 

 

*****

 

<br />は改行のこと。

 

改行したい場合は、shiftキーとenterキーを同時に押して改行

 

もしくは、

<br />ここに文章を入力

<br />ここに文章を入力

<br />ここに文章を入力

 

こんな感じで増やしていってくださいね。

 

*****

 

枠の角を直角にしたい場合

 

では、角が直角の場合はどうすればいいのでしょうか？

 

 

先程のタグの赤字部分↓

 

 

 

「border-radius: 10px; 」

 

これが角丸指定ですので、これを消してください。

 

こうなりました。↓

 

 

 

線のタイプを変えたい場合

 

線を変えたい場合はこちらです。

 

 

先程のタグの赤字部分↓

 

 

 

この赤字部分を置き換えてください。以下基本のみ書いておきますね。

• dotted　　点線（丸い点線）
• solid　　実線
• double　　二重線

太さは緑字部分

 

1.5px、2px、4px

 

など。数字が大きくなるほど太くなっていきます。

 

実線の場合

 

 

タグ↓

 

 

 

タグ↓

 

 

二重線の場合

 

 

タグ↓

 

 

見出し付きの場合

 

 

タグ↓

 

 

色を変えたい場合

 

 

 

オレンジの部分

 

background:#ffffff

 

これが枠内背景の色コード。#ffffffはホワイトを表しています。

 

赤字の部分

 

2px dotted #ff007d

 

これが線の色コードです。

 

 

この6ケタの数字を替えていきます。

 

 

 

記事を書く画面の色指定のところで、お好きな色のカラーコードが何かを確認してくださいね。

 

 

 

 

 

そこに載っている以外の色がいい！という場合は、このサイトが便利です。

 カラーコード一覧表

 原色大辞典

 

 

 

いかがでしょうか？

 

長くなりましたが、これで基本は全て網羅されたはず。

 

 

 

でも囲み枠って、見やすくなるのはそうなのですが、例えばやり過ぎてしまうとか、それを作るのに時間がかかるとなると、ちょっと目的が違ってきてしまいますよね。

 

 

読者の方が読みやすく

充実した内容のもの

 

 

これが一番だと思います。

 

読者を惹きつけるのは結局、文章の内容、書き方、ご本人の魅力などなど．．．体裁ではないのです。