コピペで今すぐ使える！おすすめのシンプル囲い枠紹介します♡

ご訪問ありがとうございます♡

SNSビジネス初心者向け

webクリエイター

Kanaです♡

-------------

プロフィールはこちらから♡

お洒落なアメブロとそうではない

ブログの一番の違いは

囲み枠を使っているかいないか。

囲み枠があると

見やすさが

ぐんと上がります！

今日は

私が使っている

囲み枠を紹介します♡

王道囲み枠！でも使える囲み枠♡

ここに文章

こちらを貼り付け↓

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="border: 2px solid #B481BB; background:#f4eaff; padding: 15px;"><p style="margin: 0;">ここに文章</p></div><p>&nbsp;</p>

これも使える！点線の囲み枠♡

ここに文章

こちらを貼り付け↓

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="border: 2px dashed #B481BB; background:#f4eaff; padding: 15px;"><p style="margin: 0;">ここに文章</p></div><p>&nbsp;</p>

これも使える！ふんわり系の囲み枠♡

ここに文章

こちらを貼り付け↓

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #f4eaff; box-shadow: #f4eaff 0 0 10px 10px; border-radius: 10px; padding: 10px; margin: 10px;"><p style="margin: 0;">ここに文章</p></div><p>&nbsp;</p>

ストライプのおしゃれ系

ここに文章

ここを貼り付け↓

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #B481BB 25%, #B481BB 50%, #ffffff 50%, #ffffff 75%, #B481BB 75%, #B481BB); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>

タイトル付き枠①

タイトル

ここに文章

人気記事ランキングを

まとめるのに便利ツールです

こちらを貼り付けてください↓

<div class="l-border" style="border: 2px solid #B481BB;"><div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="display: inline-block; background: #B481BB; color: #ffffff; padding: 1px 15px 3px 17px;"><p>タイトル</p></div><div class="l-p-t l-p-r l-p-b l-p-l" style="padding: 15px;"><p style="margin: 0;">ここに文章</p></div></div><p>&nbsp;</p>

タイトル付き枠②

タイトル

ここに文章を入れてください

私も人気記事まとめは

これを使っています♡

スタンダードだけど、使いやすいです♪

こちらを貼り付けてください↓

<div style="border: 2px solid #B481BB; background: #ffffff;"><div class="rankitem__ranklabel__2 l-p-r l-p-l" style="background: #B481BB; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div><div class="l-border l-p-t l-p-r l-p-b l-p-l" style="padding: 15px;"><p style="margin: 0;">ここに文章</p></div></div><p>&nbsp;</p>

貼り付け方は簡単！

自分の使いたい箇所を

コピーします。

アメブロの「HTML編集」

のタブをクリック。

そこから自分の貼り付けたい

ところに貼り付けて

もらえれば問題ありません

ぜひ活用してみてくださいね！

今日はここまで！

最後までお読みいただき

ありがとうございました