アメブロ記事に大理石と水玉ドットの
おしゃれな囲み枠をコピペで貼る方法をご紹介します
思わず二度見され一瞬で心を奪う
アメブロ＆インスタの世界観作り
自宅教室・サロンオーナー・ハンドメイド
女性のはじめての起業を
おしゃれに可愛くプロデュース♡
世界観をカタチにするSNSデザインプロデューサー
豊田 純子
▶︎はじめましての方はこちら♡
ジュジュ
コピペで使えます！改行はEnterのみでOK！！スマホでの改行も楽ちんだよ♫
ご利用にあたって
※ 無断転載・パクリ・二次利用などは禁止です！
※ ご自分のブログでコピペしての使用はOKです！
※ この記事のコードをコピペして一部を変更して似たような記事を作成することも禁止です！！
※ 記事をご紹介いただく際は、出典元として当ブログのリンクをお願いします。
記事に追加する方法はこちらを見てね。
囲み枠をアメブロ記事に設定する方法
アメブロカスタマイズリンク集
アメブロで使える枠線＆囲み枠一覧
大人かわいい囲み枠一覧
大理石風囲み枠
● 大理石囲み枠（白）
<div style="box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20210824/12/joujounet/53/53/p/o0150015014991186711.png); padding: 15px 15px; background-size: 50%;"><div style="border:4px double #CEBB5B; border-radius:1px;padding:10px; background: #ffffff; opacity: 0.8;"><p style="margin: 0;">文字を入力<br>
改行はエンター</p></div></div>
● 大理石囲み枠（グレージュ）
<div style="box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20210824/12/joujounet/53/53/p/o0150015014991186711.png); padding: 15px 15px; background-size: 50%;"><div style="border:4px double #CEBB5B; border-radius:1px;padding:10px; background: #ECE4E1; "><p style="margin: 0;">文字を入力<br>
改行はエンター</p></div></div>
● 大理石囲み枠（ピンク）
<div style="box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20210824/12/joujounet/53/53/p/o0150015014991186711.png); padding: 15px 15px; background-size: 50%;"><div style="border:4px double #CEBB5B; border-radius:1px;padding:10px; background: #fef9fb; "><p style="margin: 0;">文字を入力<br>
改行はエンター</p></div></div>
● 大理石囲み枠（グリーン）
<div style="box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20210824/12/joujounet/53/53/p/o0150015014991186711.png); padding: 15px 15px; background-size: 50%;"><div style="border:4px double #CEBB5B; border-radius:1px;padding:10px; background: #f9fffc; "><p style="margin: 0;">文字を入力<br>
改行はエンター</p></div></div>
● 大理石囲み枠 黒×白
<div style="background-image:url(https://stat.ameba.jp/user_images/20211104/15/joujounet/0b/95/p/o1080108015026253920.png); padding: 15px 15px; background-size: 50%;">
<div style="background: #ffffff;border:4px double #CEBB5B;padding:10px; padding-left:10px;">
<p style="margin: 0;">
文字を入力</p></div></div>
<p> </p>
● 大理石囲み枠 黒×グレージュ
<div style="background-image:url(https://stat.ameba.jp/user_images/20211104/15/joujounet/0b/95/p/o1080108015026253920.png); padding: 15px 15px; background-size: 50%;">
<div style=" background: #efefef; border:4px double #CEBB5B;padding:10px; padding-left:10px;">
<p style="margin: 0;">
文字を入力</p></div></div>
<p> </p>
● 大理石囲み枠 ピンク×白
<div style="background-image:url(https://stat.ameba.jp/user_images/20211104/15/joujounet/e4/f5/p/o1080108015026253926.png); padding: 15px 15px; background-size: 50%;">
<div style="background:#ffffff; opacity: 0.8;border:4px double #CEBB5B;padding:10px; padding-left:10px;">
<p style="margin: 0;">
文字を入力</p></div></div>
<p> </p>
● 大理石囲み枠 ピンク×ピンク
<div style="background-image:url(https://stat.ameba.jp/user_images/20211104/15/joujounet/e4/f5/p/o1080108015026253926.png); padding: 15px 15px; background-size: 50%;">
<div style="background:#fef9fb; opacity: 0.8;border:4px double #CEBB5B;padding:10px; padding-left:10px;">
<p style="margin: 0;">
文字を入力</p></div></div>
<p> </p>
水玉囲み枠
● 水玉ブラック（白背景）
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20210824/12/joujounet/83/d1/p/o0150015014991186716.png); padding: 15px 15px;background-size: 85px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #ffffff;"><p style="margin: 0;">
文字を入力<br>
改行はエンター</p></div></div>
● 水玉ブラック（ピンク背景）
<div style=" box-shadow:2px 2px 5px #dddddd; background-image:url(https://stat.ameba.jp/user_images/20210824/12/joujounet/83/d1/p/o0150015014991186716.png); padding: 15px 15px;background-size: 85px; "><div style="border:4px double #CEBB5B;border-radius:1px;padding:10px; background: #fef9fb;"><p style="margin: 0;">
文字を入力<br>
改行はエンター</p></div></div>
囲み枠の設置手順
①デザインを選んでHTMLコード
使いたい囲み枠のデザインを一覧から選んで
HTMLコードをコピーします。
②記事作成でHTML画面にする
いつもブログを書く手順で
[ブログを書く]画面下の[HTML表示]に切替えます。
③コードを貼付けて画面を戻す
①でコピーしたHTMLコードを貼付けます。
貼付けたら[通常表示]に戻します。
④囲み枠の中を入力する
最後部に囲み枠の中身を書きます。
改行する場合は「ENTER」を押します。
上記でお配りしているコードを
そのままコピーするだけでも使えますが、
もっとあなたのブログにあったイメージで作りたい場合は
色を変えたり、形を変えたりして
自分だけのこだわりの囲み枠を作ってみてくださいね
【カラー変更の参考ページ】
WEB色見本カラーコード
もしこの記事があなたの参考になったら
ぜひいいね＆フォローをお願いします
それでは、皆さまにとって素敵な１日となりますように
最後までお読みいただきありがとうございました
Instagramフォロワー１万人超えの秘訣
LINE公式で無料プレゼント中🎁
ID検索で「@575jocda」からも追加できます♡
(必ず＠を入れて検索してください)
JOUJOUNET ジュジュネット