テケオは眠くても頑張るぞ!

何もかも面倒臭い。そんなテケオの生き方や考え方をつづるブログ

【jQuery】CSSで書いた吹き出しをもっと簡単に導入したい!

f:id:tektekeo:20170521211906j:plain

こんにちは。テケオです。

ブログでちらほら見かける会話系の吹き出し。

めちゃくちゃ簡単に導入できるよう過去に2回ほど記事を書かせていただきました。

しかし、新たな不満点が出てきてしまった!

その不満点と解決策をまとめてみました。ではご覧ください。

 

吹き出しをもっと良くしよう。

まずは過去記事をご紹介。

www.kouritsu30.com

www.kouritsu30.com

会話系の吹き出しですね。導入がめっちゃ簡単。

しかし、過去記事の中にこんな1文が...

 

吹き出しを多用しているブログ様は写真をbackground-imageで貼り付けていた。 何が嬉しいかを簡単に言うと、画像のURLを探して貼り付ける必要がない。 そしてhtmlの記述量が飛躍的に少ない! 確かにこれなら続けることが出来そう。

【CSS】会話してるっぽい吹き出しを自分好みにアレンジしてみた - 30代独身男の省エネライフ

 写真をbackground-imageで貼り付けていること。

何が問題かというと、新しいキャラが出るたびにCSSにどんどん書き加えなければいけないのである!

なんども使うキャラならストレスは全然ないが、特に1回だけ登場する新キャラならば逆に面倒臭い。 

当初そういうキャラに吹き出しは使うつもりはなかったが、やっぱり思い直した。

1回のみの登場でも、会話っぽくした方がブログ的には絶対いいよなぁ

てな訳で、色々駆使して新しい感じのものを作ったのをご紹介しよう。

ソースコードと出力結果

まずはソースコードをご紹介しよう。

HTML
<p class="t-fukidashi left-fukidashi"><span class="src_info">https://cdn-ak.f.st-hatena.com/images/fotolife/t/tektekeo/20170515/20170515231048.png</span>俺は1回のみのキャラ</p>
<p class="t-fukidashi right-fukidashi"><span class="src_info">https://cdn-ak.f.st-hatena.com/images/fotolife/t/tektekeo/20170515/20170515233142.png</span>俺も1回のみのキャラ</p>
CSS
span.src_info{display:none}
javascript
<script>
$('.t-fuki').each(function(i) {
    $(this).attr('id', 'temp-fuki-img'+i);
    var url = $(this).children('span.src_info');
    var cssImgTemp = '<style type="text/css">#temp-fuki-img'+i+':after{background-image:url('+url.text()+');}</style>';
    $(this).after(cssImgTemp);
    url.remove();
                   });
</script>

出力結果

俺は一回のみのキャラ

俺も一回のみのキャラ

やっていること

  1. 一回のみのキャラの吹き出しのpタグにt-fukidashiクラスを付与
  2. t-fukidashiクラスの中にsrc_infoクラスを持ったspanの中に画像のURLを書く
  3. javascriptが動作すると、動的にsrc_infoクラスに書いた画像のURLをbackground-imageに書き込む?ことで、画像を表示している。

だいたいこんなイメージ。

ちなみにCSSのdisplay:noneは、javascriptが動作完了する前に見られた時、URLが表示されるのを防ぐためです。

まとめ

単発キャラの吹き出しを簡単に表示できるようにしたよ!

 

ブログを書き続けて思ったのが、名前を必要としない単発キャラが出現することです。例えばキムタクとか誰が見てもわかりますよね。

また、画像に名前をつける作業がそんなに苦じゃなかったこと。

当初は面倒な作業だと思っていたのですが、やってみたらそんなにだった。

もっといいブログにしたいという欲求が優りましたねw

ただ、SEO的には悪いですけどw

よかったら参考にしてください。

コピペするだけで上手くいく感じではないので、興味のある方はお問い合わせからご連絡お願いします。

一定多数からのご連絡がありましたら、コピペでOKの記事を掲載するかもしれません。

ではでは。

追記:2017年9月5日

この手法はjavascriptが毎回動作してしまうため、現在当ブログでは別の方法で吹き出しをつけています。