WPプラグイン

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

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

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

そこでおすすめの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を使えば楽に入力できます。

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

 

 

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 さん“この部分にお好きな名前に変更します。

 

関連記事

  1. CSS

    ATOM 5倍捗るテキストエディタmac,win対応<初心者向き> 

    こんにちは!modeetです。みなさんはテキストエディタを使ってい…

  2. アクセスアップ

    はてブをなめていた!アクセスアップだけじゃない!?

    お勧めする「はてブ」こんには!ブログ中毒気味のmoddetです…

  3. WPプラグイン

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

    ワードプレスの醍醐味と言えばカスタマイズですよね?CSSをカス…

  4. CSS

    サイトスピードの高速化でアクセスアップ

    重要なサイトスピードワードプレスを運営しているとコンテンツの増加と…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。


最近の記事

最近のコメント

    1. Amazon販売

      せどりとは?
    2. アクセスアップ

      おすすめワードプレス有料テーマMAG 
    3. その他

      Linkin Parkのチェスターの素晴らしさを知って欲しい
    4. その他

      海外から商品を受け取る知識!
    5. その他

      方向音痴は直るのか?方向音痴の処方箋
    PAGE TOP