アメブロ記事にピンクレースのエレガントな
囲み枠をコピペで貼る方法をご紹介します星



本日ご紹介するのはこちらコチラ

0.2秒で女性の心を掴む世界観と
あなたを価値にするブランディング

売上upしたい女性のため
"あなただから"
と選ばれる戦略的SNSづくり

心を奪う世界観づくりの専門家
SNSデザインプロデューサー
豊田 純子

▶︎はじめましての方はこちら♡

 

 

心を奪う世界観づくりジュジュちゃん

ジュジュ
 

コピペで使えます!改行はEnterのみでOK!!スマホでの改行も楽ちんだよ♫

 

 

ご利用にあたってはご自由に使っていただけます♪

ただし転用・パクリ・二次利用などは禁止です!!

 

▶︎囲み枠の使い方はこちら

▶︎困った時やうまくいかない時はこちら

 

 

ピンクのグレースフラワーのお花が可愛い♡おしゃれなアメブロ囲み枠

 


 

シンプル・ゴールド枠の囲み枠

 

 

枠なしの囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:70%; ">
<div style="background:rgba(255,255,255,0.8); padding:10px;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

ゴールド太めの囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:70%; ">
<div style="background:rgba(255,255,255,0.8); padding:10px; border:3px solid  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:70%; ">
<div style="background:rgba(255,255,255,0.8); padding:10px; border:4px double  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

ゴールド枠線+フチありの囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png);padding:15px; background-repeat:repeat;  background-size:70%; ">
<div style="background:rgba(255,255,255,0.8);padding:7px;">
<div style="border:2px solid  #CEBB5B; padding:10px; padding-left:10px;">
<p style="margin: 0;">文字を入力</p></div></div></div>
<p>&nbsp;</p>

 

 

ゴールド二重線+フチありの囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:70%; ">
<div style="background:rgba(255,255,255,0.8);padding:7px;">
<div style="border:4px double  #CEBB5B; padding:12px; padding-left:10px;">
<p style="margin: 0;">文字を入力</p></div></div></div>
<p>&nbsp;</p>

 

 

カラー背景色の囲み枠

 

ベージュカメオ

ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:50%; ">
<div style="background:rgba(250,248,239,0.9); padding:10px; border:4px double  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

ミント

ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:50%; ">
<div style="background:rgba(235,246,248,0.9); padding:10px; border:4px double  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

ベビーピンク

ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:50%; ">
<div style="background:rgba(255,249,255,0.7); padding:10px; border:4px double  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

 

パープル

ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:50%; ">
<div style="background:rgba(247,239,255,0.7); padding:10px; border:4px double  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

くすみホワイト

ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:50%; ">
<div style="background:rgba(247,246,245,0.7); padding:10px; border:4px double  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

アイボリー

ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:50%; ">
<div style="background:rgba(250,247,238,0.7); padding:10px; border:4px double  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

くすみピンク

ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:50%; ">
<div style="background:rgba(234,216,216,0.7); padding:10px; border:4px double  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

ローズグレー

ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:50%; ">
<div style="background:rgba(234,216,227,0.7); padding:10px; border:4px double  #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

角丸・ゴールド枠の囲み枠

 

 

角丸枠なしの囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:70%; border-radius:10px;">
<div style="background:rgba(255,255,255,0.8); padding:10px;border-radius:8px;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

角丸ゴールド太めの囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png);padding:15px; background-repeat:repeat;  background-size:70%; border-radius:10px;">
<div style="background:rgba(255,255,255,0.8); padding:10px; border:3px solid #CEBB5B; border-radius:8px;">
<p style="margin: 1;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

角丸ゴールド二重線の囲み枠
文字を入力

 

<div style="background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png);padding:15px; background-repeat:repeat;  background-size:70%; border-radius:10px;">
<div style="background:rgba(255,255,255,0.8); padding:10px; border:4px double #CEBB5B; border-radius:8px;">
<p style="margin: 2;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

影付き・ゴールド枠の囲み枠

 

 

影付き枠なしの囲み枠
文字を入力

 

<div style=" box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:70%; border-radius:10px;">
<div style="background:rgba(255,255,255,0.8); padding:10px;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

影付きゴールド太めの囲み枠
文字を入力

 

<div style=" box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:70%; border-radius:10px;">
<div style="background:rgba(255,255,255,0.8); padding:10px; border:3px solid #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

影付きゴールド二重線の囲み枠
文字を入力

 

<div style=" box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:70%; border-radius:10px;">
<div style="background:rgba(255,255,255,0.8); padding:10px; border:4px double #CEBB5B;">
<p style="margin: 0;">文字を入力</p></div></div>
<p>&nbsp;</p>

 

 

影付きゴールド枠線フチありの囲み枠
文字を入力

 

<div style=" box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding:15px; background-repeat:repeat;  background-size:70%; border-radius:10px;">
<div style="background:rgba(255,255,255,0.8);padding:8px;">
<div style="border:2px solid #CEBB5B; padding:10px; padding-left:10px;">
<p style="margin: 0;">文字を入力</p></div></div></div>
<p>&nbsp;</p>

 

 

影付きゴールド二重線フチありの囲み枠
文字を入力

 

<div style=" box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://stat.ameba.jp/user_images/20230227/20/joujounet/a5/42/p/o0300030015248841665.png); padding: 15px ;background-repeat:repeat;  background-size:70%; border-radius:10px; ">
<div style="background:rgba(255,255,255,0.8);padding:8px;">
<div style="border:4px double #CEBB5B; padding:10px; padding-left:10px;">
<p style="margin: 0;">文字を入力</p></div></div></div>
<p>&nbsp;</p>

 

 

 


 

 

 

囲み枠の設置手順

 

 

1. デザインを選んでコードをコピーする

 

使いたい囲み枠のデザインを一覧から選んで
HTMLコードをコピーします。

 

囲み枠設置方法①コピーする

 

2. 記事作成でHTML画面にする

 

いつもブログを書く手順で
[ブログを書く]画面下の[HTML表示]に切替えます。

 

囲み枠設置方法②HTML表示にする


 

3. コードを貼付けて画面を戻す

 

①でコピーしたHTMLコードを貼付けます。

貼付けたら[通常表示]に戻します。

囲み枠設置方法③コピーしたコードを貼る


 

 設置の方法や困ったときにはこちらをCheck気づき

 

▶︎囲み枠を設置するやり方
▶︎改行したら枠が増えた!という時の対処法と元に戻す方法
▶︎囲み枠の色を変える方法

 

 

他にもおしゃれな囲み枠をご用意しています飛び出すハート

▶︎アメブロ見出し素材500選
▶︎\大人気♡/ 大人かわいい大理石と水玉の囲み枠
▶︎ダマスク柄の囲み枠
▶︎シンプルな囲み枠&枠線
▶︎タイトル付き囲み枠
▶︎ニュアンスカラーの囲み枠
 


 

ご利用にあたって

無断転載・パクリ・二次利用などは禁止です

※ ご自分のブログでコピペしての使用はOKです

※ この記事のコードをコピペして一部を変更して似たような記事を作成することも禁止です!!

※ 記事をご紹介いただく際は、出典元として当ブログのリンクをお願いします


 

\無料プレゼント中♡/

SNSで世界観をつくる8大プレゼント

ダイヤモンドインスタフォロワー1万人達成の秘訣
ダイヤモンドSNSで心を掴むColor印象シート
ダイヤモンド戦略的ブランディングWorkBook

  ↓  ↓  ↓  ↓  ↓

SNSで選ばれる世界観を作る無料プレゼント


画像をクリックしてね♡
LINE画面が表示されない方は@joujounetでID検索してね
(@も含めて検索してください)


 

 

 

 

Service

 

アメブロカスタマイズ/ライティング添削

ヘッダー/バナー/HP制作/インスタテンプレ作成

Instagramコンサル/Canva/LINEリッチメニュー 
Lステップ代行構築/LINE運用アドバイス

 

多岐にわたるSNSマーケティングをもとに
女性に響くデザインであなたらしさを叶えます♡

ハンドメイドやエステサロン、カフェ&レストラン
英語教室・アロマ・ネイル・婚活塾など

全国各地からご依頼・コンサルを受けあなたに
寄り添ったサポートをさせていただいております♡
 

 

 

\3人のママでも理想の働き方を手に入れた方法✨/

ただの主婦がWebデザイナーになった理由

 

\インスタはこちら♡Follow Me✨/

一瞬で心を奪うデザイン・ブランディング

 

LINE公式マーケティングやデザイン作りのヒントを発信♡

視線を集め心を奪う世界観のつくりかたホームページ/ジュジュネット

 

心ときめく食器とお花が作れるポーセラーツ&フラワーインテリア
JouJouetteの教室ブログはこちら♡

ポーセラーツ・フラワーインテリア教室ジュジュエッテのブログはこちら


Thank you for Reading

JOUJOUNET ダイヤモンドジュジュネット

▶︎お問合せ(LINE@ID → @joujounet )
▶︎Instagram  ▶︎Facebook  ▶︎HP