アメブロの記事の中で使える囲み枠線の作り方 | 東京のかわいいアメブロカスタマイズ

東京のかわいいアメブロカスタマイズ

かわいいアメブロカスタマイズで女性起業家を応援!
ブログ集客セミナー、ブランディングセミナーをしています。


テーマ:

「なりたい自分」に、なれる女性を増やしたい!
ブランディングプロデューサーの櫻井圭子です。

 

 

本日はアメブロの記事の中で使える囲み枠線の作り方というお役立ち情報をお届けします!

 

コピペ対応のかわいい配色サンプル付きですよ!

スマホアプリで使う場合の説明&段々にならない改行の仕方も説明しています。

 

アメブロの記事の中での囲み枠線の使い方

①「ブログを書く」をクリック。

 

・新エディタの場合は、”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>

 

 

 

お花。タイトルがはみ出てる直線の囲み枠線

■ここにタイトルを入力する ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

<fieldset style="border:2px solid #ff6699;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br />改行はShift+Enter</fieldset>

 

 

 

お花。タイトルがはみ出てる二重の囲み枠線

■ここにタイトルを入力する ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

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

 

 

 

スマホアプリで囲み枠線を使う方法を解説

スマホアプリで囲み枠を使うと改行がきちんとできないというコメントをいただきましたので、スマホでの使い方を説明させていただきますね!
 
スマホで改行すると段々になってしまうってきっとこの状態のことですよね!?
 
 
(スマホで囲み枠を使い、改行したら段々になった状態汗
 
 
スマホでも綺麗に改行できる方法をお伝えさせていただきますね!
 
 
①使いたい囲み枠線のタグをコピーする。
 
 
 
 
 
②HTML編集にしてペタッと貼り付け。
 
ここからがポイント!
PCで入力する時は、通常表示に戻すのですがスマホの場合はHTML表示のままで!!
改行して入れたい文章を入力していきます。
 
そしてさらにここがポイント!
HTML編集で改行しても、改行はされません。
改行したいところで<br>といれましょう。
<br>=改行です。
 
アメブロの枠をスマホアプリで入力する方法(改行)
 
 
<br>タグをいれるのを忘れると、改行したはずのところが半角スペースが空いて繋がっているはずです。笑
 
 
【残念な例犬?
 
(<br>タグを入れないと・・・。)
 
 
 
(こうなります・・・。笑)
 
 
 

囲み枠線のタグの解説

タグを理解して自分の好きなデザインに応用しよう♪

<div style="background:#fff; padding:10px; border:2px solid #ffdbff;">ここに本文を入力する。<br />改行はShift+Enter</div>

 

background:背景色

padding:枠と文字の間の隙間の幅

border:線の太さ、種類、色を指定

・線の種類

 →solid…直線/double…二重線/dashed…破線/dotted…水玉線

 

#fff、#ffdbffなどは色になります。

色を変更したい場合は、こちらのサイトを参考にしてください。

 

原色大辞典
矢印http://www.colordic.org/マウス

 

ポイントビックリマーク

”;”で閉じるのを忘れないようにしましょう。

タグは1文字でも消えてしまうときちんと表示されなくなってしまうので、気をつけてくださいね。

 

 

うまく表示されない場合はコメントにてお知らせくださいビックリマーク

 

というわけで、アメブロの記事の中で使える囲み枠線の作り方(コピペ対応かわいい配色サンプル付き)でした♪

 

コメント&シェア&メッセージはどうぞお気軽にしていただけると、とっても嬉しいですハート

 

 

\ブログで集客したい起業女子必見! /

 

パソコンブログを24時間働く営業マンにするセミナー
自動集客の仕組みを理解してブログを24時間働く営業マンにしましょう!
▶︎▶︎▶︎ブログ集客セミナーの詳細&お申し込みはこちらです。マウス



パソコンプレミアムブログ集客プライベートレッスン
上質な空間で開催する、マンツーマン90分のブログ集客プライベートレッスン。
事前にヒアリングし、あなたにぴったりのレッスン内容に構成します。
さらに!嬉しいレッスン後2週間のメールフォロー付き!
▶︎▶︎▶︎プライベートレッスンの詳細&お申し込みはこちらです。マウス
プレミアムブログ集客レッスンのご案内

櫻井圭子さんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント