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

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

      2017/01/06

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

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

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

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

テキストを会話風にしたい!

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

chihou-tsunagari-1

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

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

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

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

カスタマイズのゴール

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

kaiwa-text-1

 

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

kaiwa-text-2

 

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

HTMLコード

まずはHTMLのコード。下記のコードの日本語の部分を変更するだけで「左からの吹き出し」が作れます。

<div class="kaiwa">
 <figure class="kaiwa-img-left">
   <img src="画像のパス(URL)" alt="画像名">
 <figcaption class="kaiwa-img-description">
     人の名前や画像の説明
 </figcaption>
 </figure>
 <div class="kaiwa-text-right">
   <p class="kaiwa-text">
     吹き出しの中のテキスト
   </p>
 </div>
</div>

 

「右からの吹き出し」を作るには、左からの吹き出しの中のクラス名を2つ変えるだけでOK。

  1. kaiwa-img-leftを「kaiwa-img-right」に
  2. kaiwa-text-rightを「kaiwa-text-left」に

コードはこんな感じです。

<div class="kaiwa">
 <figure class="kaiwa-img-right">
   <img src="画像のパス(URL)" alt="画像名">
 <figcaption class="kaiwa-img-description">
     人の名前や画像の説明
 </figcaption>
 </figure>
 <div class="kaiwa-text-left">
   <p class="kaiwa-text">
     吹き出しの中のテキスト
   </p>
 </div>
</div>

 

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

<!--左からの吹き出し-->
<div class="kaiwa">
 <figure class="kaiwa-img-left">
   <img src="https://moriawase.net/img/no-img2.png" alt="no-img2">
 <figcaption class="kaiwa-img-description">
     にゃー
 </figcaption>
 </figure>
 <div class="kaiwa-text-right">
   <p class="kaiwa-text">
     にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!
   </p>
   <p class="kaiwa-text">
     にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!
   </p>
 </div>
</div>

<!--右からの吹き出し-->
<div class="kaiwa">
 <figure class="kaiwa-img-right">
   <img src="https://moriawase.net/img/no-img2.png" alt="no-img2">
 <figcaption class="kaiwa-img-description">
     にゃー
 </figcaption>
 </figure>
 <div class="kaiwa-text-left">
   <p class="kaiwa-text">
     にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!
   </p>
   <p class="kaiwa-text">
     にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!にゃー!
   </p>
 </div>
</div>

テキストが吹き出し風になる仕組み

テキストが吹き出し風になる仕組みですが、ブログのトップページに表示されている「左が画像で右がタイトル」の一覧記事のようなデザインと同じです。

kaiwa-text-3

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

「figure」タグとは?このタグを使うメリットは?

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

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

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

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

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

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

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

kaiwa-text-4

 

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

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

CSSコード

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

/*--------------------
 吹き出しを作る
--------------------*/
/* 全体のスタイル */
.kaiwa {
  margin-bottom: 40px;
}
/* 左画像 */
.kaiwa-img-left {
  margin: 0;
  float: left;
  width: 60px;
  height: 60px;
}
/* 右画像 */
.kaiwa-img-right {
  margin: 0;
  float: right;
  width: 60px;
  height: 60px;
}
.kaiwa figure img {
  width: 100%;
  height: 100%;
  border: 1px solid #aaa;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.kaiwa-img-description {
  padding: 5px 0 0;
  font-size: 10px;
  text-align: center;
}
/* 左からの吹き出しテキスト */
.kaiwa-text-right {
  position: relative;
  margin-left: 80px;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  position: relative;
  margin-right: 80px;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
p.kaiwa-text {
  margin: 0 0 20px;
}
p.kaiwa-text:last-child {
  margin-bottom: 0;
}
/* 左の三角形を作る */
.kaiwa-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #aaa;
  top: 15px;
  left: -20px;
}
.kaiwa-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #fff;
  top: 15px;
  left: -19px;
}
/* 右の三角形を作る */
.kaiwa-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #aaa;
  top: 15px;
  right: -20px;
}
.kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  top: 15px;
  right: -19px;
}
/* 回り込み解除 */
.kaiwa:after,.kaiwa:before {
  clear: both;
  content: "";
  display: block;
}

 

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

吹き出しの色を変える

吹き出しの色を変える時に修正する必要がある箇所は2つ。

(今回は右からの吹き出しの色を変える説明ですが、左からの吹き出しの色も変えることができます)

/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  position: relative;
  margin-right: 100px;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}

↑と↓のコードです。

.kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  top: 15px;
  right: -19px;
}

 

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

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

/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  position: relative;
  margin-right: 100px;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
  background-color: #00da00;
}
.kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #00da00;
  top: 15px;
  right: -19px;
}

まとめ

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

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

chihou-tsunagari-1

chef

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

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

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

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

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

chihou-tsunagari-1

chef

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

カテゴリー WordPressカスタマイズ

注目 auひかり&スマートバリューでiPhone7の料金が激安に!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

注目 クラウド会計ソフト「freee」の使い方とスマホでの操作方法!

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

最新情報をお届けします

この記事を書いた人:シェフ

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

閉じる

CLOSE

アーカイブ

CLOSE