こんにちは!
ブログコンサルタントの櫻井圭子です。

 

初めましての方はよろしければこちらも読んで下さいね顔

生い立ちから起業までのヒストリー

 

 

 

 

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

 

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

 

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

 

◆現在募集中のメニュー まじかるクラウンブログで集客する方法をお伝えしています。
▶︎▶︎▶︎アメブロ丸わかりセミナー
▶︎▶︎▶︎特製レジュメ付き!ブログ個別コンサル
▶︎▶︎▶︎LINE@リッチメニュー制作

初心者歓迎ハート難しい専門用語を使わずに分かりやすくお伝えしていますハート

 

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

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

 

・通常表示から、”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時間働く営業マンにするセミナー
◆ 個別ブログコンサル▶︎▶︎▶︎特製レジュメ付き!ブログ個別コンサル
◆ お問い合わせ・ご質問はお気軽にどうぞ▶︎▶︎▶︎お問い合わせフォーム