はてなブログでも吹き出しを使ったデザインをCSSで実現する
Wordpressなんかのブログを見ると、よく吹き出しでインタビュー記事載せてたり、最後の一言の部分で吹き出し使われてるとこあるやん？僕個人的には結構読みやすくて好きなんよ。サクサク読めちゃう感じがあるよね、あの会話形式ってやつは。
んで、あれ、はてなブログでもやりたいやん？
そう！こういう風にね！
うわああーーーーー簡単にできたぁーーーーーー！
導入方法
こちらのやり方をパクります←え
id:shiromatakumi様、コードの提供ありがとうございます！
オリジナルコードじゃないので、このブログに転載するのはあれかなーって感じなので、詳しいやり方はリンク先のサイトをご覧ください。流れとしては、
- CSSを記述する
- 使いたい画像分のクラスと画像を準備する
- クラス付きのp要素を書く
こんな感じです。もちろんWordpressならプラグイン一発で入れられるんですが、これくらいの手間であればはてなブログでも全然いれますよ、僕は。
他の手法もあるの？
実際、他にもやり方を公開されているブログは多数ありました。
でもこのやり方が記事を書く時の記述量が一番少なくてオススメ。特にMarkdownとかはてな記法で書いている人は、普段タグ書かないと思うので、これくらいのタグであれば、IMEの単語登録とかでもサクッと書けますもんね。
あと、見た目的にも余分なタグがなくて非常にいい。
おわりに
はてなブログは制限のある中でのカスタマイズなので、ある意味割り切れていいなーとすら思っています。はてなブログ、マスターになりたいです。まじで。
ということで吹き出しを導入した僕は今後バリバリ使っていく予定です！
全然関係ないけど、吹き出しをtypoして福田氏になる確率の高さといったらないですね…
そいぎんた！
