アメブロの記事の中で使える囲み枠線の作り方(見出し付き) | 金沢でしなやかに生きる♪夫婦円満な暮らし

金沢でしなやかに生きる♪夫婦円満な暮らし

金沢在住、40代主婦。夫婦二人暮らし。
美容皮膚科ナース。シンプルな暮らしやお金のこと、旅行、好きで続けているあれこれ。
金沢/キレイデザイン学(色彩心理×統計学)講師。
「少ないもので快適な暮らし」を提案する整理収納アドバイザー。


テーマ:

 

キレイデザイン学インストラクター
にしたにゆかりです。

キレイデザイン学の12色のブランドカラーで
囲み枠を作りたいときに使える
お役立ち情報をお届けします(*^-^)♪

□ シンプルな囲み枠線一覧ページはこちら


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

①ブログを書くをクリック

②HTML表示して


③使用したい枠色のサンプルを選んでコピペ

④通常表示に戻して、本文を入力する


※改行はShift+Enterで枠内で改行ができます。
(PCの機種によってはcommand+Enter)

※枠の下に入力カーソルが進めない場合
HTML表示画面で、枠のタグの下に<br>といれてください。
<br>・・・改行


12色の囲み枠サンプル一覧

 

(1)見出し付きの囲み枠線(RED)

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

 

■このタグをコピペする

<div style="background: #E94829; border: 1px solid #E94829; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #E94829; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

 (2)見出し付きの囲み枠線(RED ORANGE)

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

 

■このタグをコピペする 

<div style="background: #ED6D1F; border: 1px solid #ED6D1F; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #ED6D1F; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

(3)見出し付きの囲み枠線(ORANGE)

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

 

■このタグをコピペする 

<div style="background: #F08300; border: 1px solid #F08300; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #F08300; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

(4)見出し付きの囲み枠線(YELLOW)

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

 

■このタグをコピペする 

<div style="background: #FABE00; border: 1px solid #FABE00; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #FABE00; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

(5)見出し付きの囲み枠線(YELLOW GREEN)

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

 

■このタグをコピペする

<div style="background: #9DC815; border: 1px solid #9DC815; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #9DC815; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

 (6)見出し付き水玉の囲み枠線(GREEN)

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

 

■このタグをコピペする

<div style="background: #00A95F; border: 1px solid #00A95F; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #00A95F; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

 (7)見出し付きの囲み枠線(BLUE GREEN)

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

 

■このタグをコピペする

<div style="background: #2EB6AA; border: 1px solid #2EB6AA; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #2EB6AA; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

 (8)見出し付きの囲み枠線(TURQUOISE)

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

 

■このタグをコピペする 

<div style="background: #5DC2D0; border: 1px solid #5DC2D0; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #5DC2D0; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

(9)見出し付きの囲み枠線(BLUE)

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

 

■このタグをコピペする

<div style="background: #0075C2; border: 1px solid #0075C2; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #0075C2; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

 (10)見出し付きの囲み枠線(INDIGO)

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

 

■このタグをコピペする

<div style="background: #004471; border: 1px solid #004471; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #004471; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

 (11)見出し付きの囲み枠線(PURPLE)

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

 

■このタグをコピペする 

<div style="background: #B84C97; border: 1px solid #B84C97; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #B84C97; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

(12)見出し付きの囲み枠線(MAGENTA)

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

 

■このタグをコピペする 
<div style="background: #EB6EA5; border: 1px solid #EB6EA5; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #EB6EA5; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
 

 

 

うまく表示されない場合は

コメントにてお知らせください

 

キレイデザイン学のイベント、 

診断 お申込み受付中です(*^-^)♪

 

金沢・キレイデザイン学講師&整理収納アドバイザー 西谷ゆかりさんをフォロー

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

SNSアカウント

Ameba人気のブログ

Amebaトピックス