アメブロまとめ

前に作ったことのある黒板風の囲み枠を応用して、コルクボード風(2種類)とホワイトボード風(1種類)の囲み枠にしてみました。 ただ、よく考えると、コルクボードに直接文字を書くことって基本的に無いので、ホワイトボード風だけでも良かった気がしますが、せっかくですので公開します。 HTMLタグは表示サンプル内 … 続きを読む about アメブロの記事で使える「コルクボード風、ホワイトボード風の囲み枠」3種類

アメブロで、チャットのような会話風の記事を書くための、「フキダシ風の囲み枠」を作ってみました。 WordPressのサイトなどではよく見かけますが、アメブロではあまり見た覚えがなかったので。 タグがちょっと複雑怪奇な感じになってしまいましたが、ひとまず左右ペアを5色、合計10種類のフキダシ風囲み枠を作 … 続きを読む about アメブロの記事で使える「フキダシ風の囲み枠」

アメブロの記事で使える、枠線なし・背景ベタ塗りの「枠線なしの囲み枠」の紹介です。 枠線がなくても、背景を塗りつぶすことでよく目立ちますので、囲み枠としてしっかり機能すると思います。 シンプルな矩形(長方形)に加え、角丸、影付き、角丸＋影付き、それぞれに色を10色の組み合わせで、合計40種類のバリエーシ … 続きを読む about アメブロの記事で使える「枠線なしの囲み枠」40種類

アメブロの記事で使える破線の囲み枠です。 縫い目のようにも見えて、シンプルながら実線よりはデザイン性のある囲み枠として使えると思います。 枠線の太さ違い3種類と、色違い10種類、角丸の有無で、合計60種類のバリエーションを用意してまとめてみましたので、もし気に入ったものがあれば使ってみてください。 表 … 続きを読む about アメブロの記事で使える「破線の囲み枠(＋角丸あり)」60種類

アメブロの記事で使える点線の囲み枠です。 点が小さいと控えめな囲み枠、点が大きくなるとかわいい感じの囲み枠の１つとして使えると思います。 バリエーションとして、枠線の太さ(点の大きさ)違い3種類と、色違い10種類、角丸の有無で、合計60種類を用意してまとめてみましたので、もし気に入ったものがあれば使っ … 続きを読む about アメブロの記事で使える「点線の囲み枠(＋角丸あり)」60種類

アメブロの記事で使える二重線の囲み枠です。 シンプルですが、枠線が二重になっている分、一本の実線で囲っただけの囲み枠よりは目立つかも知れません。 枠線の太さ違い4種類と、色違い10種類、角丸・影付きの有無で、合計120種類のバリエーションを用意してまとめてみましたので、もし気に入ったものがあれば使って … 続きを読む about アメブロの記事で使える「二重線の囲み枠(角丸・影付きあり)」120種類

囲み枠ジェネレーター 一本線(実線)で囲んだだけの最もシンプルな囲み枠から、破線や点線、二重線の囲み枠、角丸の囲み枠、影付きの囲み枠など、様々な囲み枠のコピペで使えるタグをマウス操作だけで簡単に作れるようジェネレーターにしました。 下の赤い一本線の囲み枠の中で自分で自由に囲み枠を作れるようになっていま … 続きを読む about アメブロの記事で使える囲み枠を自分で作れる「囲み枠ジェネレーター」

アメブロの記事で使える「カギ括弧風の囲み枠」を作ってみました。 囲み枠の囲んだ範囲の左上と右下だけにカギ括弧を付けたような境界線が表示されます。 バリエーションは、色違いで6種類作ってあります。 タグは、表示サンプルの内側に書いてありますので、気に入ったのがありましたらコピペで使ってみて下さい。 表示 … 続きを読む about アメブロの記事で使える「カギ括弧風の囲み枠」6種類

アメブロの記事で使える「井形の囲み枠」です。 最もシンプルな実線の囲み枠の角が突き抜けて交差したような形状になっています。 これもシンプルですが、独特のインパクトがありますので、そのあたりを生かす使い方をすると効果的ではないかと思います。 バリエーションは、色違いを6種類作ってみましたので、もし気に入 … 続きを読む about アメブロの記事で使える「井形の囲み枠」8種類

アメブロの記事で使える、複数行をかっこで括ったような「括弧風の囲み枠」です。 一見、本当に括弧なので、囲み枠と呼んで良いのかちょっと考えてしまいます。 色のバリエーションはひとまず6色作ってありますので、気に入ったのがありましたら使ってみて下さい。 タグは、表示サンプルの内側に書いてありますのでコピペ … 続きを読む about アメブロの記事で使える「括弧風の囲み枠」6種類

アメブロの記事で使える「枠線をボカした囲み枠」の紹介です。 何という名前にすればよいか思いつかなかったので、そのまま「柔らかい印象の囲み枠」にしました。 枠線にふんわりとボカシを利かして、柔らかい感じを意識した囲み枠になっています。 色のバリエーションは6色作ってみましたので、もしも、気に入ったのがあ … 続きを読む about アメブロの記事で使える「枠線をボカした囲み枠」6種類

アメブロの記事で使える「ステッチ付きの囲み枠」を作ってみました。 周りを白い糸で縫い付けたような布のような雰囲気を狙ってみました。 色は、ひとまず8色用意してありますので、もし気に入ったのがありましたら使ってみて下さい。 貼り付け用のHTMLタグを囲み枠の表示サンプル内に書いてありますので、コピペで使 … 続きを読む about アメブロの記事で使える「ステッチ付きの囲み枠」8種類

アメブロの記事で使えるシンプルな囲み枠です。 普通の実線で囲っただけのシンプルなものですので、デザインが主張しすぎない囲み枠が欲しいときにどうぞ。 枠線の太さ違い3種類と、色違い10種類、角丸・影付きの有無など、合計120種類のバリエーションを用意してまとめてみましたので、もし気に入ったものがあれば使 … 続きを読む about アメブロの記事で使える「シンプルな一本線の囲み枠(角丸・影付きあり)」120種類

アメブロの記事で使える、タイトル付きの囲み枠（見出し付き囲み枠）を作ってみました。 スッキリと見やすいシンプルなデザインを、と思って作りましたがどうでしょう？ 色のバリエーションは10色作りましたので、もし気に入ったものがあったら使ってみてください。 タグは表示サンプルの中に書いてありますので、コピペ … 続きを読む about アメブロの記事で使える「すっきりシンプルなタイトル付き囲み枠」10種類

CSSを使った斜めストライプ模様の囲み枠を作ってみました。 太めの枠線に斜めの縞模様が入った可愛い感じの囲み枠です。 バリエーションは、色違いで10種類用意してみました。 貼り付け用のHTMLタグも囲み枠の表示サンプル内に書いてありますので、コピペで使ってください。 表示サンプル(見本)とタグ 赤 … 続きを読む about アメブロの記事で使える「斜めストライプのかわいい囲み枠」10種類

アメブロの記事で使える「リネン調のワッペン風の囲み枠」を作ってみました。 リネン調の画像(自作)を使ったもの5種類と、CSSでそれっぽく作ったもの12種類の、合計17種類用意しました。 画像版は、タグをコピペで使えるようにPostimagesという画像配信専用のクラウドサービスに保存しています。 CS … 続きを読む about アメブロの記事で使える「ワッペン風の囲み枠(リネン調)」17種類

アメブロの記事で使える「デニム調のワッペン風の囲み枠」を作ってみました。 デニム調の画像(自作)を使ったもの8種類と、CSSでデニムっぽく作ったもの8種類の、合計16種類用意しました。 画像版は、タグをコピペで使えるようにという画像配信専用のクラウドサービスに保存しています。 CSS版は、見た目は画像 … 続きを読む about アメブロの記事で使えるの「ワッペン風の囲み枠(デニム調)」16種類

黒板風の囲み枠に続き、今度は付箋紙風の囲み枠を作ってみました。 ちょっと変わった囲み枠だと思いますので、訪問者の興味を引くことができるかもしれません。 付箋紙のみのシンプルなタイプと、テープで貼り付けたような効果を追加したタイプの2種類、それぞれ3色のバリエーションを用意しました。 黒板風の時と同様、 … 続きを読む about アメブロの記事で使える「付箋紙風の囲み枠」6種類

アメブロの記事内で利用できる黒板風の囲み枠を作ってみました。 暗色系は需要が少ないかもしれないとも思ったのですが、「他の人があまり作ってなさそうなのを」と思って、今回はこれにしてみました。 バリエーションは、黒板の盤面に当たる背景部分が濃い緑・黒・濃い青の3種類、フレームに当たる枠線部分が木枠風・アル … 続きを読む about アメブロの記事で使える「黒板風の囲み枠」6種類