みんなのCCT
コーチ、カウンセラー、セラピスト
OPEN DREAM STAGEプロデューサー関根です。
今回はアメブロの記事内で
オシャレに使える
・囲み枠線の設置方法
・囲み枠線の種類
をお伝えします。
アメブロの記事内に囲み枠線を入れる方法
①「ブログを書く」を押す。
②下記のHTMLをコピーする。
<div style="background:#FFF; padding:10px; border:2px solid #FF8000;">こちらに本文を入力してください。<br>
<br>
※囲み枠内で、改行をする場合<br>
Shift+Enter<br>
（PCの機種によってはcommand＋Enter）<br>
<br>
※囲み枠の下に入力カーソルが進まない場合<br>
HTML表示画面で<br>
<span style="background-color: rgb(255, 255, 255);"> 枠のタグの下に<br>
<br>を挿入する。</span></div>
③通常表示から➡HTML表示に切り替える
④コピーしたHTMLを貼り付ける。
⑤HTML表示から➡通常表示に切り替える
⑥本文に囲み枠が完成
囲み枠線の種類
下記の囲み枠線のHTML内の
#9FF781（カラーコード）を
変えるとお好きな変えることが出来ます。
お好きなカラーコードを探すには
下記のようなサイトから
探すのがとても便利です。
原色大辞典
https://www.colordic.org/
見本
直線の囲み枠線
下記をHTMLへ貼り付ける
<div style="background:#fff; padding:10px; border:2px solid #9FF781;">こちらに本文を入力する。<br />改行はShift+Enter</div>
見本
角丸の囲み枠線
下記をHTMLへ貼り付ける
<div style="padding: 10px; border: 2px solid #9FF781; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">こちらに本文を入力する。<br />改行はShift+Enter</div>
見本
点線の囲み枠線
下記をHTMLへ貼り付ける
<div style="background:#fff; padding:10px; border:2px dashed #9FF781;">こちらに本文を入力する。<br />改行はShift+Enter</div>
見本
水玉の囲み枠線
下記をHTMLへ貼り付ける
<div style="background:#fff; padding:10px; border:3px dotted #9FF781;">こちらに本文を入力する。<br />改行はShift+Enter</div>
見本
二重の囲み枠線
下記をHTMLへ貼り付ける
<div style="background:#fff; padding:10px; border:3px double#9FF781;">こちらに本文を入力する。<br />改行はShift+Enter</div>
見本
中が塗りつぶされている四角の囲み枠
下記をHTMLへ貼り付ける
<div style="background:#9FF781; padding:10px; border:none;">こちらに本文を入力する。 <br />改行はShift+Enter</div>
見本
中が塗りつぶされている角丸の囲み枠
下記をHTMLへ貼り付ける
<div style="background: #9FF781; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">こちらに本文を入力する。<br />改行はShift+Enter</div>
見本
こちらにタイトルを入力
見出し付きの囲み枠線
下記をHTMLへ貼り付ける
<div style="background: #9FF781; border: 1px solid #9FF781; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■こちらにタイトルを入力</span></div><div style="border: 1px solid #9FF781; padding: 10px;">こちらに本文を入力する。<br />改行はShift+Enter</div>
見本
下記をHTMLへ貼り付ける
<fieldset style="border:2px solid #9FF781;"><legend><span style="font-weight:bold;">こちらにタイトルを入力する</span> </legend> こちらに本文を入力する。<br />改行はShift+Enter</fieldset>
見本
下記をHTMLへ貼り付ける
<fieldset style="border:3px double #9FF781;"><legend><span style="font-weight:bold;">こちらにタイトルを入力する</span> </legend>こちらに本文を入力する。<br />改行はShift+Enter</fieldset>
見本
シンプルな影付きの囲み枠線
下記をHTMLへ貼り付ける
<div style="border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 3px 5px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>
見本
グラデーションと影付きで立体的な囲み枠線（角丸）
下記をHTMLへ貼り付ける
<div style="background-image:linear-gradient(#82FA58,#9FF781,#D8F6CE,#9FF781,#82FA58);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #ffcce5; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
見本
付箋風の囲み枠
下記をHTMLへ貼り付ける
<div style="border: #9FF781 solid 1px; border-left: #9FF781 solid 13px; padding: 10px; background: #fffff9; ">
ここに本文を入力する。<br>
改行はShift+Enter</div>
★★★2018年 講座、イベントのご案内★★★
●３月７日(水)15:00～18:00 いわき市内
参加費 ／２０００円
定員４名／残席２名
➡お申込みはコチラ
●３月８日(木)13:00～15:00
オンライン講座自宅にいながら
すぐに簡単に学べる講座です。
参加費 ／１０００円
定員４名／残席３名
➡お申込みはコチラ
●３月１８日(日)13:00～15:00
参加費 ／２０００円
定員４名／残席３名
●６月１０日(日)11:00～17:00
こころフェア出展者募集中
・ 出展者情報
・ 最新の癒やしグッツ、ツールの案内
・ イベントの案内
お得な情報が満載です。
・ 無料勉強会
・ 出展料の割引き
・ 先取り情報
お得な情報が満載です。
