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

Last Updated:2024年01月06日| | 8のコメント

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

CSSで簡単に吹き出しを追加する方法 - 吹き出し自動生成サイト

CSSで吹き出しを作成したい場合、バルーンの自動生成サイトを利用みることができます。 私が見つけたサイトは https://www.ilikepixels.co.uk/bubbler/ 입니다。

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

上の図のように、下のXNUMXつのボックスからスライドバーを適切に動かすと、上部に実際の形状が表示され、簡単に目的の形状のフキダシCSSを作成できます。 適切にオプションを指定した後、サイトの右上にある「CSS」ボタンを押すと、CSSコードをコピーして実際の操作に使用できます。

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

例:

WordPress フォーラムのプラグインbbPressに適用してみると:

Speech Balloon in bbPress

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

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

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

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

吹き出し自動生成サイト

WordPress 吹き出しプラグイン

WordPressから簡単に吹き出しを入れたい場合は、吹き出しプラグインをインストールして使用できます。

WordPressからカラーテキストボックスを作成する

WordPressでは、段落ブロックに背景色を割り当てるオプションを使用してカラーテキストボックスを作成できます。

カスタムスタイルを指定したい場合は、CSSクラスを指定して CSSでスタイルを定義できます。

JavaScriptを利用すると、以下のように少し華やかな(?)テキストボックスを作成できます。

WordPressを安全に運営するために、常に最新バージョンにアップデートし、長くアップデートされておらず放置されているプラ​​グインを削除してください。また、定期的にバックアップしてPCやクラウドストレージに保管してください。

メモ:


8のコメント

コメント

  1. こんにちは、文章を書いて本文中に上記の吹き出し形で(まるで引用のように)入れようとしたら、上記のcssをどのように適用すべきでしょうか? ブロック-詳細-cssに入れてみたのに反応がなく、テーマのカスタムcssに入れればspeech-bubbleを別に呼び出せる命令などがあるのでしょうか?

    応答
割引ニュース
DiviレイアウトAI発売記念割引!
AIで画像、テキスト、コーディング、フルページレイアウトを生成可能
ベストセラー WordPress テーマDivi
0
仕事
0
시간
0
0
期間限定
You This Coupon Code in Checkout
Click the code to Copy