アメブロの記事で使えるデニム調の背景画像を利用したワッペン風の囲み枠(飾り枠)を作ってみました。
いつもと同様、タグも一緒に書いておきますので、よかったらコピペでご利用下さい。
デニム調の背景画像素材も、全て僕が一から作ったものですので、ライセンス違反の問題なども心配ありません。
どうぞ安心して無料で使って下さい。
ただし、デニム調の背景画像は当ブログの画像フォルダに入っていますので、万が一、当ブログが削除という憂き目に会うと、画像も消えてしまうと思います。
ですので、もしそれが心配な場合は、背景画像をご自身のアメブロの画像フォルダにアップロードしなおし、URLを差し替えた上でご利用いただいても結構です。
なお、当記事でご紹介するタグはアメブロ専用です。
そのままアメブロ以外の他サイトで利用されると画像が表示されないと思いますので、その場合は画像を別サーバーにアップロードしてご利用下さい。
【ご注意】最新版エディタをお使いの場合は、コピーしたものを直接HTMLとして貼り付けると文字化けしておかしくなるようです。一度メモ帳などを経由するか、Google Chromeの「プレーンテキストとして貼り付ける」機能などをご利用下さい。
囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その１)
■囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その１)■
↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" 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(https://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>
囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その２)
■囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その２)■
↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" 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(https://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>
囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その３)
■囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その３)■
↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" 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(https://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>
囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その４)
■囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その４)■
↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" 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(https://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>
囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その５)
■囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その５)■
↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" 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(https://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>
囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その６)
■囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その６)■
↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" 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(https://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>
囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その７)
■囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その７)■
↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" 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(https://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>
囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その８)
■囲み枠(飾り枠)テンプレート：ワッペン風(デニム調 その８)■
↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" 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(https://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)部分を変更すると、ワッペンの横幅を調整できます。
また、緑文字部分を変更すると、囲み枠の背景になっているデニム調の画像を好みの画像に変更することも可能です(囲み枠の背景としてタイル状に敷き詰められます)。
以上、もしよかったら使ってみてください。
コメントを残す