amecare向け 囲み枠・ボックスデザイン各種
amecareに簡単に登録して使える囲み枠（ボックスデザイン）をたくさん作ってみました。
読者に読んでほしい重要な情報や、注意を促したいポイントなどを囲むことで、視覚的に目立たせることができます。
各囲み枠の中にある【この囲み枠のタグを取得・編集】というリンクをクリックすると、色や枠線の太さなどを自由にカスタマイズできますので、バリエーションは、ほぼ無限です。
シンプルな囲み枠(実線・破線・点線・二重線)
最もシンプルな囲み枠です。
外枠のdivタグと本文のdivタグのみのシンプルな構造で、外枠の方にスタイルを適用することで、色、枠線の種類、角の丸み、影などのバリエーションを実現しています。
構造は同じでも、枠線の太さや色、背景色、角の丸みなどを変えるだけでも、全く違った囲み枠になります。
「点」を大きくして色を変えると、明るく元気な感じにもできます。
こうして見ると、単に目立たせたいだけであれば、実はこの囲み枠だけあれば十分かもしれません。
タイトル付きの囲み枠
ここにタイトル
ほかに、タイトルが囲み枠の枠線の外側にタブのように貼り付くタイプ。
ここにタイトル
逆に、タイトルが囲み枠の枠線の内側にタブのように貼り付くタイプ。
ここにタイトル
タイトルを、囲み枠の横幅いっぱいにすることもできます。
ここにタイトル
少し変わったものとして、タイトル部分をリボンを掛けたような効果にした囲み枠も作ってみました。
ふきだし風の囲み枠
会話風の記事などに使える、アバターとふきだしを使った囲み枠です。
アバターの画像はURLを指定して好みのものを使うことができます。
しっぽ（ツノ）の部分はSVGというベクターグラフィックを使うことで、外部の画像ファイル無しで、色々な形を実現しました。
付箋紙風の囲み枠
画面に単色の付箋紙を貼り付けたような見た目の囲み枠です。
伝えたい言葉を、メモ書きのように貼り付けるのに向いているのではないでしょうか。
付箋が落ちないようテープで貼り付けたような効果や、
黒板風・ホワイトボード風の囲み枠
昔から学校にあった黒板の雰囲気を意識した囲み枠です（最近は無い学校もあるそうですね）。
文字色を白や明るめの色にすると、より雰囲気が出ると思います。
シンプルな囲み枠との違いは、枠の内側に、囲み枠の影と同じ方向の細い影と影と反対方向に細いハイライトを入れています。
板面が緑ではなく、青っぽい黒板にすることもできます。
ステッチ付きの囲み枠
囲み枠の外周に沿って縫い目を入れたような囲み枠です。
記事に布を縫い付けたような雰囲気を演出できると思います。
背景の色にもよりますが、縫い目を白くすると、より縫い目らしく見えることが多い気がします。
ふんわり柔らかい感じの囲み枠
外枠をぼかして、ふんわり柔らかい感じにした囲み枠です。
優しくて柔らかい雰囲気を表現したい時などにいかがですか？
明るめの色を使って背景と枠線を同じ色にすると、より柔らかい感じになりますね。
さらに、文字の色も同系にしても良いかもしれません。
濃いめの背景色に背景よりも明るい枠線にすると、周囲を光らせているようにも見えます。
斜めストライプ模様の囲み枠
外枠に斜め方向の縞模様を入れた囲み枠です。
明るい雰囲気や元気な感じを表現するのに向いているのではないでしょうか。
文字の背景色を透過すると、囲み枠の全面が斜め縞模様になり、全面斜めストライプ模様の囲み枠としても使えます。
さらに、縞模様の細かさを変えると、全く別の雰囲気の囲み枠のようになります。
井形の囲み枠
枠線が四隅で交差する見た目の囲み枠です。
シンプルですが、四隅が交差しているだけで、通常の囲み枠よりもかなり目立ちます。
木枠を組んだようにも見えますね。
かぎ括弧の囲み枠
左上と右下にカギ括弧をつけたような囲み枠です。
「これに注意してください！」と言いたい時などに良いのではないでしょうか。
利用シーンは限られるかもしれませんが、暗い色の背景に派手めの色のかぎ括弧という組み合わせは、非常によく目立ちますね。
大きな括弧の囲み枠
囲み枠全体の左右を括弧で囲ったような囲み枠です。
中央揃えでお知らせを書くのに向いているように思います。
括弧の曲がり具合の調整次第で円筒のようにも見えますし、
曲がりを0にすると左右を直線で挟んだ形になり、意外と色んな表現に使えそうです。
角をクルッとひねったような囲み枠
左上と右下をクルッと半周ひねったような効果を入れた囲み枠です。
「クルッ」の部分で、かわいさとインパクトを狙ってみました。
それ以外はシンプルな実線の囲み枠です。
影をつけることはできますが、「クルッ」の部分の影はつかないので、あまり濃い影にすると違和感が強くなってしまうかもしれません。
上下ギザギザの囲み枠
外枠の上下をギザギザにしてテープカッターでビリっと切り取ったような雰囲気を狙った囲み枠です。
かなり強いインパクトのある囲み枠だと思います。
ここぞ！という場所にスポット的に使うのが良いかもしれません。
ギザギザを細かくして、背景を明るめのグレーにすると、何となくアルミホイルのようです。
上下モコモコの囲み枠
外枠の上下が丸みのあるモコモコした雰囲気の囲み枠です。
色のせいもあるかもしれませんが、作りはギザギザと似ているのに、丸くなるだけで、かなり穏やかな雰囲気になりますね。
モコモコの部分のサイズは、あまり小さくしすぎると意味がなくなる(普通のシンプルな囲み枠でよくなる)ので、ある程度のサイズは確保しておくのが良いと思います。
ワッペン風(リネン調・デニム調)の囲み枠
背景に布地のような画像を使ったワッペン風の囲み枠です。
厚手の布地に薄手の白い布を縫い付けたような雰囲気に仕上げてみました。
この囲み枠の背景は、自作のリネン調テクスチャ画像を使っています。
なお、背景の画像はこちらの画像キャッシュ＆リサイズプロキシサービスを経由して提供しています。
デニム調の背景画像を使った囲み枠はこのようになります。
ステッチ部分の色も、リネン調とは別の色に変えてみました。
ルーズリーフ風の囲み枠
片側に丸穴を並べたルーズリーフ風の囲み枠です。
穴の位置は、上または左から選べます。
穴が左の場合はこんな感じです。
少し穴を小さくしてみました。
もちろん色を変えることもできます。
このくらい濃い色にすると、プラ板か、インデックス用の厚手の紙のように見える気がします。
歌舞伎舞台風の囲み枠
和風の囲み枠の第一弾、歌舞伎舞台風の囲み枠です。
各所の色は自由に変更できますので、例えば（全く和風ではありませんが）トリコロール風にするといったことも可能です。
まとめ
以上、amecareに簡単に登録して使える色々な囲み枠（ボックスデザイン）を紹介させていただきました。
使えそうなものはありましたでしょうか？
もし、欲しいものに近いものがありましたら、囲み枠の中にある【この囲み枠のタグを取得・編集】というリンクからジャンプしていただけば、ある程度のカスタマイズができるようになっていますので、よかったらご利用ください。
なお、今後も、ときどき囲み枠の追加・改善などしていきたいと思いますので、もし、ご意見やリクエストなどありましたら、お問い合わせなどからお気軽にご連絡いただければ幸いです。
amecare
amecare – アメブロ記事の執筆を楽にするChrome拡張機能
amecareは、パソコンを使ったアメブロの記事の作成や更新を楽で便利にする、パソコン派アメブロユーザーのためのChrome拡張機能です。 機能概要 amecareは、アメブロの...
