I love きういマンのWebサイト

I love きういマンのWebサイトです。商品レビュー、評論なんかではなく、みよきファミリーの中でのただの雑談記録です。


きういマンのWebサイト ロゴ

ブログに吹き出し風CSSを試してみた

オッスおらきうい!!

今日は、勉強も兼ねて、吹き出し風CSSを試してみるぜ!

 

f:id:myafun:20180501100345j:plain

きういの発言「だんなさん、このブログは、会話形式で、記載しているんですけど、会話形式の吹き出しをCSSでの記載にチャレンジしてみたいと思います。」

※※PCのみのCSSでのお話です。スマホの方は、変わんないかもです。

だんなさんの発言「おいらは、そんなことどっちででもええと思っとるんんじゃけどの」

 

きういの発言「時代はもう、HTML5!CSSですよ!だんなさんの知ってるベタ打ちHTMLの時代ではないんです!!」

 

だんなさんの発言「・・・・・・・・・」

 

きういの発言「では、お得意のぐーぐる、ぐるぐるっとな」

 

f:id:myafun:20180501132117j:plain

 

 

 

saruwakakun.com

きういの発言「この方のHPが勉強になりそうなんで、この方の方法を試して見たいと思います」

  

きういの発言「シンプルな四角い吹き出しを試してみますね(※PCのみです)」

 

きういの発言です!!どうですか?

 

だんなさんの発言「おお!!吹き出しになっとるよ!!」

 

 きういの発言「でも、これでは、誰の発言かわからないので、LINE風の吹き出しにチャレンジしてみます!(※PCのみです)」

きういの発言

どうですか?だんなさん。ライン風に見えてますか?

あーあー2行目のテスト中~テスト中~

はよ、飯の支度しろ!

 

 だんなさんの発言「おお!!LINE風!!」

 

 きういの発言「それを改良してっと・・・・」

 

きういの発言

どうですか?会話風の感じになってますかねぇ。そのまま文章が続いて、行が改行しても吹き出しが続くところがこのCSSのいい所ですね!

にゃふん!

 だんなさんの発言「だいぶ、それっぽくなってきたんじゃなーいん。所で右の人はいったい誰なんじゃろうか・・・・」

だんなさんの発言

だんなさんも吹き出しにしてみまた!

ほふん!

 

きういの発言

たまには、こんな感じにするのもいいのかと思います。

だんなさんの発言

詳細は、サルワカさんのHPを見て下さい!

 

 ※PCのみのCSSでのお話でした。スマホの方は、変わんないかもです。

 

saruwakakun.com

 

はてなブログの方は、管理画面→デザイン→カスタマイズ→デザインCSSの変更で、CSSを変更で来ます


privacy-policyお問い合わせ
Copyright ©I love きういマンのWebサイト All rights reserved.