囲み枠ジェネレーターの使い方
- 「囲み枠の種類」を選択
- プレビューを見ながら操作パネルでカスタマイズ
- 作成した囲み枠のHTMLタグをコピペ
操作パネルで調整中は、リアルタイムでプレビューとその中のHTMLタグに反映されます。
作成されるHTMLタグは、スタイルもタグ内に記述されていますので、別途CSSへの追記をしなくてもHTMLタグを記事のHTMLソースに貼り付けるだけで囲み枠を表示できます。
囲み枠に独自のclass名を設定したい場合は、「追加class名」に入力してください。半角英数、-(ハイフン)、_(アンダースコア)のみ使えます。
「アメブロ用の属性を含む」を選択すると、HTMLタグにアメブロ標準の囲み枠との互換性を考慮した属性を追加します。
スマートフォンでも作成することは可能ですが、基本的にはPCで操作することを前提とした作りになっています。
囲み枠の種類について
シンプル(実線・破線・点線・二重線)
最もシンプルな囲み枠です。
外枠のdivタグと本文のdivタグのみのシンプルな構造で、外枠の方にスタイルを適用することで、色、枠線の種類、角の丸み、影などのバリエーションを実現しています。
単に目立たせたいだけであれば、実はこの囲み枠だけあれば十分かもしれません。
タイトル付き(4種類)
囲み枠の中で伝えたい内容をタイトル部分で端的に言うことで、より伝わり易くなることが期待できます。
お好みのものがあったら使ってみてください。
ふきだし風
アバターとふきだしを使った会話風の記事のための囲み枠です。
アバターの画像はURLを指定して好みのものを使うことができます。
しっぽ（ツノ）の部分はSVGというベクターグラフィックを使うことで、外部の画像ファイル無しで、色々な形を実現しました。
付箋紙風
画面に単色の付箋紙を貼り付けたような見た目の囲み枠です。
伝えたい言葉を、メモ書きのように貼り付けるのに向いているのではないでしょうか。
黒板風
昔ながらの黒板の雰囲気を意識した囲み枠です。
文字色を白や明るめの色にすると、より雰囲気が出ると思います。
背景色と枠線色を変更すると、コルクボード風、ホワイトボード風にすることも可能です。
シンプルな囲み枠との違いは、枠の内側に、囲み枠の影と同じ方向の細い影と影と反対方向に細いハイライトを入れています。
ステッチ付き
囲み枠の外周に沿って縫い目を入れたような囲み枠です。
布を画面に縫い付けたような雰囲気を演出できると思います。
ふんわり柔らかい
外枠をぼかして、ふんわり柔らかい感じにした囲み枠です。
優しくて柔らかい雰囲気を表現したい時などにいかがですか？
斜めストライプ模様
外枠に斜め方向の縞模様を入れた囲み枠です。
明るい雰囲気や元気な感じを表現するのに向いているのではないでしょうか。
背景色を透過すると、囲み枠の全面が斜め縞模様になります。
井形
枠線が四隅で交差する見た目の囲み枠です。
シンプルですが、四隅が交差しているだけで、通常の囲み枠よりもかなり目立ちます。
木枠を組んだように見せることもできそうです。
かぎ括弧
左上と右下にカギ括弧をつけたような囲み枠です。
「これに注意してください！」と言いたい時に良いのではないかと思います。
大きな括弧
囲み枠全体の左右を括弧で囲ったような囲み枠です。
中央揃えでお知らせを書くのに向いているように思います。
「曲がり」の調整次第で円筒のようにも見えますし、0にすると左右を直線で挟んだ形にもなり、意外と色んな表現に使えそうです。
角をクルッと
左上と右下をクルッと半周ひねったような効果を入れた囲み枠です。
「クルッ」の部分で、かわいさとインパクトを狙ってみました。
それ以外はシンプルな実線の囲み枠です。
上下ギザギザ
外枠の上下をギザギザにしてテープカッターでビリっと切り取ったような雰囲気を狙った囲み枠です。
個人的に、これまでで最も強いインパクトのある囲み枠だと感じます。
ここぞ！という場所にスポット的に使うのが良いかもしれません。
上下モコモコ
外枠の上下が丸みのあるモコモコした雰囲気の囲み枠です。
作りはギザギザと似ていますが、丸くなるだけで、かなり穏やかな雰囲気になりました。
ワッペン風(リネン調・デニム調)
背景に布地のような画像を使ったワッペン風の囲み枠です。
厚手の布地に薄手の白い布を縫い付けたような雰囲気に仕上げてみました。
なお、背景の画像はこちらの画像キャッシュ＆リサイズプロキシサービスを経由して提供しています。
ルーズリーフ風
片側に丸穴を並べてルーズリーフ風にしてみました。
穴の位置は、上または左から選べます。
囲み枠の追加・改善について
今後も、良さそうな囲み枠の追加、操作性などの改善をしていきたいと思いますので、もし、ご意見やリクエストなどありましたら、お問い合わせなどからお気軽にご連絡いただければ幸いです。