【つぶやき】CSSを使って吹き出しを作ってみた!

2018年12月29日ブログ

 
以前から記事に会話を取り入れています。
今までは「Speech bubble」というプラグインを使っていました。

 
そして今回はHTML・CSSで作るアイコン付き吹き出しを作りたいと思い挑戦してみました。

 

きらり

きらり

これが新しくHTMLとCSSで作った吹き出しだね!
結耶

結耶

そうそう♪ちょっと苦労したけどなんとかできましたよ(^^;)

 

 

HTML・CSSでできる吹き出しにしたわけ

今回はどうしてHTML・CSSのアイコン付き吹き出しにしようと思った理由は「プラグインの整理」です。

ブログ初心者にとってプラグインはとても簡単で便利なありがたいものです。
ですがWordPressをはじめてからプラグインに頼ってきたせいでプラグインの数が増えてきました。

知っている人も多いとは思いますが、プラグインが多いとブログの表示速度が遅くなるといわれています。

なのでプラグインからHTMLCSSのアイコン付き吹き出しに変更しようと思ったわけです。

 

きらり

きらり

でもすぐにプラグインを削除できないでしょ!?
結耶

結耶

そうなんだよね。プラグイン削除するには今まで挿入した吹き出しを変更してからじゃないとダメなんだよね(^^;)

 
私は『Stinger Plus2』というテーマを使っています。
『Stinger』の有料版にはプラグインを使わないアイコン付き吹き出しがついています。
有料版にすればわざわざ導入する必要もないのですが、私が使っている『Stinger Plus2』は無料テーマなので使えません。

なので自分で導入するしかありません。

 

 

HTML・CSSを使ってアイコン付き吹き出しを作ってみた!

HTML・CSSでアイコン付き吹き出しを作ろうと思っても当然私が1から作ることはできません。

HTML・CSSの会話風吹き出しコードを紹介しているところはたくさんあるのでそれらを参考にさせてもらうことにしました。

いくつかのサイトで紹介されているコードを使ってせっちしてみtqもの…パソコンで見るとちゃんと表示されているのに、スマホで見ると吹き出しがアイコンの下になってしまいました。

修正してみようと試してみましたが私の力では修正できず(^^;)

いくつか試してみてスマホでも吹き出しがちゃんとアイコンの横に表示されたのは下のサイトのコードでした。

 
こちらのCodeCampus様の「CSSだけで吹き出しをつくる!デザインサンプル26個」の中の『会話風吹き出し』を使わせてもらいました。

 

カスタマイズ

CodeCampus様のコードをベースに吹き出しやアイコンなどのカスタマイズや調整をしました♪

 

きらり

きらり

みんなよく『三角部分』で手こずるみたいだけど結耶大丈夫だった?
結耶

結耶

ちょっと手こずったけどCodeCampus様でも参画部分の説明あるし、覚えてしまえばすぐにできるよ!

 
CSSを追加したり値の変更したりしてなんとかできたのが上のような会話風吹き出しです。

そしてもうひとつ。
心の声(考えごと風)の吹き出しも作りました。

 

結耶
結耶

美味しい『味噌ラーメン』が食べたいっ!

結耶

きらり

結耶の心の声もバレバレだね!www

 

 

最後に

今回HTML・CSSの会話風吹き出しを作ってみました。
なかなかコピペだけでそのまま使えず、変更や調整が必要でしたが、自分で設置できると嬉しいものです(*^^*)

そして記事に挿入するHTMLコードを『TinyMCE Template(テンプレート作成・登録できるプラグイン)』に登録をして記事にいつでも挿入できるようにしました!

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。