ブログにLineやFacebook風の吹き出しを表示しよう

fce37faccad4f003462464d6ab602228_s

 

こんにちは、栗丘 まみです。

ブログを書いていると、吹き出しを使って文字を入力したいたいな~と

思うことがあります。

 

私がブログで使っているFMテンプレートには吹き出し風の見出しタグが

あるので、今まではその吹き出し風の見出しタグを無理やり吹き出しとして

使っていました。

 

こんな↓かんじです(^^;)

吹き出し-1

 

でも、この使い方は本来の見出しタグの使い方ではないんですね。

見出しタグを使う本来の目的は、文章の構成を分かりやすく

Googleクローラーに伝えるという『SEO対策』なんです。

『SEO対策 見出しタグを正しく使って上位表示を狙おう』

 

ブログで吹き出しが使えないかと探していたところ、

『speech bubble』というWordPressのプラグインを

発見しました!

 

早速インストールして設定みたところ、こんな↓かんじに

なりました。

A さん
〇〇〇

 

デフォルトではミステリーマンのようなアイコンが設定されていますが、

自分の好きなアイコンに変更することもできますし、吹き出しの

パターンは9種類も用意されているんですよ。

 

 

『speech bubble』のインストール方法

①WordPressの左側メニューから「ブラグイン」-「新規追加」をクリックします。

koment6-1

 

②「プラグインの検索」欄に【speech bubble】と入力して、キーボードのENTERキーを押します。

検索結果に「speech bubble」が表示されるので、【今すぐインストール】

クリックします。

次の画面で【プラグインの有効化】をクリックすればインストール完了です。

インストール-3

 

『speech bubble』プラグインの使い方

『speech bubble』プラグインのインストールが完了したら、投稿画面に

以下のコードを入力します。

※入力はビジュアルモード・テキストモードどちらでもOKです。

tag-3-1

 

コードをコピペしたい場合はコチラをお使いください。

 

※コードを簡単にコピペする方法はコチラの記事に掲載しています。

⇒『Crayon Syntax Highlighter』プラグインでブログ記事にソースコードを表示しよう

 

吹き出しのパターンは9種類あります

デフォルトの吹き出しは『drop』ですが、これ以外にも8種類の吹き出しが

用意されています。

タグの「”drop”」の部分を変更すると、吹き出しの種類が変わります。

吹き出しの種類4

 

アイコンの位置と吹き出しの向きを変えてみよう

コードの「subtype=”L1″」の部分を変更するとアイコンの位置と吹き出しの

向きを変えることができます。

デフォルトは「L」で左(Left)側に配置されていますが、「R」にすると

右側(Right)になります。

tag-4

上のようにコードを変更してみると・・・

A さん
〇〇〇

 

アイコンが右側に配置され、吹き出しの向きも右になりましたね。

 

自分の好きな画像をアイコンに設定してみよう

自分の好きな画像をアイコンを変更するには、『FFFTP』や『FileZilla』などの

FTPソフトで画像をサーバーにアップロードする必要があります。

 

アップロード先はサーバーの以下のフォルダです。

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

 

≪アイコン変更時の注意点≫

◆ 私が使用しているさくらサーバーではimgフォルダまでのパスは

     上記の通りですが、他のサーバーをご利用の場合は、ドメインと

      wp-contentの間のフォルダ名が異なっている可能性があります。

◆ アイコンに設定する画像のファイル名は半角英数字を使用してください。

◆ 設定できる画像ファイルの拡張子は「jpg、png、gif、svg、tif」です。

◆ 画像の大きさは自動的に調整されるためサイズ変更は不要です。

 

サーバーのimgフォルダに画像ファイルのアップロードが完了したら、

タグの「icon=”1.jpg”」の「1.jpg」の部分をアップロードしたファイル名に

変更します。

 

私はこんなかんじになりました。

A さん
〇〇〇

 

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

コードの「name=”Aさん”」の「Aさん」の部分を変更するとアイコンの名前を

変更することができます。

tag-5

 

私は特に表示するは必要ないので、アイコンの名前は非表示にしたいと思います。

コードは「Aさん」の部分を消して、「name=””」にすればOKです。

 

こんなかんじになりました。

〇〇〇

 

吹き出しに文字を入れて完成させよう

吹き出しに文字を入れる場合は、上のコードの「〇〇〇」の部分に文字を

入力すればOKです。

コレってどういう意味なのかな?
コレはですね・・・

 

上のように、吹き出しを左右に配置するとLineやFacebookのような

会話形式になって楽しいですね^^

 

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

 




ポチっと押してくれると泣いて喜びます(*´ω`*)

Comment

  1. なおなお より:

    まみさん、こんばんは。

    プラグインって色々あるんですね!!
    すごい☆

    さっそくインストールしてみたいと思います。
    素適な情報ありがとうございます^^

    応援していきますね☆

    • 栗丘 まみ より:

      なおなおさん、こんばんは。

      コメントありがとうございます。

      speech bubbleを使うと、ブログがポップになって、
      とても楽しいですよね。
      なおなおさんもぜひ使ってみてくださいね。

      応援ありがとうございます。
      これからもよろしくお願いします。

  2. まかろん より:

    栗丘さん、こんばんは。
    ご無沙汰してました。

    こんなおもしろいプラグインがあるんですね!

    会話形式のブログを見かけたことがあって、
    画像を編集して作られてるんだとばかり
    思っていましたが、
    プラグインだったんですね。

    また、挑戦してみたいです。

    栗丘さんところへ来ると、
    いつも本当に勉強になります。

    ありがとうございました。
    ポチ完了です。

    • 栗丘 まみ より:

      まかろんさん、こんにちは。

      私も他の方のサイトで吹き出しを使っているのを
      見たときは画像?と思いました(^_^;)

      吹き出しを使った会話調の記事って楽しいですよね。
      良かったらまかろんさんもブログで使ってみて
      くださいね。

      <栗丘さんのところへ来ると、
      いつも本当に勉強になります。

      そう言っていただけると励みになります。
      応援ありがとうございます。
      これからもよろしくお願いします。

  3. スプーン より:

    こんにちは。
    吹き出しで書くと、読む方も楽しくなりますね。
    わたしも、チャレンジしてみます。

    • 栗丘 まみ より:

      スプーンさん、こんにちは。

      コメントありがとうございます。

      吹き出しを使うと臨場感が出ますし、楽しいですよね。
      スプーンさんもぜひ使ってみてくださいね。

  4. より:

    栗丘さん
    こんばんは
    さっそくインストールしました。

    唐突で恐縮なのですが、お願いがあります。

    吹き出し会話のゲストとして
    Gのブログに出演していただけないでしょうか?

    楽しい吹き出し記事にしたいと思っております。

    どうか、よろしくお願いします。m(_ _)m

    お返事お待ちしてます。

    応援ポチ、またしました。

    • 栗丘 まみ より:

      Gさん、こんばんは。

      すごく楽しそうな企画ですね!
      私で良ければぜひ出演させてくださーい☆

      なんかワクワクしますね。

      応援ポチありがとうございます。

  5. まさひさ より:

    栗丘さん、おはようございます!

    まさひさです^^

    対話形式のブログは面白くて
    感情移入しやすいですよね。

    こんなプラグインがあるとは…
    ステキな情報をありがとうございます♪

    説明もわかりやすくて良かったです!

    またお邪魔しますね。

    応援完了です^^

    まさひさ

    • 栗丘 まみ より:

      まさひささん、こんにちは。

      いつもコメントをいただき、ありがとうございます。

      吹き出しで対話形式にすると、ただ文字で伝えるよりも
      伝わりやすい場合ってありますよね。
      まさひささんが仰るように、臨場感が出て感情移入
      しやすくなりますね。
      まさひささんも使ってみてくださいね。

      応援ありがとうございます。
      これからもよろしくお願いします。

  6. より:

    栗丘さん
    こんばんわ!

    またもやメルマガから
    ワープしてきました。

    あ”~っ!

    Gも真似していいですか?

    これ面白いです。

    Gわこういうので
    記事を作ってみたいのです。

    素晴らしい記事
    ありがとうございました。

    応援ポチ完了です。

    • 栗丘 まみ より:

      Gさん、こんにちは。

      いつもメルマガからワープして来ていただき、
      ありがとうございます!

      speech bubbleってブログがポップな感じになって
      とても楽しいプラグインですよね。
      Gさんもたくさん使ってくださ〜い☆

      応援ありがとうございます。
      これからもよろしくお願いします。

  7. めいこ より:

    栗丘さん、こんばんは。
    めいこです。

    こんなプラグインがあるんですね!
    というか、これはプラグインで表示をしていたんですね(°д°)
    私はてっきり、画像加工をして載せているのだと思っていました。

    こういう会話風で記事があると
    楽しく読めますよね♪

    取り入れてみたいプラグインです。
    応援完了です!
    また読みに来ます。

    • 栗丘 まみ より:

      めいこさん、こんにちは。

      いつもコメントをいただき、ありがとうございます。

      私も吹き出しのプラグインがあるとは思っていませんでした(^_^;)
      吹き出しの種類もたくさんあって、ブログに使うとポップな
      感じになって楽しいですよね。

      応援ありがとうございます。
      これからもよろしくお願いします。

  8. TAKASHI より:

    栗丘さん、こんにちは。
    15期生のTAKASHIです。

    こんなプラグインあったんですね!!
    てっきり、画像を入れているのかと思っていました。

    ってFMテンプレートには吹き出し風の見出しタグがあるの知らなかった・・・(笑)

    また寄らせていただきます。

    応援ぽち。

    • 栗丘 まみ より:

      TAKASHIさん、初めまして。

      フレンドマーク塾の塾生さんなのですね!
      そして同期生ですね。
      これからもよろしくお願いします。

      私もまさか吹き出しのプラグインがあるとは
      思っていませんでした。
      WordPressには本当にたくさんのプラグインが
      あって楽しいです。

      FMテンプレートの吹き出し風のみだしは6番目
      (h6)にありますよ〜。

      応援ありがとうございます。
      これからもよろしくお願いします。

  9. ルナクス より:

    栗丘様、
    いつもお世話になっております。
    ルナクスです。

    とても面白そうなプラグインの
    ご紹介ありがとうございました。

    また丁寧な説明も感謝です。

    私も使わせて頂きます。
    応援、押しておきますね。ポチ☆

    これからも宜しくお願い申し上げます。

    • 栗丘 まみ より:

      ルナクスさん、こんにちは。

      いつもコメントをいただき、ありがとうございます。
      吹き出しを使うと楽しい感じのブログ記事になりますよね。
      ルナクスさんもぜひ使ってみてくださいね。

      応援ありがとうございます。
      これからもよろしくお願いします。

  10. ナミ より:

    栗岡さんこんばんは^^
    ナミです!

    たまにブログで吹き出しの
    会話形式を見かけるたびに

    「いいなぁ~」と思っていたのですが

    こんなプラグインを使っていたのですね!

    なるほど~、これはすごく興味があります^^
    丁寧で分かりやすいご説明

    非常に参考になります!

    時間を見つけてちょっとチャレンジして
    みたいです!

    ありがとうございました!

    応援完了ですよ^^

    • 栗丘 まみ より:

      ナミさん、こんにちは。

      いつもコメントありがとうございます。

      WordPressには本当にたくさんの
      プラグインがありますよね!

      speech bubbleは吹き出しの種類も
      豊富なので是非使ってみてくださいね。

      これからもよろしくお願いします。

コメント

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ブログ運営者

ブログ運営者

はじめまして。
ブログ運営者の栗丘 まみと申します。

非正規(契約社員)としてフルタイムで働きながら主婦業もしている、いわゆる兼業主婦です。

「夢をかなえて充実した人生にしたい」という思いからアフィリエイトを始めました。

⇒ 詳しくはコチラ

人気ブログランキング

栗丘まみの最新e-Book

ブログ,記事,遅い,早く

オススメ電子書籍

オススメ電子書籍

Amazonでランキング1位を獲得した電子書籍が今なら期間限定で¥0でダウンロードできます!

▲トップへ戻る