Speech bubble を使って会話をLINE風にする

この記事は約6分で読めます。

南国気分

「Speech bubble」プラグインを使うと、FBやLINEなどのように会話が見やすくなります。

また、キャラクターや名前を設定できるので、会話の掛け合いもスムーズに表現できます。

Speech bubbleのインストール

管理画面から検索してインストール、または、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

管理画面から検索してインストール

  • WordPress管理画面 > プラグイン > 新規追加 >「Speech bubble」で検索
  • WordPress.org からダウンロード
  • 「今すぐインストール」をクリック
  • プラグインを有効化する

WordPress.org からインストール

  • WordPress.orgから、「Speech bubble」のzipファイルをダウンロード
  • ダウンロードしたファイルを解凍
  • FTPソフトなどで、WordPressの「plugin」フォルダ内にアップロード
  • WordPressの管理画面から「プラグイン」を選択
  • プラグインを有効化する

Speech bubbleのバリエーション

[speech_bubble type=”ln” subtype=”L1″ icon=”616.png” name=”みのり”]Speech bubbleを使えばこんな風に会話が表示できるよ。[/speech_bubble]

[speech_bubble type=”ln” subtype=”R1″ icon=”682.png” name=”コメ吉”]なるほど、これは見やすいね。[/speech_bubble]

[speech_bubble type=”ln” subtype=”L1″ icon=”616.png” name=”みのり”]バリエーションもいろいろあるよ。[/speech_bubble]

スタンダード type=”std”

[speech_bubble type=”std” subtype=”L1″ icon=”616.png” name=”みのり”]これがスタンダードだよ。[/speech_bubble]

[speech_bubble type=”std” subtype=”R1″ icon=”682.png” name=”コメ吉”]とてもシンプルだね。[/speech_bubble]

ドロップ type=”drop”

[speech_bubble type=”drop” subtype=”L1″ icon=”616.png” name=”みのり”]これはドロップタイプだよ。[/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”682.png” name=”コメ吉”]これがドロップか。[/speech_bubble]

ラッテ type=”rtail”

[speech_bubble type=”rtail” subtype=”L1″ icon=”616.png” name=”みのり”]これはラッテタイプだよ。[/speech_bubble]

[speech_bubble type=”rtail” subtype=”R1″ icon=”682.png” name=”コメ吉”]rtailはスコットランド・ゲール語らしいぞ。[/speech_bubble]

 Pink type=”pink”

[speech_bubble type=”pink” subtype=”L1″ icon=”616.png” name=”みのり”]これはPinkタイプだよ。[/speech_bubble]

[speech_bubble type=”pink” subtype=”R1″ icon=”682.png” name=”コメ吉”]強調するときにいいね。[/speech_bubble]

考えてる風 type=”think”

[speech_bubble type=”think” subtype=”L1″ icon=”616.png” name=”みのり”]これはThinkタイプだよ。[/speech_bubble]

[speech_bubble type=”think” subtype=”R1″ icon=”682.png” name=”コメ吉”]これはいいね。[/speech_bubble]

フェイスブック風 type=”fb”

[speech_bubble type=”fb” subtype=”L1″ icon=”616.png” name=”みのり”]これはFB風。[/speech_bubble]

[speech_bubble type=”fb” subtype=”R1″ icon=”682.png” name=”コメ吉”]いいかんじだね。[/speech_bubble]

フェイスブック風 フラットタイプ type=”fb-flat”

[speech_bubble type=”fb-flat” subtype=”L1″ icon=”616.png” name=”みのり”]これがフェイスブックフラットタイプ。[/speech_bubble]

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”682.png” name=”コメ吉”]フラットになったね。[/speech_bubble]

LINE風 type=”ln”

[speech_bubble type=”ln” subtype=”L1″ icon=”616.png” name=”みのり”]これがLINE風。[/speech_bubble]

[speech_bubble type=”ln” subtype=”R1″ icon=”682.png” name=”コメ吉”]なるほど、これは馴染み深いね。[/speech_bubble]

LINE風 フラットタイプ ln-flat

[speech_bubble type=”ln-flat” subtype=”L1″ icon=”616.png” name=”みのり”]これがLINE風フラットタイプ。[/speech_bubble]

[speech_bubble type=”ln-flat” subtype=”R1″ icon=”682.png” name=”コメ吉”]なるほど、雰囲気変わるね。[/speech_bubble]

Speech bubbleの使い方

プラグインをインストールして有効にした後は、ショートコードを貼り付けて会話を書いていくだけです。

注.[]を【】に変えて表示しています。

【speech_bubble type=”○○” subtype=”○○” icon=”画像ファイル” name=”名前”】ここに文章を記述します。【/speech_bubble】

会話タイプの指定

type=”○○”で表示させる会話のタイプを指定します。

考えるタイプの指定

subtype=”○○”はL1の指定で左からの会話、R1の指定で右からの会話になります。

subtype=”L2″、”R2″を指定すると、その会話タイプのまま考えるタイプにできます。

キャラクター画像の設定

FTPで画像をアップロードする

アップロードする場所は、Wordpressホルダー下にある、speech-bubbleプラグインのイメージホルダーになります。

「ドメイン」>「public_html」>「wp-content」>「plugins」>「speech-bubble」>「img」

imgホルダーにアップロードした画像名の名前を「icon=”○○”」の部分に入れましょう。

その際、拡張子も忘れずに記述してください。

画像は勝手に100×100pxにリサイズされますので、大きい画像でも大丈夫です。

セリフの入れかた

セリフは下の箇所に記述するだけです。

【speech_bubble ・・・】セリフを記述する箇所です。【/speech_bubble】

キャラクター名の指定

キャラクター名は「name=””」の部分に指定します。

ショートコードを入れるだけで簡単に会話モードになります。ショートコードはAdd Quick Tagに登録しておけば素早く呼び出すことができます。

AddQuickTagの便利な使い方
AddQuickTagプラグインを入れておくと、管理画面で便利なタグを簡単に追加できます。管理画面で設定したタグは、エディター画面で何回でも呼び出すことができます。