アメブロ記事にダマスク柄のエレガントな
囲み枠をコピペで貼る方法をご紹介します
思わず二度見され一瞬で心を奪う
アメブロ＆インスタの世界観作り
自宅教室・サロンオーナー・ハンドメイド
女性のはじめての起業を
おしゃれに可愛くプロデュース♡
世界観をカタチにするSNSデザインプロデューサー
豊田 純子
▶︎はじめましての方はこちら♡
ジュジュ
コピペで使えます！改行はEnterのみでOK！！スマホでの改行も楽ちんだよ♫
ご利用にあたって
※ 無断転載・パクリ・二次利用などは禁止です！
※ ご自分のブログでコピペしての使用はOKです！
※ この記事のコードをコピペして一部を変更して似たような記事を作成することも禁止です！！
※ 記事をご紹介いただく際は、出典元として当ブログのリンクをお願いします。
記事に追加する方法はこちらを見てね。
囲み枠をアメブロ記事に設定する方法
アメブロカスタマイズリンク集
アメブロで使える枠線＆囲み枠一覧
大人かわいい囲み枠一覧
ダマスク囲み枠
● ダマスクブラック
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/2e/ed/p/o1080108015115893155.png); padding: 15px 15px;background-size: 180px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
● ダマスクグレー
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/32/c7/p/o1080108015115893157.png); padding: 15px 15px;background-size: 180px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
● ダマスクグレージュ
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/f7/56/p/o1080108015115893154.png); padding: 15px 15px;background-size: 180px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
● ダマスクホワイト
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/55/46/p/o1080108015115893160.png); padding: 15px 15px;background-size: 180px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
● ダマスクゴールド
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/c5/7f/p/o1080108015115893162.png); padding: 15px 15px;background-size: 180px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
● ダマスクベージュ
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/64/60/p/o1080108015115893150.png); padding: 15px 15px;background-size: 180px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
● ダマスクホワイトベージュ
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/f4/32/p/o1080108015115893145.png); padding: 15px 15px;background-size: 220px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
● ダマスクピンクパープル
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/9f/7a/p/o1080108015115893142.png); padding: 15px 15px;background-size: 220px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
● ダマスクサーモンピンク
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/a4/b8/p/o1080108015115893139.png); padding: 15px 15px;background-size: 220px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
● ダマスクティファニーブルー
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/c7/18/p/o1080108015115893138.png); padding: 15px 15px;background-size: 220px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;">
<p>
文字を入力<br>
改行はエンター</p></div></div>
<p> </p>
囲み枠の設置手順
①デザインを選んでHTMLコード
使いたい囲み枠のデザインを一覧から選んで
HTMLコードをコピーします。
②記事作成でHTML画面にする
いつもブログを書く手順で
[ブログを書く]画面下の[HTML表示]に切替えます。
③コードを貼付けて画面を戻す
①でコピーしたHTMLコードを貼付けます。
貼付けたら[通常表示]に戻します。
④囲み枠の中を入力する
最後部に囲み枠の中身を書きます。
改行する場合は「ENTER」を押します。
上記でお配りしているコードを
そのままコピーするだけでも使えますが、
もっとあなたのブログにあったイメージで作りたい場合は
色を変えたり、形を変えたりして
自分だけのこだわりの囲み枠を作ってみてくださいね
【カラー変更の参考ページ】
WEB色見本カラーコード
設置の方法や困ったときにはこちらをCheck
▶︎囲み枠を設置するやり方
▶︎改行したら枠が増えた！という時の対処法と元に戻す方法
▶︎囲み枠の色を変える方法
他にもおしゃれな囲み枠や見出しがたくさん
▶︎アメブロ見出し素材500選
▶︎\大人気♡/ 大人かわいい大理石と水玉の囲み枠
▶︎ダマスク柄の囲み枠
▶︎シンプルな囲み枠＆枠線
▶︎タイトル付き囲み枠
▶︎ニュアンスカラーの囲み枠
＼LINE公式登録で無料プレゼント♡／
SNSで世界観をつくる8大特典
↓ ↓ ↓ ↓ ↓
LINE公式
画像をクリックして登録♡
LINE画面が表示されない方は
@joujounetでID検索
(@も含めて検索してください)
あなたの想いと魅力を届ける
世界観づくりをサポートしています。
SNSで集客できない方
世界観づくりでお悩みの方
必要な人に価値を届けたい方
SNSで選ばれ売上をあげたい方
ぜひLINE登録してくださいね♡
Service
アメブロカスタマイズ／ライティング添削
ヘッダー／バナー／HP制作／インスタテンプレ作成
Instagramコンサル／Canva／LINEリッチメニュー
デュプロマ・テキスト・講座資料の作成
Lステップ代行構築／LINE運用アドバイス
SNSマーケティングをもとに幅広く
女性に響くデザインで
あなたらしさを叶えます♡
ハンドメイドやエステサロン
カフェ&レストラン・英語教室
アロマ・ネイル・婚活塾など
全国各地からご依頼・コンサルで一人一人
寄り添ったサポートを心がけています♡
＼３人のママでも理想の働き方を手に入れた方法✨／
＼インスタはこちら♡Follow Me✨／
LINE公式マーケティングやデザイン作りのヒントを発信♡
心ときめく食器とお花が作れるポーセラーツ＆フラワーインテリア
JouJouetteの教室ブログはこちら♡
ジュジュネット