プラグイン

WordPressのプラグイン「Speech Bubble」で吹き出しの会話形式の表示を実現

この記事は、サイトでよく使う「吹き出し」の会話形式の表示を、WordPressのプラグイン「Speech Bubble」を使って簡単に作成する方法について書いています。

komiya
komiya
文章を書くのが苦手で、苦痛です。

なかなか、納得できる文章が書けません。

 

先生
先生

はじめてブログやサイトを作る際、文章を書くのが苦手な方はなかなか納得の行く文章がかけなかったり、すごく時間がかかったりするものです。

そういうとき、会話形式の表示を使うと書きやすくなりますし、訪問者も読みやすくなります。

会話形式にするなら、WordPressにプラグイン「Speech Bubble」があります。

では初心者の方でも、簡単に吹き出しのついた会話形式の表示ができるプラグイン「Speech Bubble」の使い方をご紹介します。

Sponcerd Link



プラグイン「Speech Bubble」のインストール、有効化

【ダッシュボード】-【プラグイン】-【新規追加】をクリックします。

プラグインの検索窓に「Speech Bubble」と入力し、エンターをクリックします。

 

【今すぐインストール】をクリックし、完了しましたら、【有効化】をクリックします。

「Speech Bubble」を使って吹き出しつきの会話形式の記事作成



吹き出し会話形式の記事を作成してみましょう。

【投稿】-【新規投稿】をクリックします。

「ビシュアル」モードのままでOKです。

では、下記のショートコードをコピーして投稿に貼り付けてみましょう。

no name

プラグイン「Speech Bubble」について説明します。

no name

お願いします。

「Speech Bubble」のショートコード内容の説明



それでは、「Speech Bubble」のショートコードを説明して行きますね。

コードの変更箇所がわかると、表示するデザイン、画像、会話内容を変更することができます。

 

①type      → 吹き出しのデザインで、9種類(Defalt:std)

②subtype → (A) 会話調の:左=L1 ,右=R1 (B) 思い浮かべてる風の:左=L2 ,右=R2(Defalt:L1)

③icon      → アイコン画像(Defalt:1.jpg,2jpg)

注意点:画像は大きくても縮小されますが、正方形でないと表示がおかしくなります。

④name    → 名前(Defalt:”” → 表示 no name)

⑤[speech bubble ** ] 会話内容 [/speech bubble]

画像の変更



先生
先生
「Speech Bubble」で画像を変更する場合は、サーバー上にアイコンに使う画像を置かなければいけません。

以前、SSL化の際、サーバー上にある「.htaccess」ファイルのコードを書き換えた際、FTPで接続するためのフリーソフト「FileZilla」を使いました。

詳しくは以下の記事をご覧ください。

ロリポップサーバーでSSL化(無料)の設定方法(WordPress)②「.htaccess」ファイルの設定

今回も、「FileZilla」を使って、画像をサーバー上に入れていきます。

1.「FileZilla」の設定 (ロリポップのレンタルサーバーを使用している場合)

(1)ロリポップのユーザー専用ページにログインします。

(2)【ユーザー設定】-【アカウント情報】をクリックします。

(3)ロリポップの「FTPサーバー」「FTP・WebDAVアカウント」「FTP・WebDAVパスワード」→FileZillaの「ホスト」「ユーザ名」「パスワード」へコピーし【クイック接続】をクリックします。

(4)「サーバの証明書は不明です。信用できるサーバか確認するために注意深く証明書を調べてください。」と表示されますが、【OK】をクリックします。

2.firsthp (ドメイン) → wp-content → plugins → speech-bubble → img へ画像を入れる

(1)サーバー側のfirsthp (ドメイン)を選択します。

(2)次に→ wp-content → plugins → speech-bubble → imgのところまで行きます。

リモートサイトは「/firsthp/wp-content/plugins/speech-bubble/img」と表示されます。

(3)ここにアイコン画像のコピーします。

「Speech Bubble」のいろんな表示



先生
先生
では、今回サーバー上にコピーした「dog-010.jpg」「Rabbit-010.jpg」を使って「Speech Bubble」を試して見ましょう。

「std」の場合

うさぎさん、こんにちわ

うさぎ

犬さん、こんにちわ

 

komiya
komiya
できました。他にもデザインが8種類あるのですね。

 

先生
先生
では、最後にデザインを一通りみていきましょう。

 

「drop」の場合

うさぎさん、こんにちわ

「fb」の場合

うさぎさん、こんにちわ

「fb-flat」の場合

うさぎさん、こんにちわ

「ln」の場合

うさぎさん、こんにちわ

「ln-flat」の場合

うさぎさん、こんにちわ

「pink」の場合

うさぎさん、こんにちわ

「rtail」の場合

うさぎさん、こんにちわ

「think」の場合

うさぎさん、こんにちわ

まとめ

今回はサイトでよく使う「吹き出し」の会話形式の表示を、WordPressのプラグイン「Speech Bubble」を使って簡単に作成する方法について書きました。

komiya
komiya
最後までお読みいただきありがとうございました。

アクセスランキングに登録しています。
ポチっと押していただけたら、うれしいです。


ブログノウハウランキング

にほんブログ村 ブログブログ ブログノウハウへ
にほんブログ村

おすすめ記事

Windows7からWindows10へアップデートを促す通知
初心者でもできるWindows7からWindows10へアップデートこの記事は、初心者でもできるWindows7からWindows10へアップデートについて書いています。 ...

 

 

ABOUT ME
komiya
komiya
中小企業で事務の仕事をしています。ホームページ、アフィリエイトの初心者です。コミュニケーションが不得手です。これまで、コーチングやアドラー心理学の講座などコミュニケーションを改善しようと色々受講しましたが、職場ではうまく行かず、むしろ悪化させてしまいました。目標を切り替えて自分1人で、できることをしようと考え、Webスクールに通いこのホームページを作りました。社会人として働いていますが、精神的にはひきこもりです。こんな私ですが、どうかよろしくお願いします。