Designer's Blog

2

最近よくブログでLINEのようなトークが写真と吹き出しで出てくる会話風に見える記事をあちこちで目にすることがあります。WordPressでも、吹き出しの会話を手軽に使えるプラグインの「Speech Bubble」をインストールして使う方法もあるのですが、個人的にプラグインを多用していて、いろいろと重くなるのが嫌なので、今回はCSSと記事投稿時に超絶便利なAddQuicktagを使ってWordPressのブログへ実装していきたいとおもいます。

はじめに

結構前からこの吹き出し(スピーチバブル)が気になってて、プラグインで実装するのは知っていたのですが、結構使いにくいというか。。。ようやく思い腰をあげて、実装してみました。
実装にあたり、いろいろ調べていたんですが、この記事を書くのに参考になった記事はこちらです。

スピーチバブルを使わずに会話形式の吹き出しができた!〜ワードプレスの便利な使い方〜 | 7つ星ブログ

実装すると、こんなものが作れます

サンプル例 1

NORI

NORI

ロキさん、久しぶり!最近元気してる?このLINEみたいな会話っぽいやつをWordPressのプラグインなしで簡単に実装できるように作ってみたんだ。

ロキさん

ロキさん

え?そんなのどうでもいいから、酒飲みましょうよぉ〜。もう最近いろいろ大変なんっすよ〜。

NORI

NORI

。。。。。。。


サンプル例 2

NORI

NORI

ロキさん、おつかれさまー!

ロキさん

ロキさん

おつかれーっす!!チョリーッス!チョリーーーーーッス!

という風に、こんな感じで会話風の記事を作ることができます。もちろんそれぞれで写真を変更することもできます。

実装方法

左からの吹き出し

<div class="voice">
<figure class="voice-img-left">
<img src="画像のURLを記載" alt="●●●"/>
<figcaption class="voice-img-description">画像下に出る名前</figcaption>
</figure>
<div class="voice-text-right">
<p class="voice-text">ここに吹き出しテキストを入力</p></div></div>

右からの吹き出し

<div class="voice">
<figure class="voice-img-right">
<img src="画像のURLを記載" alt="●●●"/>
<figcaption class="voice-img-description">画像下に出る名前</figcaption>
</figure>
<div class="voice-text-left">
<p class="voice-text">ここに吹き出しテキストを入力</p></div></div>

上記のコードをAddQuicktagへ登録

上のコードをそれぞれ、記事投稿時に超絶便利なAddQuicktagへ登録しておきます。こうしておくことで、記事を書く際に吹き出しをボタンひとつ押すだけでテキスト内へ反映させることができます。

以下の画像をクリックすると拡大表示されます。

AddQuicktag 設定

AddQuicktagの使い方参考記事

wordpress記事投稿で便利すぎるAddQuicktagの使い方 | ビジネスZERO

スタイルシート(CSS)へコードを追加

AddQuicktagに追加が終わったら、今度はお使いのテーマのCSSへ以下のコードをコピペします。

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

吹き出し部分をさらにカスタマイズしたいというCSSに強い方は、以下などを参考にして吹き出し部分をさらにカスタマイズするといいかもしれません。

See the Pen Chat Bubbles in CSS by Jason Founts (@Founts) on CodePen.dark

空白の削除

画像の下に空白ができることがあるようなので、それを自動で削除するため、以下のスクリプトをheader.php内にある、</head>のすぐ後ろ辺りにコピペで設置。

<!-- speech -->
<script>
	$(function() {
		$('.voice-img-left').find('p,br').remove();
		$('.voice-img-right').find('p,br').remove();
	});
</script>
<!-- End speech -->

これで実際に利用することができます。必要に応じてAddQuicktagに登録したボタンを呼び出して「画像の下に表示される名前」「スピーチ内の文章」を書き換えます。吹き出しのアイコン画像は正方形で100px x 100pxであらかじめ作成しておき、メディアに追加しておくと便利です。必要なときに画像のURLだけを書き換えて利用できます。

または定型の画像が決まっているのであれば、画像のURLも含んだコードを、同様にAddQuicktagに登録して呼び出すと記事の編集スピードや汎用性が高くなると思います。

まとめ

WordPressを触ったことが人であれば、コピペだけで済むのでそんなに難しくはないと思います。AddQuicktagに必要なコードを登録しておき、ボタンひとつで呼び出してちょっと編集するだけで、会話風の記事に仕上げることができます。是非参考にしてみてください。以上、コピペでボタンクリックで簡単にWordPressでLINE風の吹き出しを作成する方法のご紹介でした。

Sponsored Link


その他関連記事

コメントはこちら

TOPへ戻る