CSSで簡単に吹き出しを追加する方法

CSSを使用して吹き出しを追加する方法は、インターネットにたくさん出ています。 bbPressで Reply(返信)吹き出しに置き換えようとし、いくつかのコードを適用したが、レイアウトが歪む現象が現れますね。 そうするうちに吹き出しコードを簡単に生成してくれるサイトを発見した。

http://www.ilikepixels.co.uk/drop/bubbler/라는 사이트입니다.

Speech Balloon Creator  - 吹き出しCSSジェネレータ

上記の図のように、以下の3つのボックスで、スライドバーを適切に移動させると上部に、実際の形状が表示され、簡単に所望の形状の吹き出しCSSを作成することができます。 適切オプションを指定した後、サイトの右上にある「CSS」ボタンを押すと、CSSコードをコピーして、実際の作業に使用することができます。

ここで重要なの引用であることを表示する三角形のアイコンを追加することです。 そしてhttp://www.ilikepixels.co.uk/drop/bubbler/サイトでは、三角形のアイコンの位置を好きなところに配置することができ、非常に便利です。

ワードプレスフォーラムプラグインbbPressに適用してみると:

Speech Balloon in bbPress

上記のように吹き出しの形が作られた。 単にラウンド処理(国境半径)よりも表示が良くなりましたね。 暇時の色も調整して見なければなら致します。

ちなみにプラグインは、javascript / jQueryテンプレートは、PHPスクリプトなど各種コードを販売する Codecanyonで、メニュースタイル、テーブルなどのさまざまな効果を実現するCSSコードやJavaScriptの/ jQueryテンプレートを購入することができます。

Codecanyonで販売されているCSSコード
Codecanyonで販売されているベストセラーCSSコード

※この記事で紹介したサイトのリンクをクリックすると、ないページと表示なりますね。 代わりに このサイトを利用してみてください。 上で紹介し、サイトのツールよりも機能が良いようです。

吹き出し自動生成サイト

注:

カテゴリー その他

3のコメント

    • こんにちは?

      お知らせいただきありがとうございます。

      次のサイトを利用してみてください。 この記事で紹介したサイトよりも良いようです。

      https://leaverou.github.io/bubbly/

      返信

コメントを残す