それでもわたしはおうちにいたい

おうちが大好きな私がなるべく楽しく暮らすためのブログ

吹き出しの向きによってアイコンを左右反転させるCSSをご紹介!【はてなブログ】

f:id:alysantwanet:20190131215544j:plain

ブログ記事とかでよく見かける、アイコンに吹き出しがついてて会話形式になってるやつ。あれ、記事全体が読みやすくてカジュアルになるのですごく良いですよね〜。

私もやってみたくなってちょっと調べてみました!
吹き出しとアイコンのCSSは結構使われているので参考になるものも多いです。

でも、あとちょっと・・・私がしたいことが足りてない。。。

何がしたいかというと、そう、吹き出しの向きによってアイコンを左右反転させたいのです!!

正面を向いているイラストなら問題ないと思いますが、そうでないイラストの場合は、右側に吹き出しがある時は右を向き、左側に吹き出しがある時は当然左を向いて欲しいわけです。

「じゃあ、右向きのアイコンと左向きのアイコンを作ればいいか!」って思ったけど、それもめんどくさいし、スマートじゃないですよね?classも増えるし!

と、言うことでCSSだけで解決しちゃいましょう!!

どんなことをするのか

私がやりたいこと

  • htmlはシンプルにしたいので、pタグにclassを入れるだけでアイコン+吹き出しを完成させたい!
  • 作る画像は最小限にしたい!
  • CSSだけで左右反転したい!

最終的にこうなります

右に吹き出しがある時は右を向き

左に吹き出しがある時は左を向く

使用している画像は下記の右向きの画像一枚です。

f:id:alysantwanet:20190131161605j:plain

どうやってするのか

使用するコードはこちら

imgの左右反転は割と使っている方が多いかと思いますが、このやり方ではpタグのafterコンテンツを左右反転しています。

吹き出しの方向に合わせてアイコンを反転させるCSS

上記のCSSは下記のサイトを参考にさせていただきました。

www.notitle-weblog.com

左右反転の他、角丸の具合や、ドロップシャドウ、色などをちょっといじっています。

ポイントなど

画像の指定部分のhoge01やfuga01は好きな名前に変えて使ってくださいね。例えばyome01、danna01など使うキャラクターを特定できる名前が良いと思います。表情違いが増えたら02、03と数字を増やしていくなど使いやすいようにしてください。

私の場合は

ari01

ari02

という感じにしています。

はてなブログをお使いの方は上記のCSSを、管理画面→デザイン→カスタマイズ→{}デザインCSSのところに追加してください。

f:id:alysantwanet:20190131172545p:plain

あとはブログ記事を書く時、pタグの中に吹き出しのclass(l-fukiかr-fuki)と画像のclass(上記のhoge01とかfuga01の部分)を書けば完了です。

<p class="l-fuki hoge01">ここにテキスト</p>など。

はてなブログをお使いの方で画像のURLの指定方法がわからない方は、下記のブログが参考になるかと思います。

www.kamen-utsu.com

この方法のメリット
  • 吹き出しに合わせて自動的に画像の向きが変わるから便利!
この方法のデメリット
  • 左右非対称のデザインのキャラクターだと使えない

最後に

いかがでしたか?お役にたてそうでしょうか?
コピペで対応できるので、是非気軽にチャレンジしてみてくださいね〜!!

はてなブログのカスタマイズについては、こちらの記事もおすすめです↓

www.ouchi-ni-itai.com