週刊とっしーぱんち

昭和生まれのブロガーが綴る、全力脱力系雑記帳

【趣味ではじめるWebサイト】吹き出しが作ってみたくて作ってみた話

おはよーございます。

 

毎日楽しく皆さんのブログを読ませていただいているのですが、記事内に出てくる吹き出し表示のやつ。あれが前からやってみたくてやってみたかったのでやってみた話です。

 

まずはお手本さがしから。

いきなりCSSで書けるような達人ではないので、ネットを徘徊してよさそうな見本を検索。

結果、こちらのサイトが僕にはとても分かりやすくて参考にさせていただきました。

ありがとうございます🙏🙏🙏

miyu-info.com

 

CSSを自分なりに少し改造します。

左からも右からも吹き出し出るようにしつつ、チャットの見た目を自分なりに改造していきます。改造作業はMacBookさんのPC内でHTML作って見た目確認して、を繰り返した感じです。

 

はてなブログに組み込んでみます。

PC内で作ったCSSを管理画面のデザインCSSに入れます。

ブログ記事みたままモードで作ってHTML編集画面から吹き出しのコードを書きます。

そうすると・・・

 

 

 

 

 

 

 

 

画像名

で、できた!?うさぎさん

画像名

できたとは限らないよ?カエルくん

 

 

 

 

 

できてる・・?

 

自分の環境からはふきだし見えているようなんですが、読者の皆様にはちゃんと表示されているのでしょうか?もし、見えていたらコメントいただけると嬉しい&安心します。

 

ひ、ひとまずこれにてめでたく当ブログに新しいパーツが導入されました!やった🎉

ところで、吹き出し作ることに夢中になりすぎて、肝心の使い方をあまり考えていませんでした(笑)

 

今後はカエルさんとうさぎくんの吹き出しをうまいこと取り入れて、記事を楽しく書けていけたらいいなと思います。吹き出しの活躍に乞うご期待!

 

では、また!