ワードプレス 吹き出しを使って演出する方法!3倍ブログが楽しくなるプラグインSpeech bubble使い方

ABOUTこの記事をかいた人

イクミヤ

1987年2月生まれ。大阪在住。
このブログは2017年5月から運営、主にワードプレスやSEOについて書いています。フォローして頂ければ幸いです。

スポンサーリンク

ブログを継続していく上で僕が大切にしているのが楽しんで書くということです。楽しくなければ続かないしアクセスも気になりますが、それ以上に楽しんで書くことを心情としています。

楽しく書く為には自身のブログを客観的に見て、これはつまんねなぁーと思えば演出を付け加える作業をして少しは面白いブログ作成を心掛けています。

そこでおすすめのSpeech bubbleを紹介していきます。

Speech bubble使い方

 

ワクちゃん
いつもと雰囲気が違うね
YUKI
このプラグインを使うとワクちゃんと会話が出来るんだよ

このようにブログで会話風の吹き出しを作成できるプラグインです。どうでしょうか?すごいプラグインですよね?

これがあれば殺風景なブログも漫画読んでいる感覚で気軽に読むことができます。

それでは早速インストールしましょう。

Speech bubbleインストール

ワードプレスの管理画面でプラグインをクリックします。新規追加をクリック。

画面上部の「プラグインの検索…」にSpeech bubbleと入力します。

検索結果に表示されたらインストールします

有効化をクリックしてインストール完了です

画像をアップロード

Speech bubbleはデフォルトのままでも使えますが、画像を設定していた方が吹き出しとしても面白くなるので画像の設定方法を説明します。

FTPを使った方法でのアップロードになります。今回はエックスサーバーを使った方法を紹介しますが、エックスサーバーとFTPソフトでのアップロードの方法は基本的に同じですので、ご参考にしてください。

画像のサイズはリサイズされるので大きくても問題ありません。ファイル名がアルファベット表記で小文字じゃないと正しく動作しないので、その点は気を付けましょう。

エックスサーバーのサーバーパネルにログインしてFTPアカウント設定をクリックします。

FTPアカウントを選択します。FTPアカウントを作成していない方はアカウント追加より作成してください。

ログインを選択します。

アップロードするドメインを選択します。

public htmlを選択します。

wp-contentをクリックします。

pluginsをクリックします。

スポンサーリンク

プラグインのファイルの中からSpeech bubbleを探してクリックします。

imgファイルをクリックします。

ここではファイル名はクリックせずにアップロードしたい画像ファイルを選び「ファイルのアップロード」から「ファイルを選択」してアップロードして画像のアップロードは完了となります。

吹き出しの種類!

Speech bubbleではコードを変更すると、いろんな吹き出しを作成することができます。

全部で9種類drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkの中からお選びください。

赤字の部分を好きなデザインのコードに変更するだけです。type=”drop

下記コードがSpeech bubbleで使うコードになります。コピペすれば表示できるので参考にしてください。AddQuicktagを使えば楽に入力できます。

ワードプレスでブログを書くなら必須のプラグイン AddQuicktag使い方

2017.07.16

※コピペする時は”変更箇所”の部分にデザインコードを挿入して下さい。

 

 

a
これはデフォルトのdrop
a
これはstd
a
これはfb
a
これはfb-flat
a
これはln
a
これはln-flat
a
これは ln-flat
a
これは pink
a
これはrtail
a
これはthink

アイコンを変更してみよう

アイコンの変更は

吹き出しの位置を変える

subtype=”L1“この赤字の部分を変更します。

スポンサーリンク

L1 R1

ワクちゃん
左に使うと質問する時に使えるよ
YUKI
右に配置すれば答えを出すときに使えるよ

L2 R2

ワクちゃん
L2R2変更すれば考えている感じになるよ
YUKI
便利だなぁ

名前の変更

name=”A さん“この部分にお好きな名前に変更します。

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です