面白い調節を集めました♪ぐ～ぐぐ～♪

こんにちは、パソコンワンポイントレッスン！パソコンインストラクターの川上です。

※追記
・iPhone（スマホ）から枠を作る方法はこちらをご覧くださいませ→『』
・出演情報のテンプレート枠はこちらをご覧くださいませ→『』

●　アメブロ　記事内に枠で囲む方法（囲い枠・囲み枠・枠囲い）

いつも私の記事をご覧になっていただいている（きっと…、多分…^^;）読者の方から、次のご質問をいただきました。



って･･･

↑↑↑このような枠のことですよね～^^!

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


私も勇気をもって、お答えしたいと思います^^
ご質問ありがとうございます！



まず、この枠はどうやって作ったか、というと･･･

１．「ブログを書く」で「HTML表示」または「HTMLタグを表示」をクリックします。
（「タグ編集エディタ」の場合はそのまま）

※ご自分の利用しているエディタが何かがわからない場合は、こちらの記事『』をご参照くださいませ。）


■新エディタの場合

■標準エディタの場合

 
■タグ編集エディタの場合


■旧エディタの場合

（↑2017年5月8日をもって《旧エディタ》の利用は停止になります。→『』）


２．次のタグ（HTMLソース or HTMLタグ）をコピーします。



３．「HTML表示」or「HTMLタグを表示」内で貼り付け（ペースト）します。
（「タグ編集エディタ」の場合はそのまま、貼り付けます）

４．「通常表示」or「タグの非表示」に切り替えて、「枠内の記事本文」を消して、本文を書きます。
（「タグ編集エディタ」の場合はそのまま、そこで編集します）

■新エディタの場合

■標準エディタの場合

■旧エディタの場合



すると、このようなピンク色の枠ができているはずです↓↓↓



以上ですが、要は貼り付ける場所を間違えないことです！
（［タグ編集エディタ］の場合は、そのままタグを貼り付けて編集します。）


それから、枠囲いのタグをいくつか用意しておきますので、そのまま使いたいのがあれば、ご利用ください^^!


【むらさき（四角）】



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


複数行ほしい方はこちら↓

<div style="background:#eeeeff; padding:10px; border:2px dotted #0000ff;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

【むらさき（角丸）】

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



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


複数行ほしい方はこちら↓

<div style="background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

【ぴんく（四角）】



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


複数行ほしい方はこちら↓

<div style="background:#ffeeee; padding:10px; border:2px dotted #ff0000;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

【ぴんく（角丸）】



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


複数行ほしい方はこちら↓

<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

【みどり（四角）】



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

複数行ほしい方はこちら↓

<div style="background:#bfffdf; padding:10px; border:2px dotted #00bf00;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

【みどり（角丸）】



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


複数行ほしい方はこちら↓

<div style="background:#bfffdf; padding:10px; border-radius: 10px; border: 2px dotted #00bf00;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

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



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


複数行ほしい方はこちら↓

<div style="background:#f7f7f7; padding:10px; border:2px dotted #CCCCCC;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>


【うすいグレー（四角）（影つき）】



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

---

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


複数行ほしい方はこちら↓

<div style="background: rgb(247, 247, 247); padding: 10px; border: 1px dotted rgb(204, 204, 204);">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

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



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


複数行ほしい方はこちら↓

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 2px dotted #CCCCCC;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

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



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


複数行ほしい方はこちら↓

<div style="background:#f9f9f9;padding:15px;border:3px dotted #999999;border-radius:10px;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

さらに、枠に影をつけたいのであれば、「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><br>


複数行ほしい方はこちら↓

<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000; width: auto; margin-right:6px; box-shadow: 5px 5px 5px #999;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

※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><br>


複数行ほしい方はこちら↓

<div style="background:#f7f7f7;padding:10px;width:auto;margin-right:6px;border-radius:10px;box-shadow:5px 5px 5px #AAA;border:2px dotted #CCCCCC;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

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

---

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



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


複数行ほしい方はこちら↓

<div style="background:#f7f7f7;padding:10px;border:3px dotted #ffb6c1;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

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



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


複数行ほしい方はこちら↓

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

【角丸の実線】



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


複数行ほしい方はこちら↓

<div style="padding:10px;border-radius: 5px;border: 2px solid #ff0000;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

【角丸の二重線】



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


複数行ほしい方はこちら↓

<div style="padding:10px;border-radius: 10px; border: 5px double #0000ff;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>

---

【角丸の点線】



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


複数行ほしい方はこちら↓

<div style="padding:10px;border-radius: 20px; border: 3px dotted #00ff00;">・１行目<br>・２行目<br>・３行目<br>・４行目<br>・５行目</div><br>


---

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



<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><br>


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><br>

---

【ぴんく（角丸）（影つき）（背景グラデーション）】
（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><br>


---

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

（画像表示↓）

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

---

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

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

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








（背景をグラデーションにしたい場合は、こちらをご参照くださいませ。）

---

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

◆枠の見出し

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

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


枠線を変えるにはこちらをご覧ください↓




【注意！】
この<fieldset>タグには1つ注意点があります。
それはケータイやスマホ（モバイル版）では機能しないということです。（スマホもパソコン版なら大丈夫ですが…）

今この記事をケータイやスマホ（モバイル版）で見ているのであれば、上記の「◆枠の見出し」の部分は囲まれてませんよね。
記事内に<fieldset>タグを使って枠を表示すると、パソコンでは枠がきれいに表示されますが、ケータイやスマホ（モバイル版）から見ると枠なしになります。



あとは、ご自分のお好きな色で枠を作るといいですね^^





当ブログでも色関係の記事があります↓







（ちなみに、この↑↑↑見出しのタグは･･･

･･･になります。）


実はすでに、「この記事内に枠で囲む方法」を書いている方がいらっしゃいます。

ほんとに、たくさんたくさ～んいらっしゃると思います･･･

その中で、いつもご紹介していただいたり、コメントをしていただたり、とお世話になっている方の記事をご覧になってみてください。参考になりますので！


それは･･･

読まれるブログの育て方:西川先生の


になります。



＜追記１＞
この記事を
アメブロ × WordPressで成果を出す！ | あめつくさんがご紹介していただいています。
↓　↓　↓



＜補足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><br>

を使用してもOKですね！


＜参考＞
枠囲いの具体的な使い方はこちらの記事をご参照くださいませ。

---

また、このような↓見出し付きの囲い枠を作りたい方は

■タイトルはこちら■










 
（↑クリックすると記事に飛びます。）

 
（↑クリックすると記事に飛びます。）

 

<フェイスブックの青（Facebook Blue）の背景色（色コード　#3b5998、RGB(59,89,152)）>



こちらの記事をご覧ください↓

---

そうそう･･･

この囲み枠、囲い枠を使って、記事下に定型文を挿入したい、という方はこちらの記事をご参照くださいませ↓↓↓









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

（画像表示↓）

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






『』



＜追記３＞
ちなみに、ソース（HTMLタグ）を囲っている枠は



こちら↑になります。

＜追記４(2014.11.26)＞
この囲み枠の幅を狭くしたり、中央に配置したりするにはこちらの記事をご覧くださいませ↓↓↓

『』

＜追記５(2015.10.24)＞
あ、あとこんな枠もあんな枠もあります～～

『』

『』


＜追記６(2016.12.20)＞
『』




以上、アメブロ便利ワザでした。


LIDS札幌・ライフデザインスクール
川上 雄大