ブログの記事内に枠で囲む方法（囲い枠・囲み枠・枠囲い）

囲い枠・囲み枠・枠囲いを使うと、記事内で目立たせることができますものね^^!

色んなパターンの囲い枠をのせておきますので、お好きなのをご自由にお使いくださいませ。

また、ご自分でご自由に色などを変更して、オリジナルの囲い枠を使ってもいいですね！

 

１．【むらさき（四角）】

 

<div style="background:#eeeeff; padding:10px; border:2px dotted #0000ff;">枠内の記事本文</div>


---

２．【むらさき（角丸）】

角を丸くするには、「border-radius: 10px;」を追加すればよいだけですので。（ただし、角丸はIE8以前だと丸く見えませんのでご注意を！）
（角を丸くするのに、もっと万全を期したい方は下の補足1を）

 

<div style="background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;">枠内の記事本文</div>

---

３．【ぴんく（四角）】

 

<div style="background:#ffeeee; padding:10px; border:2px dotted #ff0000;">枠内の記事本文</div>

---

４．【ぴんく（角丸）】

 

<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000;">枠内の記事本文</div>


---

５．【みどり（四角）】

 

<div style="background:#bfffdf; padding:10px; border:2px dotted #00bf00;">枠内の記事本文</div>

---

６．【みどり（角丸）】

 

<div style="background:#bfffdf; padding:10px; border-radius: 10px; border: 2px dotted #00bf00;">枠内の記事本文</div>

---

７．【うすいグレー（四角）】

 

<div style="background:#f7f7f7; padding:10px; border:2px dotted #CCCCCC;">枠内の記事本文</div>

---

８．【うすいグレー（四角）（細い）】

 

<div style="background: rgb(247, 247, 247); padding: 10px; border: 1px dotted rgb(204, 204, 204);">枠内の記事本文</div>


---

９．【うすいグレー（角丸）－１】

 

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 2px dotted #CCCCCC;">枠内の記事本文</div>


---

１０．【うすいグレー（角丸）－２】

 

<div style="background:#f9f9f9;padding:15px;border:3px dotted #999999;border-radius:10px;">枠内の記事本文</div>


---

さらに、枠に影をつけたいのであれば、「box-shadow: 5px 5px 5px #999;」を追加すればできます。↓↓↓（ただし、IE8以前だと影は見えませんのでご注意を）

１１．【ぴんく（角丸）（影つき）】

 

<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000; width: auto; margin-right:6px; box-shadow: 5px 5px 5px #999;">枠内の記事本文</div>


※width:auto; と指定すれば、ブラウザ画面に合わせて横幅が変化するリキッドデザインにすることができます。

---

１２．【うすいグレー（角丸）（影つき）】

 

<div style="background:#f7f7f7;padding:10px;width: auto;margin-right:6px;border-radius: 10px;box-shadow: 5px 5px 5px #AAA;border: 2px dotted #CCCCCC;">枠内の記事本文</div>

※width:auto; と指定すれば、ブラウザ画面に合わせて横幅が変化するリキッドデザインにすることができます。

---

１３．【うすいグレーに薄いピンクの線（四角）】

 

<div style="background:#f7f7f7;padding:10px;border:3px dotted #ffb6c1;">枠内の記事本文</div>


---

１４．【うすいグレーに薄いピンクの線（角丸）】
（ただし、角丸はIE8以前だと丸く見えませんのでご注意を）

 

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</div>

---

１５．【角丸の実線】

 

<div style="padding:10px;border-radius: 5px;border: 2px solid #ff0000;">枠内の記事本文</div>

---

１６．【角丸の二重線】

 

<div style="padding:10px;border-radius: 10px; border: 5px double #0000ff;">枠内の記事本文</div>

---

１７．【角丸の点線】

 

<div style="padding:10px;border-radius: 20px; border: 3px dotted #00ff00;">枠内の記事本文</div>


---

１８．【角丸の水色二重線（影つき）】

 

<div style="border: #b0e0e6 3px double; padding: 6px; background-color: #ffffff; margin: 5px; color: #333333; border-radius: 10px; box-shadow: 5px 5px 5px #AAAAAA"><p><strong>タイトル</strong></p><p>本文１<br>本文２<br>本文３</p><p>本文４<br>本文５</p></div>

One Point!
実線 → solid
点線 → dotted
破線 → dashed
二重線 → double
線なし → none

---

１９．【ぴんく（角丸）（影つき）（背景グラデーション）】
（IE10以降で有効）

（画像表示↓）

（現在のブラウザ表示↓）

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

---

２０．【ぴんく（角丸）（影つき）（背景グラデーション）】
（IE10以降で有効）

（画像表示↓）

（現在のブラウザ表示↓）

 

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


---

２１．【ぴんく（角丸）（影つき）（背景グラデーション）】
（IE10以降で有効）

（画像表示↓）

（現在のブラウザ表示↓）

 

 

---

２２．【水色（角丸）（影つき）（背景グラデーション）】
（IE10以降で有効）

（画像表示･･･IE10以降）

（現在のブラウザ表示↓）

 

 

---

２３．【枠の見出し付（フィールドセット枠）】

◆枠の見出し

1）枠内の記事本文１
2）枠内の記事本文２
3）枠内の記事本文３

 


<fieldset><legend><strong>◆枠の見出し</strong></legend>1）枠内の記事本文１<br>2）枠内の記事本文２<br>3）枠内の記事本文３</fieldset>

 

＜補足1＞
角を丸くするのに、「border-radius」を追加するだけでよい、と書きましたが、

-webkit-border-radius: 10px;  /* Safari,Google Chrome用に */
-moz-border-radius: 10px;      /* Firefox12まで */
border-radius: 10px;           /* Firefox13以降 */

と万全を期して、

２４．【ぴんく（角丸）】

 

<div style="background:#ffeeee; padding:10px; border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border: 2px dotted #ff0000;">枠内の記事本文</div>

 

を使用してもOKですね！

 

２５．【レインボー囲み枠】

需要あるかわかりませんが･･･
このようなレインボー囲み枠をやってみたい方はこちらになります^^
（IE10以降で有効）

（画像表示↓）

（現在のブラウザ表示↓）

 

 

定型の囲み枠を簡単に挿入する方法はないんですか？
というご質問をいつもいただきますもので・・・

2014年8月28日にアメブロで書いた記事

【グーグルクロム限定】定型の囲み枠を簡単に挿入するには（Firefoxの追記有り）

をこちらでも書いておきます。

ご使用のブラウザがインターネットエクスプローラー（IE）ではなく、グーグルクロム（Google Chrome）になりますが。
（ファイヤーフォックス（Firefox）の方は、最後の方の＜追記２＞をご覧くださいませ。）

 

実は、グーグルクロムには、拡張機能というのがあります。

拡張機能を入れることで、自分好みの設定ができるようになっています。

ここでは、ブログでいつも記事下に定型の囲み枠を簡単に挿入する拡張機能をお伝えします。

今回お伝えする拡張機能は、「Insert Text」という機能です。

まず、Insert Text をインストールします。

「新しい拡張機能の確認」が表示されます。

 

「はい、この拡張機能を信頼します。」をクリックします。

 

 

インストールが終わると、このような画面が表示されます。

 

 

右上を見ると、「CHROMEに追加済み」と表示されます。

 

 

一度、ご自分のブログか、マイページを開いてみます。

すると、右上に「Insert Text Options」というボタンができていますので、そのボタンをクリックします。

 

定型文を入れる画面が表示されます。

 

 

「Create Text」ボタンをクリックします。

 

 

そして、タイトルとタグを入力（またはコピペ）します。

 

 

ここでは、こちらの記事の中から、

【続々編】見出し付きの囲い枠（角を丸く・背景グラデーション・枠に影・文字に影）

この囲い枠をコピペしてみました。

<div style=”border:1px solid #3b5998; margin:0 8px; padding:0;border-radius:5px; box-shadow:#cccccc 3px 3px 3px;”><p style=”margin:0; padding:3px 12px; background:#3b5998; color:#ffffff;font-weight:bold;text-shadow: 1px 1px 3px #000;”>■タイトル■</p><div style=” font-size:0.85em;padding:12px;”>１．ここに本文<br>２．ここに本文<br>３．ここに本文</div></div>

あとは、左下の「Save」ボタンを押します。

 

 

すると、左側に作成した定型文の見出しが表示されます。

これで完成です。

 

 

あとは、「記事を書く」で、右クリックして、メニューを表示します。

 

すると、「InsertText」－「見出し付き囲み枠」が表示されますので、クリックしてあげます。

 

 

すると、このように囲い枠がバシッと表示されます。

 

 

そう、Facebook Blue（カラーコードは#3b5998）の見出し付き囲み枠がこのように↓↓↓

 

いかがだったでしょうか？

ぜひ、グーグルクロムをご使用の方は、使ってみるとよいですね。

 

＜注意！＞

クロムの拡張機能はとても便利で、他にも色んな機能があります。

しかし、拡張機能を入れすぎると動作が重くなるので、入れすぎには注意してください！

＜追記１＞

グーグルクロムを使いたくなった方は、こちらの記事をご覧になって、インストールされるとよいですね↓↓↓

Google Chrome（グーグルクロム）のダウンロードとインストール

＜追記２＞

やっぱり私はきつねうどん派･･･

じゃなくて、きつね派･･･Firefoxを使いたい･･･

という方は、十勝のこちらの方をご覧くださいませ～↓↓↓