■アメブロ便利技■1

【むらさき（四角）】
複数行ほしい方はこちら↓

枠内の記事本文
複数行ほしい方はこちら↓
【むらさき（角丸）】

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

枠内の記事本文


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

【ぴんく（四角）】

枠内の記事本文



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

みどり（四角）】

枠内の記事本文



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



【みどり（角丸）】

枠内の記事本文




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



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

枠内の記事本文




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



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

枠内の記事本文





枠内の記事本文




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



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

枠内の記事本文




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



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

枠内の記事本文




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



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

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

枠内の記事本文




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


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

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

枠内の記事本文




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


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


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

枠内の記事本文




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




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

枠内の記事本文




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




【角丸の実線】

枠内の記事本文




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



【角丸の二重線】

枠内の記事本文




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



【角丸の点線】

枠内の記事本文




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



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

タイトル

本文１
本文２
本文３

本文４
本文５





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



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

（画像表示↓）
川上雄大のワンポイントレッスン！
（現在のブラウザ表示↓）

○○○
○○○
○○○
○○○
○○○




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


（画像表示↓）

川上雄大のワンポイントレッスン！
（現在のブラウザ表示↓）

○○○
○○○
○○○
○○○
○○○




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

（画像表示↓）
川上雄大のワンポイントレッスン！


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

○○○
○○○
○○○
○○○
○○○







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

（画像表示･･･IE10以降）
川上雄大のワンポイントレッスン！

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

○○○
○○○
○○○
○○○
○○○







（背景をグラデーションにしたい場合は、こちら『背景をグラデーションにするには（CSS3）･･･記事内の囲い枠やブログ背景をグラデーションに』をご参照くださいませ。）




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

◆枠の見出し
1）枠内の記事本文１
2）枠内の記事本文２
3）枠内の記事本文３

◆枠の見出し

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

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

fieldset（フィールドセット）タグの枠線を変えるには


【注意！】
この

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

今この記事をケータイやスマホ（モバイル版）で見ているのであれば、上記の「◆枠の見出し」の部分は囲まれてませんよね。
記事内に

タグを使って枠を表示すると、パソコンでは枠がきれいに表示されますが、ケータイやスマホ（モバイル版）から見ると枠なしになります。


ご自分のお好きな色を

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

色見本と配色サイト

WEB色見本 原色大辞典

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

この5つの色コードだけはメモメモしておくとよいですね！

色の種類も教えてください


この記事も参考にして！

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

この記事も参考にして！

･･･になります。）


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

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

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


それは･･･

読まれるブログの育て方:西川先生の
★文章をいろんな枠囲いで読まれやすくする方法 再アップ

になります。



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


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

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

と万全を期して、

【ぴんく（角丸）】

枠内の記事本文

枠内の記事本文

を使用してもOKですね！


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

アメブロ　記事中にメニューリンクを囲みたい



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

■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）

見出し付きの囲い枠

見出しその１
本文記事1
本文記事2
本文記事3



■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）

【続編】見出し付きの囲い枠 -その２

■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）


川上雄大のワンポイントレッスン
（↑クリックすると記事に飛びます。）

川上雄大のワンポイントレッスン
（↑クリックすると記事に飛びます。）


■タイトル■

【見出し１】
本文１

【見出し２】
本文２

【見出し３】
本文３

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



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

見出し付きの囲い枠

【続編】見出し付きの囲い枠 -その２

見つけた！早くも【見出し付き囲い枠】が･･･

見出し付き囲い枠のその後のご質問･･･

『見出し付きの囲い枠 -その２』の角を丸く

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


そうそう･･･

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

記事の下に囲い枠を作るには（手動方式・自動方式）

記事の下にあるシンプルなメニューバーはどのように･･･

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



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

（画像表示↓）
川上雄大のワンポイントレッスン！


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

○○○
○○○
○○○
○○○
○○○

○○○
○○○
○○○
○○○
○○○

『【便利技】レインボー囲み枠』



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

ここにソースを入力

こちら↑になります。

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

『囲い枠の幅の調節はどのようにしたらいいのでしょうか（枠の幅を狭くしたい、枠を中央にしたい・・）』

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

『記事下のいろんな囲み枠がありますね～』

『ただ今、募集中の講座・セミナー・イベントのご案内（記事下の囲み枠のタグ有）』


＜追記６(2016.12.20)＞
『茶色系・ベージュ系の囲み枠』




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


LIDS札幌・ライフデザインスクール
川上 雄大
囲み枠｜見出し付枠｜色コード｜メニューバー