MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

画像と吹き出しテキストで会話風にするHTMLとCSS。

      2016/06/23

「隣の芝生は青く見える」ってよく言いますけど、一体どんな意味なんですかね。芝生って緑だと思うんですが…

まぁ、そんなことはどうでもいいんですが、ちょっと僕の悩みを聞いてもらえませんか?

僕は、このサイトのデザインが好きなんですけど、たまに他の人のサイトのデザインが気になる時があるんですよ。たまにですよ?

「これ、どうなってるんだろう…?」「僕のサイトでもこういうのやってみたいなぁ…かっこいいなぁ…」みたいな。

 

その中でも、長い間気になってしまったのが、「テキストを会話風にしているサイト」。左右から吹き出しが出てるやつです。

chihou-tsunagari-1

「僕もこんな感じで、それっぽいことをしているんですが、なんだかチープな感じがするんですよね」

有料テーマプラグインを使えばすぐに会話風のテキストにすることはできるんですが、やっぱり自分で試したくなるじゃないですか。

というわけで、挑戦してみました!意外に簡単でしたよ!コピペできるコードも紹介します!

※バックアップを取ってからお試しください!

カスタマイズのゴール

今回のカスタマイズのゴールはこちらです。

kaiwa-text-1

 

LINEのような色にすることもできます。

kaiwa-text-2

 

もちろん、レスポンシブに対応するようにしました。では、コードをご紹介します。

HTML

こちらがHTMLコード。

↑のコードの日本語の部分を変更するだけでOKです。

↓先ほどの猫の会話風テキストはこんな感じのコードです。

 

ブログのトップページに表示されている「左が画像で右がタイトル」の一覧記事のようなデザインと同じ考え方です。

kaiwa-text-3

 

やっていることは、これとほとんど同じですね。ポイントは画像の表示に「figure」を使ったことでしょうか。

テキストを会話風にすることができるサイトをいくつか確認してみたんですが、この「figure」というタグを使っていました。

「figure」タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文(メインフロー)から参照されるようなイラスト・図・写真・ソースコードなどのことです。

図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。

必要ならば、図表にキャプションや注釈を付けても良いでしょう。図表にキャプションを付ける場合には、「figcaption」タグを使用します。

引用:HTML5タグリファレンス

HTML5から使えるようになったタグみたいです。どうしてもこのタグを使わなければいけないわけではありませんが、なかなか便利なタグでした。

これを使おうと思った一番の理由は、画像の下にテキストを簡単に入れることができるからです。この猫の画像の下のテキストがそれです。

kaiwa-text-4

 

ここに人の名前を入れたり、画像の説明をしたり、いろいろと応用ができそうですよね。もちろん、必要なければ削除してもOKですよ。

では今度は、画像を左にしたり、線をつけたりするコードをご紹介します。

CSS

こちらがCSSコード。このコードを全体に適用される部分にコピペします。おそらく、スタイルシートの前半にコピペすればOKだと思います。

一番面倒だったのは「吹き出しの三角形を作る」ところ。なんとか形になりました。その他のコードに関しては特に真新しいことはしていません。

吹き出しの色を変える

吹き出しの色を変える時に修正する必要がある箇所は2つ。今回は右からの吹き出しの色を変える説明ですが、左からの吹き出しの色も変えることができます。

↑と↓のコードです。

 

上のコードに背景色を指定し、下のコードの「border-right」の「#fff」を、上の背景色と同じ色にするだけです。

LINE風の色にする場合はこんな感じのコードになります。

まとめ

いかがでしたか?毎回毎回「会話風のテキスト」にするわけでもないし、できれば余計なプラグインは避けたいところです。

ちなみに、ワードプレス限定のコードではないので、静的なホームページでサイトを運営している方などにも参考にしていただければ嬉しいですね!

chihou-tsunagari-1

chef

ご覧いただきありがとうございました!

ワードプレスでサイトを運営している方必見!簡単に吹き出しを使えるようにする裏技!

あ、そうそう、ワードプレスでサイトを運営している方にぜひ見ていただきたいカスタマイズがありました。

一回一回コピペして、画像をアップして…と、ブログで今回のコードを多用するのは疲れると思います。多用しなければ問題ないんですけど。

でも実は、会話風テキストをすぐに使えるようにする方法があるんです。

chihou-tsunagari-1

chef

こちらの記事にまとめてあるので、ぜひチェックしてくださいね!

 - WordPress・カスタマイズ

この記事が気に入ったらいいね!しよう

最新情報をお届けします