アメブロ向けかわいい囲み枠

 

 

この記事ではアメブロで使える「かわいい囲み枠」を紹介します。

 

完成イメージは下記の通り。

 

ピンク色の囲み枠を簡単に作れます

ふんわりぼかした囲み枠もOK

水玉模様もかわいいですね

表題

表題付きの囲み枠も設置できます

表題

当サイトの囲み枠は「fieldset」を使わないので安心

 

このような女性向けサイトにピッタリな囲み枠を簡単に設置できます。

 

集客・収益をUPできるアメブロのカスタマイズ方法の1つですね。

 

\ 全部公開 /

 

 

デザインを選んだら、コードをコピペして貼り付けするだけ

 

 

あめっくま
 

記事のポイントや要点を囲って、読者の印象に残る記事を作りましょう!

 

 

なおアメブロの囲み枠の作り方・設置方法は、👇の記事で解説しています。当ブログの囲み枠素材をはじめて使う人は確認して下さいね。

 

 

 

注意

記事中のコードは無料で使えます。リブログやリンクのご紹介も歓迎です。ただし許可なくコード自体をブログ内で掲載したり、二次利用するのは禁止です。無許可掲載はプライバシーポリシーに準じて対応します。

 

 

アメブロ20記事で5万PVの手法

アメブロで資産記事を作る方法はこちら ⇒

 

ついに登場!アメトピ攻略法

アメトピ攻略法はこちら ⇒

 

 

 

 

 

かわいいピンク色の囲み枠 

表題・タブ付き

ピンク系の囲み枠に表題部分をつけた囲み枠の一覧です。

 

表題

タブ付きの囲み枠です

<div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="display: inline-block; background: #eb6ea5; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p>ここに表題</p></div>
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="border: 2px solid #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

 

表題

内側タブ付きの囲み枠です

<div class="l-border" style="border: 2px solid #eb6ea5;">
<div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="display: inline-block; background: #eb6ea5; 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 class="l-border" style="background: #fbe4ee;">
<div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="display: inline-block; background: #eb6ea5; color: #ffffff; padding: 3px 15px 3px 15px;"><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 class="l-border" style="background: #fbe4ee; box-shadow: 3px 3px 6px -2px #555;">
<div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="display: inline-block; background: #eb6ea5; color: #ffffff; padding: 3px 15px 3px 15px;"><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 #eb6ea5; background: #ffffff;">
<div class="rankitem__ranklabel__2 l-p-r l-p-l" style="background: #eb6ea5; 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>

 

表題

表題部分が横に広がった影つき囲み枠

<div style="border: 2px solid #eb6ea5; background: #ffffff; box-shadow: 3px 3px 6px -2px #555;">
<div class="rankitem__ranklabel__2 l-p-r l-p-l" style="background: #eb6ea5; 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>

 

表題

表題部分が横に広がった塗りつぶしの囲み枠

<div class="rankitem__ranklabel__2 l-p-r l-p-l" style="background: #eb6ea5; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p>ここに表題</p></div>
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

 

表題

表題部分が左上に入る囲み枠

<div style="position: relative; border: 2px solid #eb6ea5; padding: 20px 15px 15px 15px;">
<div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #eb6ea5; padding: 0 0.5em;"><p>ここに表題</p></div>
<p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

 

表題

表題部分が左上に入る角丸の囲み枠

<div style="position: relative; border: 2px solid #eb6ea5; border-radius: 7px; padding: 20px 15px 15px 15px;">
<div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #eb6ea5; padding: 0 0.5em;"><p>ここに表題</p></div>
<p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

 

表題

表題部分を塗りつぶした囲み枠

<div style="position: relative; border: 2px solid #eb6ea5; padding: 30px 15px 15px 15px;">
<div class="rankitem__ranklabel__2 i-amphtml-element l-p-r l-p-l" style="position: absolute; top: -0.8em; left: 8px; color: #ffffff; background: #eb6ea5; padding: 0 0.5em;"><p>ここに表題</p></div>
<p class="l-border l-p-t l-p-r l-p-b l-p-l" 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 solid #eb6ea5; 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: 3px dotted #eb6ea5; 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: 5px double #eb6ea5; 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 solid #eb6ea5; border-radius: 10px; 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: #fbe4ee; 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: #fbe4ee; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

 

濃いピンクの塗りつぶし囲み枠

<div class="rankitem__ranklabel__2 l-p-t l-p-r l-p-b l-p-l" style="background: #eb6ea5; color: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

 

濃いピンクの塗りつぶし+各丸囲み枠

<div class="rankitem__ranklabel__2 l-p-t l-p-r l-p-b l-p-l" style="background: #eb6ea5; color: #ffffff; border-radius: 10px; 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 solid #eb6ea5; background: #fbe4ee; 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 solid #eb6ea5; background: #fbe4ee; border-radius: 10px; 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 solid #eb6ea5; background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); 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 solid #eb6ea5; background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); border-radius: 10px; 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-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #eb6ea5 25%, #eb6ea5 50%, #ffffff 50%, #ffffff 75%, #eb6ea5 75%, #eb6ea5); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

 

ピンクのキルト風

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="border: 2px dashed #eb6ea5; background: #fbe4ee; box-shadow:0px 0px 0px 10px #fbe4ee; 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: #fbe4ee; box-shadow: #fbe4ee 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: #fee8c2; box-shadow: #fee8c2 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: #e7f5fe; box-shadow: #e7f5fe 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: #d6efbe; box-shadow: #d6efbe 0 0 10px 10px; border-radius: 10px; padding: 10px; margin: 10px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

 

 

 

吹き出し風の飾り枠 

ここに名前
 

このような会話風の吹き出しは、アイコン画像があるので読者にあなたのことを覚えてもらえます。

 

 

利用者が急増している人気の吹き出しですね。詳しくは、下記の記事で紹介しています。

 

 

 

 

付箋風の飾り枠 

 

 

マスキングテープをつけた付箋風

 

 

なおこちらのコードは、下記の記事で紹介しています。

 

 

 

 

黒板風の飾り枠 

 

黒板風の飾り枠も人気

 

 

なおこちらのコードは、下記の記事で紹介しています。

 

 

 

 

水玉模様の囲み枠 

メインサイトの「アメブロメーカー」では、下記のような水玉模様の囲み枠も用意しています。

 

ピンク色の水玉模様

オレンジ色の水玉模様

水色の水玉模様

緑色の水玉模様

アメブロ向けかわいい囲み枠の見本

 

 

詳しくは下記の関連記事で、コードを確認して下さい。

 

 

 

あめっくま
 

「うまくできない」など困った方は、記事下のコメント欄から遠慮なく質問して下さいね。

 

 

フォローしてね

 

 

 

関連記事 

囲み枠の記事一覧

 

 

集客・収益UPの関連記事

 

 

 

アメブロのアクセス数を安定して伸ばす「資産記事」手法を公開中!

【資産記事の特徴】

①毎日大量のアクセスが来る

②過去記事が長期間安定したアクセスを稼ぐ

③最小限の記事数でOK

 

 

 

 

\ 本格的アメブロ攻略サイト /

\ Twitterだけの有料級情報あり /