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

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

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

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

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

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

スポンサーリンク

使用しているサーバー

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

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

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

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



使用しているWordPressのテーマ

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

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

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

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

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

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

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

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

あとは、こちらのカスタマイズに、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;
}

実際に使用してみた画像

Simplicity2 child: スタイルシート(style.css)に貼り付けて、使ってみたのがコチラの画像です。

全体の背景は白で、画像は丸型にしています。

会話の背景と線は、水色でまとめています。

実際の記事
1歳5ヶ月の息子ですが、突如として、突発性発疹にかかりました。 突発性発疹って、0歳児がかかる病気だと思っていたので、息子は1歳になったし、もうかからんのかな?と思っていた矢先でした。 突...

LINE風会話のAMP表示

ただ、AMPの表示になると、デザインは崩れてしまいます。

実際のAMP表示はこんな感じです。

挿入する画像、会話文のちょっとした工夫

AMP対応にした場合、画像の大きさは元の画像のものになるので、あらかじめ、大きさを小さめにしておくと良いです。

上の見本だと、120 × 120になっています。(これでも少し大きいですね。)

あとは、会話文を太字にすることで対応していますよ。

他のサイトさんで、丁寧に導入方法が書いてあるので、私は結構ざっくりした説明になってしまいましたが、こんな感じでカスタマイズをしています。

年賀状印刷なら【年賀家族】

長男が生まれてから、我が家は毎年【年賀家族】で年賀状を作っています!
他とは違う、オシャレな年賀状が作れるのでリピートしちゃいます。

ブログランキング参加中

にほんブログ村 子育てブログ 2016年4月~17年3月生まれの子へ
にほんブログ村
ブログランキング参加中です。
バナーをクリックするとランキングポイントが増えるので、 クリックして応援してくださるとうれしいです。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする