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

便利なサービスや製品紹介、スマホゲームや動画視聴のレビュー、ブログのカスタマイズ方法などを書く雑記ブログ

【CSS】会話してるっぽい吹き出しを自分好みにアレンジしてみた

f:id:tektekeo:20170515234005p:plain

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

ブログを書き続けて2週間くらい経ったでしょうか?

スター、ブクマ、コメント、読者登録など「人と人との繋がり」をブログを通じて感じており、面白くなってきました。

さて、私の記事では、テーマに対して自分の意見を言ったり、人との会話を書いたりしています。

そういう時に吹き出しがあった方が視覚的に面白いと思い、調べてアレンジしてみました。

 

訴求力のあるブログへの道

2週間ほどブログを書きましたが、はてなブログの機能は優秀で、何も知らなくても綺麗なブログが勝手に出来ます。

しかし、自分のブログを見返した時、「文字ばかりで自分が言いたいことがわかりづらい。」と感じました。

 

吹き出しを作るには「CSSファイル」を編集しなければなりません。

簡単に言うと、ホームページのレイアウトを定義するファイルです。

どげんかせんといかん!

そう思い立って、読者登録させていただいている方々のブログを徘徊...

すると、「吹き出し」を使っている方々が何人かいらっしゃいました。非常に見やすい!

しかし、CSSファイルの編集がキツイ!と言う理由なのか、以外に使っている人がいない!

これはチャンスやで!!

何を隠そうわたくしテケオ、ちょっと出来るのである。

とりあえずググる

かと言うものの完全自作で作る気はサラサラない。

誰がソースコードを公開していると期待して探したら速攻見つけた。

moriawase.net

とりあえず使わせていただいた結果がこちら。

f:id:tektekeo:20170516000620p:plain

 おお、吹き出し出来てるやんけ!

だけど、少し使い続けてきたら不満が出てきました。

不満点を挙げてみる

※以下の不満点はソースコード参照先の著者を貶めるつもりは毛頭ありません。

あくまで私の意見です。

吹き出しが長い

文字数が少なくても、端から端まで吹き出しが出てしまう。

長すぎる吹き出しに違和感...

左吹き出し時のコメントがめっちゃ左

吹き出しが長いため、左の吹き出し時に写真と文字との距離が以上に遠くて違和感。

 

以上2点はCSSがうまく反映されてないか、少し書き換えれば解決出来そう。

でも、、、次の不満は結構致命的。

編集がめんどくさい

html編集モードで編集する必要がどうしてもあり、なおかつクラスや文字、画像のURL設定など結構めんどくさい。

私はhtmlが読めるのでコードを見れば、ざっくり見た感じをイメージ出来るけど、素人の方からしたらかなりのストレスだろう。

そして、クラスやタグなどが編集中に不本意に触ってしまうと、「バグった!」と思ってしまうでしょう。

個人的には画像のURL設定がめんどくさい。文字列は長いし、目的の写真のURLを確認するまがめんどくさい。などなど...

みなさん、編集がめんどくさくて断念したんじゃないですか?(確信)

再びブログ徘徊

3日間くらい上記のコードを使っていたけど、めんど臭い。

本当にこんなこと毎回続けてるのか?と吹き出しを多用してそうなブログを徘徊し直す。

結果、私が見た限り誰も上記のコードを使用してなかった。

※2017年9月16日に追記

おそらくこのソースコード発祥の方を発見。何人もの方が同じのを使われており、誰を参照すれば良いかわかりませんでした。

www.notitle-weblog.com

シロマさんと言う方です。バリバリ利用させていただいています。

本当にありがとうございます

 

不満点の打開策

吹き出しを多用しているブログ様は写真をbackground-imageで貼り付けていた。

何が嬉しいかを簡単に言うと、画像のURLを探して貼り付ける必要がない。

そしてhtmlの記述量が飛躍的に少ない!

確かにこれなら続けることが出来そう。

 最初に見つけたもの新しく見つけたもの
コード量<div class="kaiwa">
<figure class="kaiwa-img-left"><img src="https://cdn.mogile.archive.st-hatena.com/v1/image/tektekeo/297796047469038224.jpg" alt="テケオ" />
<figcaption class="kaiwa-img-description">テケオ</figcaption>
</figure>
<div class="kaiwa-text-right">
<p class="kaiwa-text">文章が入るよ</p>
</div>
</div>
<p class="right-fukidashi tekeo">文章が入るよ</p>
出力結果

f:id:tektekeo:20170516004248p:plain

f:id:tektekeo:20170516004400p:plain

おわかりいただけるだろうか?

HTML文の量に対して、出力結果はさほど変わらない。

むしろ、最初に見つけたものは吹き出しが端まで行ってしまうので、写真では切れてしまっている。

完全に新く探してアレンジしたコードの方がええな( ^ω^ )

しかし、そうは問屋がおろしませんでした...

新たな問題点と解決方法

これでCSSはオッケー、過去記事の吹き出しを全部変えてしまおうと更新している時に問題点が発生した。さすがHTML、CSS。一筋縄でいかないのが通例なのである。

お前だれ?

友人Aとの会話で問題が発覚した。それは友人の吹き出しの時、

f:id:tektekeo:20170516005601p:plain

いい感じで表示できている。しかし、このイケメンが何者かわからなかったのである。

最初に見つけたものをもう一度見てみると、

f:id:tektekeo:20170516004248p:plain

名前を表示することができるのである!

テケオならまだしも、あのイケメンが突然登場すれば必ず「ダレ?」になることは必至!再び吹き出しを使っていたブロガーさんを拝見。

名前の必要性のないキャラしか登場していなかったのである。

コード編集を諦める

さてどうしよう。CSSをみる限り、名前を表示させようとすれば、結構な作業時間がかかるし、HTMLの記述量が増えてしまう ことは避けられない。

JavaScriptで動的にページを表示させれば、HTMLの記述量を抑えれるかもしれない。しかし、

メンドくさかったので諦めたのである!

写真に名前を入れる

あくまで、コード編集においての解決を諦めただけ。

素直に名前入りの写真を使用することにした。めんど臭い時にホームページとかでよく使う技である(技でもなんでもない)

で、作ったヤツがコチラ

文章が入るよ(運営4ヶ月目にしてアイコンを作ったので、「テケオ」は取っ払った。)

文章が入るよ

名前を変えることは出来ないけど、登場人物そんなに多くないだろうし、固定してしまえば済む話。あとは、一般男性と一般女性、友人女性を追加するくらいで良さそうだし。

まとめ

  • 自分好みの吹き出しを、他のブロガーの人の吹き出しを参考にしてアレンジしたよ
  • 吹き出しの編集時間より、この記事の編集時間の方が長かった...

スマホ表示とか確認はテケトーにしたから不安は残るけど、自分のiPhoneで映ったから「まあいいっしょ。」コードが汚いとSEOに悪いけど、全然許容範囲だし「まあいいっしょ。

見た目が良くても、もっとも大事なのはコンテンツ。

この記事は皆様のお役に立てたでしょうか?