LEGEND 変わろう。変わらないために。
「なりたい自分」に、なれる女性を増やしたい！
ブランディングプロデューサーの櫻井圭子です。
本日はアメブロの記事の中で使える囲み枠線の作り方というお役立ち情報をお届けします！
コピペ対応のかわいい配色サンプル付きですよ！
スマホアプリで使う場合の説明＆段々にならない改行の仕方も説明しています。
アメブロの記事の中での囲み枠線の使い方
①「ブログを書く」をクリック。
・新エディタの場合は、”HTML表示”にする。
・旧エディタの場合は、”タグ編集エディタ”にコピペしてください。
（旧エディタは2017年5月で廃止となりました。）
②下記のサンプルの中から好きな枠のサンプルを選んでコピペする。
③通常表示に戻して、本文を入力してください。
改行はShift+Enterで枠内で改行ができます。
（PCの機種によってはcommand＋Enter）
※枠の下に入力カーソルが進めない場合
HTML表示画面で、枠のタグの下に<br>といれてください。
<br>・・・改行
コピペで使えるアメブロの囲み枠線のサンプル一覧
直線の囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”background:#fff; padding:10px; border:2px solid #ffdbff;”>ここに本文を入力する。<br />改行はShift+Enter</div>
角丸の囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”padding: 10px; border: 2px solid #eddbff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;”>ここに本文を入力する。<br />改行はShift+Enter</div>
点線の囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”background:#fff; padding:10px; border:2px dashed #ffdbdb;”>ここに本文を入力する。<br />改行はShift+Enter</div>
水玉の囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”background:#fff; padding:10px; border:3px dotted #ff0000;”>ここに本文を入力する。<br />改行はShift+Enter</div>
二重の囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”background:#fff; padding:10px; border:3px double#99ffff;”>ここに本文を入力する。<br />改行はShift+Enter</div>
中が塗りつぶされてる四角い囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”background:#ffd6ea; padding:10px; border:none;”>ここに本文を入力する。 <br />改行はShift+Enter</div>
中が塗りつぶされてる角丸の囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”background: #ffeaff; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;”>ここに本文を入力する。<br />改行はShift+Enter</div>
見出し付きの囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”background: #ff7fbf; border: 1px solid #ff7fbf; padding-left: 10px;”><span style=”color: #ffffff; font-weight: bold;”>■ここにタイトルを入力する</span></div><div style=”border: 1px solid #ff7fbf; padding: 10px;”>ここに本文を入力する。<br />改行はShift+Enter</div>
タイトルがはみ出てる直線の囲み枠線
■このタグをコピペする
<fieldset style=”border:2px solid #ff6699;”><legend><span style=”font-weight:bold;”>■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br />改行はShift+Enter</fieldset>
タイトルがはみ出てる二重の囲み枠線
■このタグをコピペする
<fieldset style=”border:3px double #ff6699;”><legend><span style=”font-weight:bold;”>■ここにタイトルを入力する</span> </legend>ここに本文を入力する。<br />改行はShift+Enter</fieldset>
シンプルな影付きの囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;”>ここに本文を入力する。<br>
改行はShift+Enter</div>
グラデーションと影付きで立体的な囲み枠線（角丸）
改行はShift+Enter
■このタグをコピペする
<div style=”background-image:linear-gradient(#ffd6ea,#ffe0ef,#ffeff7,#ffe0ef,#ffd6ea);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>
※グラデーションと影はつけすぎるとダサくなってしまいますので、あくまでさりげなくがポイントです！
ポイント付きの付箋風オシャレ囲み枠線
改行はShift+Enter
■このタグをコピペする
<div style=”border: #ffb2d8 solid 1px; border-left: #ffb2d8 solid 13px; padding: 10px; background: #fffff9; “>
ここに本文を入力する。<br>
改行はShift+Enter</div>
スマホアプリで囲み枠線を使う方法を解説
）ト！
】囲み枠線のタグの解説
<div style=”background:#fff; padding:10px; border:2px solid #ffdbff;”>ここに本文を入力する。<br />改行はShift+Enter</div>
background：背景色
padding：枠と文字の間の隙間の幅
border：線の太さ、種類、色を指定
・線の種類
→solid…直線／double…二重線／dashed…破線／dotted…水玉線
#fff、#ffdbffなどは色になります。
色を変更したい場合は、こちらのサイトを参考にしてください。
原色大辞典
ポイント
”;”で閉じるのを忘れないようにしましょう。
タグは1文字でも消えてしまうときちんと表示されなくなってしまうので、気をつけてくださいね。
うまく表示されない場合はコメントにてお知らせください
というわけで、アメブロの記事の中で使える囲み枠線の作り方（コピペ対応かわいい配色サンプル付き）でした♪
コメント＆シェア＆メッセージはどうぞお気軽にしていただけると、とっても嬉しいです
＼ブログで集客したい起業女子必見！ ／
ブログを24時間働く営業マンにするセミナー
自動集客の仕組みを理解してブログを24時間働く営業マンにしましょう！
プレミアムブログ集客プライベートレッスン
上質な空間で開催する、マンツーマン90分のブログ集客プライベートレッスン。
事前にヒアリングし、あなたにぴったりのレッスン内容に構成します。
さらに！嬉しいレッスン後2週間のメールフォロー付き！
はじめてLEGENDを使う人が知っておきたい5つのルール
|
|
|
|
LEGEND 関連ツイート
カラーはどちらも青で、LEGEND級の防御属性だ
…何故私はおじさん扱いされるのに向こうはおばさん扱いされないんだ！