2015/06/12 白を2種類追加

囲み枠(飾り枠)テンプレート ワッペン風(デニム調) アメブロ記事・カスタマイズ向け



わざめーば、こと松本です。

こんにちは。

デニム調の背景用画像を利用したワッペン風の囲み枠(飾り枠)です。

やはり、タグも一緒に書いておきますので、よかったらコピペ用でご利用下さい。

【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。

タグはアメブロ専用です。

そのまま他のブログ等で利用されると画像が表示されませんので、その場合は、画像をダウンロードして別サーバーにアップロードしたものをご利用下さい。


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その1)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その1)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/5f/19/j/o0148014813106372667.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その2)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その2)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/55/9b/j/o0148014813106372670.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その3)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その3)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/fa/43/j/o0148014813106372674.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その4)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その4)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/b0/6d/j/o0148014813106372677.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その5)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その5)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/50/cb/j/o0148014813106372681.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その6)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その6)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/d4/d9/j/o0148014813106372728.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その7)



囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その7)




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20150612/22/wazameba/25/c6/p/o0148014813335372879.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #ccc;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その8)



囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その8)




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20150612/22/wazameba/c8/a3/p/o0148014813335372878.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #ccc;border-radius:5px;padding:10px">★</div></div></div></div>


横幅や背景を変更して好みの囲み枠にするには



なお、上記タグを変更して囲み枠をカスタマイズすることもできます。

例えば、赤文字(400px)部分を変更すると、ワッペンの横幅を調整できます。

また、緑文字部分を変更すると、囲み枠の背景になっているデニム調の画像を好みの画像に変更することも可能です(囲み枠の背景としてタイル状に敷き詰められます)。

以上、もしよかったら使ってみてくださいね。

2014/10/23 記事公開
2015/06/12 白を2種類追加



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



コメント(24)