自分に合った疲れないネット活用方法で集客を目指す！【大阪】わたし発信塾 -2ページ目

バナー風囲み枠②

バナーの代わりに囲み枠を使う

お申し込みはコチラから

↑こんな感じにして、文字にリンクを貼ればいいんです

なんとなく、バナーっぽくないですか？？？

使い方、囲み枠をご案内しています。

このまま読み進めてくださいね

お好みの色がない場合は、↓こちらをご覧くださいね。

文字にリンクを貼る方法がわからないという方は

こちらの記事で、リンクを貼る方法をご案内しています。

左寄せバージョンと、中央寄せバージョンの囲み枠をご用意しました

文字の内容や、色はご自由にかえてくださいね

囲み枠の横幅はサイズ固定になっています。

【使い方の説明】

使い方は囲み枠の設置の方法と一緒です。

枠を設置したら、囲み枠の中の文字を変更してください。

変更した文字にリンクを貼るとできあがりです。

タグのご案内（左寄せＶｅｒ．）

○○○はこちらから

<div style="border: 3px solid #f19db5; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center;"><span style="font-size:1.2em;"><span style="font-weight:bold;">○○○はこちらから</span></span></div>

○○○はこちらから

<div style="border: 3px solid #f7c9dd; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center;"><span style="font-size:1.2em;"><span style="font-weight:bold;">○○○はこちらから</span></span></div>

○○○はこちらから

<div style="border: 3px solid #f9ceb9; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center;"><span style="font-size:1.2em;"><span style="font-weight:bold;">○○○はこちらから</span></span></div>

○○○はこちらから

<div style="border: 3px solid #e1efdc; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center;"><span style="font-size:1.2em;"><span style="font-weight:bold;">○○○はこちらから</span></span></div>

○○○はこちらから

<div style="border: 3px solid #dff2fc; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center;"><span style="font-size:1.2em;"><span style="font-weight:bold;">○○○はこちらから</span></span></div>

○○○はこちらから

<div style="border: 3px solid #d3def1; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center;"><span style="font-size:1.2em;"><span style="font-weight:bold;">○○○はこちらから</span></span></div>

○○○はこちらから

<div style="border: 3px solid #d4cabe; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center;"><span style="font-size:1.2em;"><span style="font-weight:bold;">○○○はこちらから</span></span></div>

タグのご案内（中央寄せＶｅｒ．）

○○○はこちらから

<div style="border: 3px solid #f19db5; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center; margin-left: auto; margin-right: auto;"><span style="font-size:1.2em;"><b>○○○はこちらから</b></span></div>

○○○はこちらから

<div style="border: 3px solid #f7c9dd; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center; margin-left: auto; margin-right: auto;"><span style="font-size:1.2em;"><b>○○○はこちらから</b></span></div>

○○○はこちらから

<div style="border: 3px solid #f9ceb9; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center; margin-left: auto; margin-right: auto;"><span style="font-size:1.2em;"><b>○○○はこちらから</b></span></div>

○○○はこちらから

<div style="border: 3px solid #e1efdc; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center; margin-left: auto; margin-right: auto;"><span style="font-size:1.2em;"><b>○○○はこちらから</b></span></div>

○○○はこちらから

<div style="border: 3px solid #dff2fc; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center; margin-left: auto; margin-right: auto;"><span style="font-size:1.2em;"><b>○○○はこちらから</b></span></div>

○○○はこちらから

<div style="border: 3px solid #d3def1; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center; margin-left: auto; margin-right: auto;"><span style="font-size:1.2em;"><b>○○○はこちらから</b></span></div>

○○○はこちらから

<div style="border: 3px solid #d4cabe; background: #fffaec; padding: 5px; margin: 1em 0px; border-radius: 20px; width: 270px; box-shadow: rgb(221, 221, 221) 0px 5px 10px 0px; text-align: center; margin-left: auto; margin-right: auto;"><span style="font-size:1.2em;"><b>○○○はこちらから</b></span></div>

囲み枠を各種取り揃えています。ご自由にご利用ください

アンドロイドご利用の方は、アンドロイド対応の囲み枠をご利用下さい。

囲み枠　もくじ (タイトル・画像ともにリンクしています）

アメブロ囲み枠　-- アンドロイド対応編--

------　アンドロイド対応編　------

ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#ffffff; padding:10px; border:1px solid #f6beca; border-radius:0px;">ここに本文</td></tr></table><br><br>

ここに本文ここに本文ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#ffffff; padding:10px; border:1px solid #fdd34e; border-radius:0px;">ここに本文</td></tr></table><br><br>

ここに本文ここに本文ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#ffffff; padding:10px; border:1px solid #d4ecf3; border-radius:0px;">ここに本文</td></tr></table><br><br>

ここに本文ここに本文ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#ffffff; padding:10px; border:1px solid #eae4d1; border-radius:0px;">ここに本文</td></tr></table><br><br>

ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#f6beca; padding:10px; border:1px solid #f6beca; border-radius:0px;">ここに本文</td></tr></table><br><br>

ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#fdd34e; padding:10px; border:1px solid #fdd34e; border-radius:0px;">ここに本文</td></tr></table><br><br>

ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#d4ecf3; padding:10px; border:1px solid #d4ecf3; border-radius:0px;">ここに本文</td></tr></table><br><br>

ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#eae4d1; padding:10px; border:1px solid #eae4d1; border-radius:0px;">ここに本文</td></tr></table><br><br>

ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#f6beca; padding:6px; border:1px solid #ffffff; border-radius:30px;">ここに本文</td></tr></table><br><br>

ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#fdd34e; padding:6px; border:1px solid #ffffff; border-radius:30px;">ここに本文</td></tr></table><br><br>

ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#d4ecf3; padding:6px; border:1px solid #ffffff; border-radius:30px;">ここに本文</td></tr></table><br><br>

ここに本文

<table style="width:100%; border:0;"><tr><td style="background:#eae4d1; padding:6px; border:1px solid #ffffff; border-radius:30px;">ここに本文</td></tr></table><br><br>

囲み枠を各種取り揃えています。ご自由にご利用ください

アンドロイドご利用の方は、アンドロイド対応の囲み枠をご利用下さい。

囲み枠　もくじ (タイトル・画像ともにリンクしています）

囲み枠　--タイトル付囲み枠--

タイトル付の囲み枠

ここにタイトル

ここに本文

<div style="background: #c3e2cd; border-top-right-radius: 20px; border: 1px solid #c3e2cd; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div><div style="border: 1px solid #c3e2cd; padding: 10px;">ここに本文</div>

ここにタイトル

ここに本文

<div style="background: #f6b8b7; border-top-right-radius: 20px; border: 1px solid #f6b8b7; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div><div style="border: 1px solid #f6b8b7; padding: 10px;">ここに本文</div>

ここにタイトル

ここに本文

<div style="background: #83b9d4; border-top-right-radius: 20px; border: 1px solid #83b9d4; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div><div style="border: 1px solid #83b9d4; padding: 10px;">ここに本文</div>

ここにタイトル

ここに本文

<div style="background: #ded8d4; border-top-right-radius: 20px; border: 1px solid #ded8d4; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div><div style="border: 1px solid #ded8d4; padding: 10px;">ここに本文</div>

ここにタイトル

ここに本文

<div style="background: #c3e2cd; border: 1px solid #c3e2cd; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div><div style="border: 1px solid #c3e2cd; padding: 10px;">ここに本文</div>

ここにタイトル

ここに本文

<div style="background: #f6b8b7; border: 1px solid #f6b8b7; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div><div style="border: 1px solid #f6b8b7; padding: 10px;">ここに本文</div>

ここにタイトル

ここに本文

<div style="background: #83b9d4; border: 1px solid #83b9d4; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div><div style="border: 1px solid #83b9d4; padding: 10px;">ここに本文</div>

ここにタイトル

ここに本文

<div style="background: #ded8d4; border: 1px solid #ded8d4; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div><div style="border: 1px solid #ded8d4; padding: 10px;">ここに本文</div>

囲み枠を各種取り揃えています。ご自由にご利用ください

アンドロイドご利用の方は、アンドロイド対応の囲み枠をご利用下さい。

囲み枠　もくじ (タイトル・画像ともにリンクしています）

囲み枠　--実線編--

実線の囲み枠

ここに本文

<div style="border: #d4cabe 1px solid; background: #ffffff; padding: 10px; margin: 1em 0; border-radius: 8px;">ここに本文</div>

ここに本文

<div style="border: #f9d0c3 1px solid; background: #ffffff; padding: 10px; margin: 1em 0; border-radius: 8px;">ここに本文</div>

ここに本文

<div style="border: #c3e2cd 1px solid; background: #ffffff; padding: 10px; margin: 1em 0; border-radius: 8px;">ここに本文</div>

ここに本文

<div style="border: #d4cabe 1px solid; background: #ffffff; padding: 10px; margin: 1em 0;">ここに本文</div>

ここに本文

<div style="border: #f9d0c3 1px solid; background: #ffffff; padding: 10px; margin: 1em 0;">ここに本文</div>

ここに本文

<div style="border: #c3e2cd 1px solid; background: #ffffff; padding: 10px; margin: 1em 0;">ここに本文</div>

枠内の記事本文

<div style="padding:15px;border-radius: 10px; border: 6px double #f4abad;">枠内の記事本文</div>

枠内の記事本文

<div style="padding:15px;border-radius: 10px; border: 6px double #ddd3c2;">枠内の記事本文</div>

枠内の記事本文

<div style="padding:15px;border-radius: 10px; border: 6px double #82c478;">枠内の記事本文</div>

枠内の記事本文

<div style="padding:15px; border: 6px double #f4abad;">枠内の記事本文</div><br>

枠内の記事本文

<div style="padding:15px; border: 6px double #ddd3c2;">枠内の記事本文</div><br>

枠内の記事本文

<div style="padding:15px; border: 6px double #82c478;">枠内の記事本文</div><br>

囲み枠を各種取り揃えています。ご自由にご利用ください

アンドロイドご利用の方は、アンドロイド対応の囲み枠をご利用下さい。

囲み枠　もくじ (タイトル・画像ともにリンクしています）

囲み枠　--破線--

破線の囲み枠

ここに枠で囲みたい内容を入れます。

<div style="background:#fff9b1; padding:10px; border:3px dotted #f5b1a2; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fff9b1; padding:10px; border:3px dotted #fee28c; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fce3d4; padding:10px; border:3px dotted #f8ccd1; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#d4ecf3; padding:10px; border:3px dotted #bbdced; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#e0d5a5; padding:10px; border:3px dotted #b4cb9d; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fffeee; padding:10px; border:3px dotted #99966f; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fcf4dc; padding:10px; border:3px dotted #e9e1ad; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fff9b1; padding:10px; border:2px dotted #f5b1a2; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fff9b1; padding:10px; border:2px dotted #fee28c; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fce3d4; padding:10px; border:2px dotted #f8ccd1; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#d4ecf3; padding:10px; border:2px dotted #bbdced; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#e0d5a5; padding:10px; border:2px dotted #b4cb9d; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fffeee; padding:10px; border:2px dotted #99966f; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fcf4dc; padding:10px; border:2px dotted #e9e1ad; border-radius:10px;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fff9b1; padding:10px; border:2px dotted #f5b1a2;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fff9b1; padding:10px; border:2px dotted #fee28c;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fce3d4; padding:10px; border:2px dotted #f8ccd1;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#d4ecf3; padding:10px; border:2px dotted #bbdced;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#e0d5a5; padding:10px; border:2px dotted #b4cb9d;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fffeee; padding:10px; border:2px dotted #99966f;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fcf4dc; padding:10px; border:2px dotted #e9e1ad;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fcf4dc; padding:10px; border:1px dotted #eee1d3;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fff6e9; padding:10px; border:1px dotted #f19db5;">ここに枠で囲みたい内容を入れます。<br> </div>

ここに枠で囲みたい内容を入れます。

<div style="background:#fcf4dc; padding:10px; border:1px dotted #99966f;">ここに枠で囲みたい内容を入れます。<br> </div>

囲み枠を各種取り揃えています。ご自由にご利用ください

アンドロイドご利用の方は、アンドロイド対応の囲み枠をご利用下さい。

囲み枠　もくじ (タイトル・画像ともにリンクしています）

バナー風囲み枠②

アメブロ 囲み枠 -- アンドロイド 対応 編--

囲み枠 --タイトル付囲み枠--

囲み枠 --実線編--

囲み枠 --破線--

アメブロ囲み枠　-- アンドロイド対応編--

囲み枠　--タイトル付囲み枠--

囲み枠　--実線編--

囲み枠　--破線--