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