WordPressで、「Speech Bubble」プラグインを使わないで、CSS(スタイルシート)とHTMLで、会話形式の吹き出しバブルデザインを構築する方法。

5/5 (2)

WordPressで、会話形式の表現をしてみたいと思います。が、・・・「Speach Bubble」プラグインを使わない本当の理由とは?

以下の画像のような、吹き出しバブルを使って、

ライン風の会話形式に、話している人の画像を表示させるようにしたいと思いました。

2016-07-23_13h37_35

関連リンク

本当は、Wordpressのプラグイン「Speach Bubble」を使って、簡単に済ませようと考えていました。

が、・・・

キャプチャ

最終更新が2年前ということで、今後のアップデートをあまり期待できないかも知れないという不安に駆られて、

結局のところ、最終的には、CSS(スタイルシート)とHTMLで、構築する方法を選択しました。

その試行錯誤を、ここに備忘記録として残しておこうと思います。

また、いつの日にか、更なるバージョンへアップしたい時に、『踏み台』になってくれるでしょうから!!!

CSS(スタイルシート)3人会話形式用

ここでは、3人の登場人物を用意します。

1人ごとに、吹き出しの色を変えたかったので、

パターンを3種類用意することになりました。

HTML

HTMLは、こんな感じです。

で、・・・

これを表示させてみると、・・・


タケル
ここに会話を入れます。

はい!

このように表示されます。

もちろん、レスポンシブル対応です。

会話形式の場合には、同一のHTMLを何回も使用しますので、別途、「Post Snippets」プラグインを利用します。

会話形式の吹き出しバブルで、記事を書く時には、何度も、何度も、同じHTMLを書かなければいけません。

その都度、同じHTMLを記述することは、現実的とは言えませんよね。

そこで、利用したいのが、・・・

キャプチャ

「Post Snippets」です。

長いHTMLをショートコードとして登録して利用します。

こちらの詳細は、こちらで、記事にしています。

宜しければ、お読みください。

非常に、便利なプラグインです。

これからは、Wordpressなども含めて、このような画像による「会話形式」の

ブログが多数出現してくると予想されます。

あなたも、この記事を参考に、ご自分のブログに採用されてみてはどうでしょうか?

Please rate this

  にほんブログ村 ネットブログ ポータルサイトへ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

209 views
トップへ戻る