WordPressでLINE風吹き出しカスタマイズ！

このブログを作る際に、始めて独自ドメインを取得して、なおかつWordPressを使い始めました。

なので、だいたいWordPress歴は1年半くらいになりました。

サイトのカスタマイズは、もうホント、ネットの情報に助けられています(^^)

その中で、私が使っているLINE風？チャット風？の吹き出しのCSSをご紹介します。

この記事の目次

1 使用しているサーバー
2 使用しているWordPressのテーマ
3 SimplicityでLINE風の会話文を表示する方法
4 画像と画像名付き、吹き出しはレスポンシブなLINE風会話のソースコード
5 Simplicity2 child: スタイルシート (style.css)などにコピー
6 実際に使用してみた画像
7 LINE風会話のAMP表示
- 7.1 挿入する画像、会話文のちょっとした工夫

使用しているサーバー

私が実際に使っているサーバーは、エックスサーバーです。

コチラしか使ったことはないのですが、ネット上に登録方法などの情報がたっぷりあるので、使うのに困ったことはないです。

また、カスタマーサポートもとても親切です。

私も、何度かメールで問い合わせをしていますが、毎回優しくて、良い感じです👍

使用しているWordPressのテーマ

私が使わせてもらっているのが、Simplicity2というテーマです。

内部SEO施策済みで、無料で、カスタマイズもしやすいと思います。

なんたって、超初心者の私が使えているので！

自分でカスタマイズする時用の「子テーマ」も配布してくれているのが、とてもありがたいです！

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

wp-simplicity.com

SimplicityでLINE風の会話文を表示する方法

Simplicityでは、簡単にLINE風の会話文を記事に載せることができます。

SimplicityでLINE風の会話文を表示する方法

Simplicityの拡張クラスを使って、本文記事にLINEぽい会話文を表示する方法を紹介します。尚、この機能はSimplicity1.3.8からの実装ですので、これよりもバージョンが低い場合は、アップデートする必要があります。LINE風会

wp-simplicity.com

画像と画像名付き、吹き出しはレスポンシブなLINE風会話のソースコード

私は、これに画像と名前を入れたくて、色々CSSを探して、まずは、こちらのサイトさんのカスタマイズを参考にさせていただきました。

https://arakumablog.xyz/post-3595/

arakumablog.xyz

あとは、こちらのカスタマイズに、Simplicityのデフォルトのように、吹き出しの長さを入力した文字に合わせてレスポンシブデザインにしようと思って、色々試してみたのですが、うまくいきません…。

結局、Simplicity内のフォーラムで教えていただいて、やっと満足のいくカスタマイズが出来上がりました！

教えていただいた皆さん、本当にありがとうございましたm(_ _)m

それがコチラのスタイルシートのソースコードになります。

/************************************
LINE風吹き出し
************************************/
/* 全体のスタイル */
.kaiwa {
  margin-bottom: 40px;
}
/* 画像 */
.kaiwa-img-left, .kaiwa-img-right {
  margin: 0;
  width: 90px;
  height: 90px;
}
/* 左画像 */
.kaiwa-img-left {
  float: left;
}
/* 右画像 */
.kaiwa-img-right {
  float: right;
}
.kaiwa figure img {
  width: 100%;
  height: 100%;
  border: 2px solid #d7ebfe;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.kaiwa-img-description {
  padding: 5px 0 0;
  font-size: 10px;
  text-align: center;
  line-height: 150%;
}
/* 吹き出しテキスト */
.kaiwa-text-right, .kaiwa-text-left {
  position: relative;
}
/* 左からの吹き出しテキスト */
.kaiwa-text-right {
  margin-left: 100px;
}
/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  margin-right: 110px;
  text-align: right;
}
p.kaiwa-text {
  background-color: #fafdff;
  border: 2px solid #d7ebfe;
  border-radius: 10px;
  display: inline-block;
  margin: 0 0 20px;
  padding: 10px;
  text-align: left;
}
p.kaiwa-text:last-child {
  margin-bottom: 0;
}
/* 三角形を作る */
.kaiwa-text-right:before, .kaiwa-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  top: 15px;
}
.kaiwa-text-right:before {
  border-right: 10px solid #d7ebfe;
  left: -20px;
}
.kaiwa-text-left:before {
  border-left: 10px solid #d7ebfe;
  right: -20px;
}
.kaiwa-text-right:after, .kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  top: 15px;
}
.kaiwa-text-right:after {
  border-right: 10px solid #fafdff;
  left: -17px;
}
.kaiwa-text-left:after {
  border-left: 10px solid #fafdff;
  right: -17px;
}

/* 回り込み解除 */
.kaiwa:after,.kaiwa:before {
  clear: both;
  content: "";
  display: block;
}

記事内で使う際は、以下のhtmlをテキストエディターに貼り付けます。

吹き出し左側

<div class=”kaiwa”>
<figure class=”kaiwa-img-left”>
<img src=”dummy.jpg” alt=”dummy”>
<figcaption class=”kaiwa-img-description”>画像下テキスト</figcaption>
</figure>
<div class=”kaiwa-text-right”>
<p class=”kaiwa-text”>吹き出しテキスト</p>
</div>
</div>

吹き出し右側

<div class=”kaiwa”>
<figure class=”kaiwa-img-right”>
<img src=”dummy.jpg” alt=”dummy”>
<figcaption class=”kaiwa-img-description”>画像下テキスト</figcaption>
</figure>
<div class=”kaiwa-text-left”>
<p class=”kaiwa-text”>吹き出しテキスト</p>
</div>
</div>

Simplicity2 child: スタイルシート (style.css)などにコピー

上で紹介したソースコードを

Simplicity2 child: スタイルシート (style.css)

に貼り付けます。

また、

Simplicity2 child: ビジュアルエディターのスタイルシート (editor-style.css)

にも貼っておくと、ビジュアルエディターで、実際の見た目を見ながら編集できるので便利です。

あとは、私は、

Simplicity2 child: mobile.css

に、以下のコードを貼って、画像の大きさなどを少し調整しています。

パソコン用のソースコードだと、携帯で記事を見た際に、画像が大きすぎるので。

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