【コピペで簡単】吹き出し CSSテンプレート 基本4つと応用3つ

吹き出しのテンプレート、15選をまとめました。

コピペするだけ、簡単です。

スポンサーリンク

吹き出し CSSテンプレート 基本4つと応用3つ

使い方

利用されているテーマのCSS(スタイルシート)に、設定を追加することで、利用できます。「外観」→「テーマの編集」から、テーマの「style.css」に、以下をコピーして、追加してください。

その後、吹き出しを使いたい場所に、指定のタグを挿入すれば、OKです。

※タグは、コチラ(↓)のプラグインを使うと、ワンクリックで使えます。

「AddQuicktag」で、面倒なタグ打ちから、オサラバ!
記事を作成するとき、意外と必要になる、HTMLタグの入力。これが意外とめんどくさい。。 そこで、タグ・コードを…

❶ 基本の吹き出し(4つ)

1.右向き

右向き吹き出し❶

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

右向き吹き出し❷

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

線の太さ・カラーは、お好みで変えてくださいね。

2.左向き

左向き吹き出し❶

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

左向き吹き出し❷

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

線の太さ・カラーは、お好みで変えてくださいね。

3.上向き

上向き吹き出し❶

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

上向き吹き出し❷

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

線の太さ・カラーは、お好みで変えてくださいね。

4.下向き

下向き吹き出し❶

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

下向き吹き出し❷

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

線の太さ・カラーは、お好みで変えてくださいね。

❷ 応用の吹き出し(3つ)

5.グラデーション

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

6.ストライプ

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

7.点線囲い

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

線の太さ・カラーは、お好みで変えてくださいね。

応用編は、コチラ(↓)を使ってアレンジしたものなので、ご参考までに。

【コピペで簡単】タイトル(見出し)CSSテンプレート 15選
【コピペで簡単】タイトル(見出し)CSSテンプレート 15選
タイトル(見出し)のテンプレート、15選をまとめました。 コピペするだけ、簡単です。 タイトル(...

まとめ

吹き出しを作るには、いろいろなやり方がありますが、なるべくシンプルで、簡単な記述にしました。あとは、最下部の2行の「%」値をいじって、吹き出し△の位置を変えたり、角を丸くしたりなど、自分好みのアレンジに変えて、CSSカスタマイズを楽しんでください!

狐火兎
カラーは、自分のサイトの配色に合わせたり、目立つ色を使うとアピールできるので、オススメです。 では、また♪