WordPress講座(個別相談)

吹き出しを使って会話風のコンテンツを作りたいこともあります。お客様の声やよくある質問に限りませんが、単調なデザインに変化を付けて効果的に演出できるかもしれません。

会話風のコンテンツを作りたい

吹き出しを使って会話風のコンテンツを作りたい

ここでは、Speech bubbleプラグインを使って吹き出しを作る方法を紹介します。会話風のコンテンツ作成にご活用ください。

スポンサーリンク

吹き出しを使った会話風コンテンツの作り方

Speech bubbleプラグインのインストール

「プラグイン」‐「新規追加」メニューからSpeech bubbleプラグインをインストール、有効化します。

Speech bubbleプラグインのインストール

Speech bubbleプラグインのインストール

インストール後の特別な設定は不要です。続いて、投稿や固定ページの編集画面を開きましょう。

ショートコードの入力

難しい説明をする前にさっそく会話を作ってみましょう。それには、次のショートコードを投稿または固定ページの編集画面に入力します。

[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="左側さん"]
左側の吹き出しです。パターンはいろいろ変えられます。
[/speech_bubble]

[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="右側さん"]
右側の吹き出しです。しゃべっている人のアイコンは画像に変えられます。
[/speech_bubble]
便宜上改行していますが、1つのショートコードは1行で入力した方が良いかもしれません。

これにより、会話が表示されます。2つのショートコードを使っていますが、それぞれが左側、右側に表示されることで、会話風に見える仕組みです。

会話が表示される

会話が表示される

基本的な会話の設定

ショートコードはさまざまなカスタマイズが可能ですが、簡単に会話形式のコンテンツを作りたい方もいるでしょうから、まずは、最低限の設定を紹介します。

会話の基本設定(左右区分・アイコン・人名・セリフ)

会話の基本設定(左右区分・アイコン・人名・セリフ)

  • 左か右かの区分(subtype属性) --- 左側は「L1」、右側は「R1」を指定(他にも設定できますが、ひとまず)
  • アイコン(icon属性) --- 人物画像(初期設定では1.jpgまたは2.jpgを使用可能)
  • 人物名(name属性) --- 「田中さん」や「インタビュアー」などを指定
  • セリフ --- 吹き出しの内容を指定

各項目を設定して、ショートコードを編集してみましょう。左右区分やアイコンは必須ではないので、最低限、人名とセリフを直せば機能します。ここでは、次のようなショートコードに変更してみました。

[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="先生"]
Speech bubbleプラグインの使い方はわかりましたか?
[/speech_bubble]

[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="生徒"]
はい。ショートコードを使って簡単に吹き出しの会話ができるんですね。
[/speech_bubble]

[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="先生"]
ショートコードをカスタマイズすれば、見た目もいろいろと変更できますよ。
[/speech_bubble]

[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="生徒"]
そうなんですか。さっそく教えてください!
[/speech_bubble]

左、右、左、右の順で作っていけば、会話が続くスタイルで吹き出しを表示していくことができます。

会話が続く

会話が続く

あとは、あなたのアイデア次第です。お客様の声や、よくある質問に使っても良いでしょうし、難しそうな話を会話調で組み立てればわかりやすく説明できるかもしれませんね。

吹き出しショートコードのカスタマイズ

少し説明しましたが、吹き出しを作るspeech_bubbleショートコードには4つの属性があります。

  • type属性 --- 吹き出しのタイプ(デザインテンプレート)
  • subtype属性 --- 左側か右側かの区分
  • icon属性 --- 人物のアイコン画像
  • name属性 --- 人物名

4つの属性についてカスタマイズパターンを簡単に説明します。

吹き出しタイプの設定

type属性では9種類の吹き出しタイプを指定できます。それぞれ、デザインが異なります。以下、イメージを紹介します。

  • std
    「type="std"」のイメージ

    「type="std"」のイメージ

  • fb
    「type="fb"」の場合

    「type="fb"」のイメージ

  • fb-flat
    「type="fb-flat"」のイメージ

    「type="fb-flat"」のイメージ

  • ln
    「type="ln"」のイメージ

    「type="ln"」のイメージ

  • ln-flat
    「type="ln-flat"」のイメージ

    「type="ln-flat"」のイメージ

  • pink
    「type="pink"」のイメージ

    「type="pink"」のイメージ

  • rtail
    「type="rtail"」のイメージ

    「type="rtail"」のイメージ

  • drop
    「type="drop"」のイメージ

    「type="drop"」のイメージ

  • think
    「type="think"」のイメージ

    「type="think"」のイメージ

サイトのイメージに合わせて選んでください。

CSSをカスタマイズすればデザインの微調整は可能です。うまくいかない方、よろしければWordPress個別サポートで承ります。気軽にご相談ください。

左右区分の設定

subtype属性を使って左側(L)なのか右側(R)なのかを設定できますが、それぞれの吹き出しスタイルを変えることもできます。

  • L1・R1 --- 会話風になります。
    L1・R1の場合

    L1・R1の場合

  • L2・R2 --- 考えているような吹き出しになります。
    L2・R2の場合

    L2・R2の場合

L1とR1は必ずしもパッケージというわけではありません。左側がL1、右側がR2という使い方で変化を付けることもできます。すべてはアイデア次第です。

左側のsubtypeがL1、右側がR2の場合

左側のsubtypeがL1、右側がR2の場合

アイコンの設定(好きな画像を使いたい)

人物アイコンはicon属性で設定します。アイコン画像はプラグインのimgフォルダ(wp-content/plugins/speech-bubble/img)に格納します。初期設定では1.jpgと2.jpgが含まれるため、「icon="1.jpg"」や「icon="2.jpg"」によって左右の人物のアイコンを切り替えて会話風に仕上げられるということです。

好きな画像をアイコンに使う場合は上記のimgフォルダに画像を格納して、icon属性で指定します。使える画像の種類は次のとおりです。

  • jpg
  • png
  • gif
  • svg
  • tif

アイコン画像をimgフォルダに保存

好きな画像をアイコンに使いたい場合は、その画像をimgフォルダに保存します。ここでは「left.jpg」と「right.jpg」を準備しました。

アイコンに使う画像を準備

アイコンに使う画像を準備

icon属性で画像ファイル名を指定

ショートコードのicon属性でファイル名を指定します。たとえば、「icon="left.jpg"」などです。

準備した画像をアイコンに使った例

準備した画像をアイコンに使った例

type属性の指定によっては、アイコンの表示イメージが違ってきます。いろいろと試してみてください。

名前が不要な場合

会話している人物名が不要な場合は「name=""」のように名前を空にする方法があります。

名前を消す

名前を消す

すべての属性を省略した場合

各属性の初期設定は次のようになります。指定しなかった場合は、これらの設定が使われます。

  • type属性 --- std
  • subtype属性 --- L1
  • icon属性 --- 1.jpg
  • name属性 --- no name

すべて省略すると、L1(左側)の「no name」さんの吹き出しになります。

すべての属性を省略した場合

すべての属性を省略した場合

まとめ

このようにSpeech bubbleプラグインを使うと、吹き出しを使った会話風コンテンツを簡単に組み立てるとができます。単調になってしまう「よくある質問」や「お客様の声」などにもアイコン画像などを工夫することで、お客様に訴求するコンテンツを作成できるでしょう。いろいろと試行錯誤してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク