コピペで簡単設置！アメブロ記事内の囲い込み枠の作り方 | 上位表示対策！アメブロでSEO集客する方法とは？
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

上位表示対策！アメブロでSEO集客する方法とは？

ホームページ・アメブロをYahoo Googleの検索エンジンで上位表示させSEO集客する為の方法

コピペで簡単設置！アメブロ記事内の囲い込み枠の作り方

アメブロ記事内に囲い込み枠のcssは、沢山公開されていますが…

チョット個性的なのが欲しい！と言う人向けに集めてみました。需要はあるかどうかはわかりませんがキョロキョロ

 

スマホでの「使用不可タグ」も多いのですが、ここで紹介する「囲い込み枠」は問題ありません。

 

直接本文に「コピペ」に貼り付けてもらえれば大丈夫です。直接コードを書き込みますのでタグ編集エディタの 【ＨＴＭＬ】表示にしてコピペしてください。

 

 

 

色を変更する場合、#(ショープ)で始まる半角英数字【例】#f9f9f9 を変える必要がありますが、変更する場合カラーコード表を参照くださいな。

 

 

タイトル付き囲い込み枠

見出しタイトル

囲い込み内本文1
改行

下矢印コピペ用コード


<div style="margin: 2em 0.3em; background: #f9f9f9; box-shadow: 0 1px 4px gray">
<div style="font-size: 1.2em; background: #ff7c79; padding: 7px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.1em;">見出しタイトル</div>
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>

 

 

 

見出しタイトル

囲い込み内本文
改行

下矢印コピペ用コード


<div style="margin: 2em 0.3em; background: #f9f9f9; box-shadow: 0 1px 4px gray">
<div style="font-size: 1.2em; background: #00a4d6; padding: 7px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.1em;">見出しタイトル</div>
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>

 

 

 

見出しタイトル

囲い込み内本文
改行

下矢印コピペ用コード


<div style="margin: 2em 0.3em; background: #f9f9f9; box-shadow: 0 1px 4px gray">
<div style="font-size: 1.2em; background: #737373; padding: 7px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.1em;">見出しタイトル</div>
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>

 

 

 

 

 

 

囲い込み枠グラデーション

囲い込み内本文
改行

下矢印コピペ用コード


<div style="box-sizing: border-box; border: 10px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(#ffb3c0, #eb3257);">
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>

 

 

 

囲い込み内本文
改行

下矢印コピペ用コード


<div style="box-sizing: border-box; border: 10px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(#a2d0ff, #007efd);">
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>

 

 

 

囲い込み内本文
改行

下矢印コピペ用コード


<div style="box-sizing: border-box; border: 10px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(#ffffb0, #eeee00);">
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>

 

 

 

 

 

 

囲い込み内グラデーション

囲い込み内本文
改行

下矢印コピペ用コード


<div style="margin: 2em 0; padding: 10px; background: -moz-linear-gradient(#ff4d71, #ffa317); background: -webkit-linear-gradient(#ff4d71, #ffa317); background: linear-gradient(to right, #ff4d71, #ffa317);  border-radius: 10px;">
<p style="color: #FFF;">囲い込み内本文<br>
改行</p></div>

 

 

 

囲い込み内本文
改行

下矢印コピペ用コード


<div style="margin: 2em 0; padding: 10px; background: -moz-linear-gradient(#53a9ff, #b062ff); background: -webkit-linear-gradient(#53a9ff, #b062ff); background: linear-gradient(to right, #53a9ff, #b062ff);  border-radius: 10px;">
<p style="color: #FFF;">囲い込み内本文<br>
改行</p></div>

 

 

 

囲い込み内本文
改行

下矢印コピペ用コード


<div style="margin: 2em 0; padding: 10px; background: -moz-linear-gradient(#f0f000, #caff95); background: -webkit-linear-gradient(#f0f000, #caff95); background: linear-gradient(to right, #f0f000, #caff95);  border-radius: 10px;">
<p style="color: #FFF;">囲い込み内本文<br>
改行</p></div>

 

 

 

 

 

 

囲い込み枠ぼかし

囲い込み内本文
改行

下矢印コピペ用コード


<p style="margin: 2em 1em; padding: 5px; background-color: #ffd9ec; box-shadow: 0 0 10px 10px #ffd9ec;">囲い込み内本文<br>
改行</p>

 

 

 

囲い込み内本文
改行

下矢印コピペ用コード


<p style="margin: 2em 1em; padding: 5px; background-color: #e3f1ff; box-shadow: 0 0 10px 10px #e3f1ff;">囲い込み内本文<br>
改行</p>

 

 

 

囲い込み内本文
改行

下矢印コピペ用コード


<p style="margin: 2em 1em; padding: 5px; background-color: #eee; box-shadow: 0 0 10px 10px #eee;">囲い込み内本文<br>
改行</p>

 

 

 

 

 

 

囲い込み内ストライプ

囲い込み内本文
改行

下矢印コピペ用コード


<div style="margin: 2em .5em; padding: 10px; background: -webkit-repeating-linear-gradient(-45deg, #fff4ff, #fff4ff 5px, #ffe6ff 5px, #ffe6ff 10px); background: repeating-linear-gradient(-45deg, #fff4ff, #fff4ff 5px, #ffe6ff 5px, #ffe6ff 10px); color: #800080;   box-shadow: 0 1px 4px #800080">
<p>囲い込み内本文<br>
改行</p></div>

 

 

 

囲い込み内本文
改行

下矢印コピペ用コード


<div style="margin: 2em .5em; padding: 10px; background: -webkit-repeating-linear-gradient(-45deg, #f7fbff, #f7fbff 5px, #e3f1ff 5px, #e3f1ff 10px); background: repeating-linear-gradient(-45deg, #f7fbff, #f7fbff 5px, #e3f1ff 5px, #e3f1ff 10px); color: #004386;  box-shadow: 0 1px 4px #004386">
<p>囲い込み内本文<br>
改行</p></div>

 

 

 

囲い込み内本文
改行

下矢印コピペ用コード


<div style="margin: 2em .5em; padding: 10px; background: -webkit-repeating-linear-gradient(-45deg, #fafafa, #fafafa 5px, #e9e9e9 5px, #e9e9e9 10px); background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 5px, #e9e9e9 5px, #e9e9e9 10px); color: #393939;  box-shadow: 0 1px 4px gray">
<p>囲い込み内本文<br>
改行</p></div>