またまた、アメブロ用の囲み枠(飾り枠)を作ってみました。

「アメブロの記事で使える囲み枠(飾り枠) ワッペン風(リネン調)」です。

リネン(麻)生地っぽい画像素材を自作して、それを使うようにしてみました(あまり質感をうまく表現できてないかもしれませんが)

ワッペン風(デニム調)から画像素材や「糸」の部分を変更したものですので、注意事項なども基本的に同じです。

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

【ご注意】最新版エディタをお使いの場合は、コピーしたものを直接HTMLとして貼り付けると文字化けしておかしくなるようです。一度メモ帳などを経由するか、Google Chromeの「プレーンテキストとして貼り付ける」機能などをご利用下さい。

囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その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(https://stat.ameba.jp/user_images/20141029/18/wazameba/0a/9b/p/o0300030013113018867.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #e6e3e0;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(https://stat.ameba.jp/user_images/20141029/18/wazameba/e8/9d/p/o0300030013113018873.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #545454;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(https://stat.ameba.jp/user_images/20141029/18/wazameba/41/e4/p/o0300030013113018919.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #d9d9b5;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(https://stat.ameba.jp/user_images/20141029/18/wazameba/21/21/p/o0300030013113018942.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #cbdcf6;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(https://stat.ameba.jp/user_images/20141029/18/wazameba/37/f1/p/o0300030013113018948.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #f9d6e8;border-radius:5px;padding:10px">★</div></div></div></div>


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


なお、ご紹介したタグは、お好みに応じて自由にカスタマイズして頂くことも可能です。

例えば、赤文字(400px)部分を変更(画面幅に合わせたい場合は「auto」とかに)すると、囲み枠の横幅を調整できます。

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

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

関連記事


スッキリ見やすいシンプルな見出し付き囲み枠
斜めストライプ模様の囲み枠
ワッペン風(デニム調)の囲み枠
付箋風の囲み枠
黒板風の囲み枠



リブログ(1)

  • エフェクト練習「VideoPad」で困ったこと

    今日は本格的な制作にかかる前の練習。えりぽてver.3からver.4に入ろうかと思ったんですが…、まだまだエフェクトの使い方に慣れておらずかなり手間がかかるので…、失敗覚悟でゆったり「PV_SU」を作ってみました。 困ったことに…、クロマキー合成に必要な画像の準備まではスムーズになったんですが…、…

    きょんマネージャー

    2017-06-21 01:00:00

リブログ一覧を見る