プラグイン 投稿

初心者でも簡単!WordPressでプラグイン「Speech Bubble」を使って吹き出しのついた会話形式の表示ができる

更新日:

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

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

 

それなら、現在やられているような会話形式にするのも、良いかもしれません。

会話形式にするなら、WordPressに良いプラグインがありますよ。

プラグイン「Speech Bubble」です。

初心者の方でも、簡単に吹き出しのついた会話形式の表示ができます。

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

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

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

 

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

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

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

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

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

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

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

no name
お願いします。

3.「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]

4.画像の変更

「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)ここにアイコン画像のコピーします。

 

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

「std」の場合

うさぎさん、こんにちわ
うさぎ
犬さん、こんにちわ

 

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

 

 

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

 

「drop」の場合

うさぎさん、こんにちわ

「fb」の場合

うさぎさん、こんにちわ

「fb-flat」の場合

うさぎさん、こんにちわ

「ln」の場合

うさぎさん、こんにちわ

「ln-flat」の場合

うさぎさん、こんにちわ

「pink」の場合

うさぎさん、こんにちわ

「rtail」の場合

うさぎさん、こんにちわ

「think」の場合

うさぎさん、こんにちわ

The following two tabs change content below.
komiya

komiya

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

スポンサーリンク



スポンサーリンク



-プラグイン, 投稿

Copyright© 初心者がWebスクールに通って作るホームページ , 2018 All Rights Reserved Powered by STINGER.