• 29 Mar
    • 囲み枠タグ作成ツール(タグジェネレーター)

      昨日、ずいぶん前に作成した囲み枠タグを作るタグジェネレーターを見つけました。僕が作ったものなんですが、もうすっかり忘れてしまっていました^^;当時は、ブログで使える囲み枠を提供することが、何となく使命であるかのように感じていた気がします^^;で、改めて使ってみたところ、マウスでポチポチするだけで色を変えられたりと「意外に便利♪」と思ってFacebookでシェアしたらちょっと好評でした。というわけで、調子に乗ってこちらでも再シェアしてみることにします^^もし興味を持ってもらえたら試してみて下さいね。斜めストライプ模様の囲み枠 ジェネレータータイトルも書けるすっきりと見やすいシンプルな見出し付き囲み枠

      NEW!

      88
      8
      テーマ:
  • 27 Mar
    • シンプルな見出し付き囲み枠の作成ツール(ジェネレーター)を作ってみました

      シンプルな見出し付き囲み枠の作成ツール(ジェネレーター)を作ってみましたこんにちは、松本です。昨日ご紹介したすっきりと見やすいシンプルな見出し(タイトル)付きの囲み枠のジェネレーターを作ってみました。すっきりと見やすいシンプルな見出し付き囲み枠ジェネレータージェネレーターというのは、作成ツールのようなものです。色をカラーピッカーで選べたり、実際の表示を確認しながら囲み枠の見出しや内容を編集できるので、「この方が便利かな?」と思って作ってみました。タグの編集ミスも防げますし^^なお、動作確認はGoogle Chromeで実施しましたが、最近のものなら他のブラウザでも動作すると思います。というわけで、よかったら使ってみてください。使い勝手の感想なども、もしいただけたらうれしいです^^すっきりと見やすいシンプルな見出し付き囲み枠ジェネレーター関連記事・すっきりと見やすいシンプルな見出し付き囲み枠ユーザー様の記事簡単にタイトル付きの囲み枠が作れるツール(わざめーば式)|ちょっとした「Webお役立ち情報」とかを主に書いてます。

      100
      2
      テーマ:
  • 26 Mar
    • すっきりと見やすいシンプルな見出し付き囲み枠

      すっきりと見やすいシンプルな見出し付き囲み枠2016/03/27 この囲み枠の作成ツール(ジェネレーター)を作ってみましたこんにちは、松本です。すっきりと見やすいシンプルな見出し(タイトル)付きの囲み枠を作ってみました。以下、色のバリエーションを幾つかご紹介します(と言っても見出しの上側の枠線の色が違うだけですが^^;)。タグも一緒にご紹介しますので、コピペで使って頂ければと思います。(【注意】記事エディタによっては直接コピペすると文字化けしておかしくなってしまいます。その場合、一度メモ帳などにコピペしたものを、再度エディタにコピペするとうまくいくようです。)シンプルな見出し付き囲み枠(赤)まず、赤です。本当の真っ赤(#FF0000)ではなく、少し濃い(暗めの)赤になっています。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #cc0000;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>シンプルな見出し付き囲み枠(緑)次は、緑です。こちらも少し濃い緑になっています。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #008800;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>シンプルな見出し付き囲み枠(青)次は、青です。やはり濃い青にしてあります。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000aa;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>シンプルな見出し付き囲み枠(ピンク)そして、ピンクです。こちらは、蛍光ピンクのようなハッキリとした色です。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #ff0066;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>シンプルな見出し付き囲み枠(その他の色)最後に、ご自分で好みの色にしたい場合のやり方をご紹介します。色コードを1か所変えるだけなので簡単だと思います。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #000000;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>ご自分で色を決めたいときは、上記タグの「#000000」の部分を、希望の色の色コードに設定しなおしていただければOKです。色コードは、こちらのWEB色見本のサイト様が参考になると思います。また、400pxの部分を変更すると枠の幅も変更することができますので、こちらも合わせて設定してみてください。もちろん、★の部分に見出し、■の部分に囲み枠の中の内容を書くのは同じです。以上、コピペで使える、すっきりと見やすいシンプルな見出し付き囲み枠を紹介をさせて頂きました。もしよかったら試してみてくださいね。関連記事・シンプルな見出し付き囲み枠の作成ツール(ジェネレーター)を作ってみました・斜めストライプ模様の囲み枠・ワッペン風(デニム調)の囲み枠・ワッペン風(リネン調)の囲み枠・付箋風の囲み枠・黒板風の囲み枠

      126
      2
      テーマ:
  • 25 Feb
    • 斜めストライプ模様の囲み枠

      斜めストライプ模様の囲み枠2016/03/27 斜めストライプ模様の囲み枠の作成ツール(ジェネレーター)を作ってみましたこんにちは、松本です。先日、「CSS3:CSSのみで斜線背景を実装する」という記事に出会いまして、この記事で紹介されていたCSSを使った斜めストライプ模様がとても良い感じだったので、参考にさせてもらって囲み枠を作ってみましたので、紹介させてもらいます。いつものように、タグも一緒に書いておきますので、よかったらコピペでご利用下さい。(【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。)なお、こちらのタグは画像を使用していませんので、アメブロ以外でも使えると思います。斜めストライプ模様の囲み枠(ブルーグレー)まず、ブルーグレーっぽい色の斜めストライプ模様の囲み枠です。参考にさせてもらった記事で紹介されていたものに近い色にしてみました(同じ色ではありません^^)。斜めストライプの囲み枠↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。<div style="background-size:24px 24px;background-color:#456;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>斜めストライプ模様の囲み枠(赤)次は、赤い斜めストライプ模様の囲み枠です斜めストライプの囲み枠↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。<div style="background-size:24px 24px;background-color:#f00;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>斜めストライプ模様の囲み枠(赤)次に、オレンジ色の斜めストライプ模様の囲み枠です斜めストライプの囲み枠↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。<div style="background-size:24px 24px;background-color:#f90;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>斜めストライプ模様の囲み枠(ピンク)そして、ピンクの斜めストライプ模様の囲み枠です斜めストライプの囲み枠↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。<div style="background-size:24px 24px;background-color:#f6c;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>自分で色を決めたい場合最後に、自分で色を決めたい場合について、やりかたを紹介します。簡単に色を変えられるように作りましたので、初心者でも大丈夫だと思います。<div style="background-size:24px 24px;background-color:#000000;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>自分で決めた色の囲み枠を作りたいときは、上記タグの「#000000」の部分を、希望の色の色コードに設定しなおして下さい。すると、「設定した色と、設定した色をもう少し明るくした色の2色」の斜めストライプ模様の囲み枠ができます。色コードは、こちらのWEB色見本のサイト様が参考になると思います。なお、当記事でご紹介したタグは、CSS3という比較的新しい技術を多用していて古いブラウザでは正常に表示できない可能性がありますのでご注意下さい(単色で表示されたり、角丸部分が直角になったりします)。以上、コピペで使える斜めストライプ模様の囲み枠の紹介をさせて頂きました。もしよかったら試してみてください。関連記事・ワッペン風(デニム調)の囲み枠・ワッペン風(リネン調)の囲み枠・付箋風の囲み枠・黒板風の囲み枠アメブロを仕事に活用するためのアイデアノート

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

      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(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>囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その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/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(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>囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その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/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(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>囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その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(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>囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その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(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>囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その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(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)部分を変更すると、ワッペンの横幅を調整できます。また、緑文字部分を変更すると、囲み枠の背景になっているデニム調の画像を好みの画像に変更することも可能です(囲み枠の背景としてタイル状に敷き詰められます)。以上、もしよかったら使ってみてくださいね。2014/10/23 記事公開2015/06/12 白を2種類追加☞ アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

      352
      24
      テーマ:
  • 29 Oct
    • 囲み枠(飾り枠)テンプレート ワッペン風(リネン調) アメブロ記事・カスタマイズ向け

      囲み枠(飾り枠)テンプレート ワッペン風(リネン調) アメブロ記事・カスタマイズ向けアメブロカスタマイズの松本です。こんにちは。またまた、アメブロ用の囲み枠(飾り枠)を作りましたワッペン風(デニム調)から、「デニム地」や「糸」の部分を変更したものです。Photoshopでリネン(麻)生地っぽい画像を自作して設定してみました(あまり質感をうまく表現できてないかもしれませんが^^;)。今回も、タグを一緒に書いておきますので、よかったらコピペ用でご利用下さい。【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。タグはアメブロ専用です。もしもそのまま他のブログ等で利用されると画像が表示されませんので、その場合は、画像をダウンロードして別サーバーにアップロードしたものをご利用下さいね。囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その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)部分を変更すると、ワッペンの横幅を調整できます。また、緑文字部分を変更すると、囲み枠の背景になっている麻生地調の画像を好みの画像に変更することも可能です(囲み枠の背景としてタイル状に敷き詰められます)。以上、もしよかったら使ってみてくださいね。☞ アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

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

      囲み枠(飾り枠)テンプレート 付箋紙風 アメブロ記事・カスタマイズ向けアメブロカスタマイズの松本です。こんにちは。先日の、黒板風の囲み枠(飾り枠)テンプレートに続き、今度は付箋紙風を作ってみました。付箋紙風の枠のみのシンプルなタイプと、テープで貼り付けたような効果を追加したタイプの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以前の古いブラウザで見ると残念な感じになってしまいますが、一応読むことはできます^^さぁ、次は何にしましょう?^^☞ アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

      283
      42
      テーマ:
  • 16 Oct
    • 囲み枠(飾り枠)テンプレート 黒板風 アメブロ記事・カスタマイズ向け

      囲み枠(飾り枠)テンプレート 黒板風 アメブロ記事・カスタマイズ向けアメブロカスタマイズの松本です。こんにちは。最近、アメブロ記事内で利用できる飾り枠を配布するのが流行ってるみたいなので、僕も作ってみました!「あまり他の人が作ってなさそうなのを」と思って、とりあえず黒板風にしてみました(暗色系は需要がないかな?とも思いながらも^^;)。タグも一緒に書いておきますので、よかったらコピペ用にご利用下さい。【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。囲み枠(飾り枠)テンプレート:黒板風(木枠・緑)■囲み枠(飾り枠)テンプレート:黒板風(木枠・緑)■↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。<div style="word-break:break-all;color:#fff;background-color:#140;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #020 inset;text-shadow:0px 0px 2px #000">★</div>囲み枠(飾り枠)テンプレート:黒板風(木枠・黒)■囲み枠(飾り枠)テンプレート:黒板風(木枠・黒)■↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)<div style="word-break:break-all;color:#fff;background-color:#191919;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #000 inset;text-shadow:0px 0px 2px #000">★</div>囲み枠(飾り枠)テンプレート:黒板風(木枠・青)■囲み枠(飾り枠)テンプレート:黒板風(木枠・青)■↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)<div style="word-break:break-all;color:#fff;background-color:#246;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #124 inset;text-shadow:0px 0px 2px #000">★</div>囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・緑)■囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・緑)■↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)<div style="word-break:break-all;color:#fff;background-color:#140;margin:10px 5px;padding:15px;border:4px solid #bbb;box-shadow:2px 2px 4px #ccc,1px 1px 1px #020 inset;text-shadow:0px 0px 2px #000">★</div>囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・黒)■囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・黒)■↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)<div style="word-break:break-all;color:#fff;background-color:#191919;margin:10px 5px;padding:15px;border:4px solid #bbb;box-shadow:2px 2px 4px #ccc,1px 1px 1px #000 inset;text-shadow:0px 0px 2px #000">★</div>囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・青)■囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・青)■↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)<div style="word-break:break-all;color:#fff;background-color:#246;margin:10px 5px;padding:15px;border:4px solid #bbb;box-shadow:2px 2px 4px #ccc,1px 1px 1px #124 inset;text-shadow:0px 0px 2px #000">★</div>なんか、これ作ってると楽しいので、また作ります!今度は何風にしましょうかねぇ^^☞ アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

      311
      66
      テーマ:

プロフィール

松本@このブログ

性別:
男性
お住まいの地域:
兵庫県
自己紹介:
.

続きを見る >

読者になる