このブログ

アメブロのカスタマイズ方法とかを書いてます。


テーマ:

囲み枠(飾り枠)テンプレート 付箋紙風 アメブロ記事・カスタマイズ向け



アメブロカスタマイズの松本です。

こんにちは。

先日の、黒板風の囲み枠(飾り枠)テンプレートに続き、今度は付箋紙風を作ってみました。

付箋紙風の枠のみのシンプルなタイプと、テープで貼り付けたような効果を追加したタイプの2種類作りました。

テープ無しはもちろん、テープ付きも全て画像を使わずにCSSのみで作ってありますので、色や大きさなどは自由に変えられます。

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

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


囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・黄色)



囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・黄色)




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffffcc;">★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・ピンク)



囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・ピンク)




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffdddd;">★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・青)



囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・青)




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ddeeff;">★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・黄色)



囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・黄色)




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffffcc;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・ピンク)



囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・ピンク)




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffdddd;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・青)



囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・青)




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ddeeff;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>


好みの付箋紙風の囲み枠(飾り枠)にカスタマイズしてみる



なお、もし、もっと好みの付箋紙風にしたいという場合は、上記タグ内の色付き文字で書いてある部分を変更すると、囲み枠をカスタマイズできます。

紫文字(例:10px)・・・付箋紙の左端の位置調整
橙文字(例:300px)・・・付箋紙の横幅調整
緑文字(例:2deg)・・・付箋紙の傾き(2degは2度のことです)
赤文字(例:#ffdddd)・・・付箋紙の色


◆例えば・・・

 こんな感じです!
 v(^^)



ちなみに↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:50px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:200px;transform:rotate(-30deg);background:#bbf0dd;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>



あと、今回の枠はCSS3を多用していますのでIE8以前の古いブラウザで見ると残念な感じになってしまいますが、一応読むことはできます^^

さぁ、次は何にしましょう?^^



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



いいね!した人  |  コメント(42)

松本@このブログさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります