ブログにLINE風吹き出しを表示するSpeech Bubble

いつも応援ありがとうございます ⇒

なんとなくブログを飽きずに読んでもらうために

表示というか見せ方で工夫できへんもんかと考えてました。

長文になったらやっぱり読むのしんどくなりますよね。

 

そんなワケで長文でも比較的読む気になりやすいのは?

て考えたら多分ブログの表示がLINE風になってたら

普段から良く使うからなんとなく読みやすいんじゃないか?

そう思ってやり方を探してみました。

 

WordPressプラグインSpeech Bubbleで吹き出しが作れる

ちゃんとありましたよプラグイン。こういうのってもう既にどっかの誰かが考えてるんで

大体欲しい物は存在してたりするんですよね。

僕ごとき凡人が思いつくようなレベルのことは

既に先人が解決してるってのがエンジニア時代に培った経験則ですw

 

Speech Bubbleってプラグインを使えばこんなのが作れます。

オグリン
いつも可愛いなお前

そんなことより餌ちょうだい!

オグリン
まだ餌の時間ちゃうやろ?

うるさい!エサ―!

こんな風に僕とネコとの毎日のやり取りがLINEになりますw

これがショートコードで出来るようになってます。

アイコン画像なんかも見ての通り変更出来ますよ。

 

Speech Bubbleのインストール方法

まずはWordPressの管理画面でプラグイン>新規追加で「Speech Bubble」で検索して今すぐインストールをクリックしてください。
Speech Bubbleインストール

それでインストールが終わったら有効化するだけでインストール自体は終わります。

 

Speech Bubbleの使い方

このプラグインはショートコードを使って吹き出しを表示させてますんで

投稿画面でこんな感じの文章を書けば画面上に吹き出しが表示出来ます。

※【】は[]に変更してください。
【speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”客”]マスター、ウイスキー[/speech_bubble】
【speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”マスター”]うちはラーメン屋だバカ野郎[/speech_bubble】

↑これが↓こうなります。

マスター、ウイスキー

マスター
うちはラーメン屋だバカ野郎

細かいことを解説していきます。

吹き出しのデザインを設定する

まず吹き出しの見た目を指定するのがtype=”ln”の部分です。これは9種類用意されてます。

デフォルト状態だとdropと言うのが設定されてます。

それぞれどんな感じになるか見ていきましょうか。

drop

オグリン
昔DROPSていう女性声優グループがおったんや

知らんがな

ln

オグリン
桜の写真はいつもLINEで活躍してる

著作権は?

ln-flat

オグリン
この吹き出しが見やすいかも

zzz

std

オグリン
めっちゃシンプル!

これやったら吹き出しいらんのちゃう?

fb

オグリン
パソコンでのFacebookメッセージぽい

友達おらんくせに

fb-flat

オグリン
スマホのメッセンジャーアプリっぽい

インストールしてないやん

pink

オグリン
なんか目に痛いピンク

これは使いみち無さそう

rtail

オグリン
なんか良く分からんけど青っぽい

これも目に痛い

think

オグリン
妄想用の吹き出しやな

はよ餌くれよ

 

セリフの内容を設定する

※【】は[]に変更してください。
【speech_bubble type=”ln” subtype=”L1″ icon=”profile.jpg” name=”オグリン”]セリフ[/speech_bubble】
【speech_bubble type=”ln” subtype=”R1″ icon=”sakura.jpg” name=”桜”]セリフ[/speech_bubble】

それぞれのセリフ部分を変更すればOKです。

アイコンの名前を変更する

※【】は[]に変更してください。
【speech_bubble type=”ln” subtype=”L1″ icon=”profile.jpg” name=”オグリン”]セリフ[/speech_bubble】
【speech_bubble type=”ln” subtype=”R1″ icon=”sakura.jpg” name=”桜”]セリフ[/speech_bubble】

name=”オグリン”のオグリンの部分を好きな名前に変更します。

アイコンの左右と吹き出しの切り替え

場合によっては登場人物が2人だけじゃなくて複数人登場して来ることもあるかもしれません。

そんな時に左右にアイコンを自由に振り分けられます。subtype=”L1″を変更します。

Lは左側、Rにすると右側になります。L1とL2の違いは喋ってるか妄想してるかです。

1は普通に喋ってる感じの吹き出しで2にすると妄想してる感じになります。

オグリン
L1やで

せやな

オグリン
R1やで

おう

オグリン
L2やで

まいど

オグリン
R2やで

Yeah!

 

アイコン画像の変更

デフォルトでは顔が無い良くみるような口コミのアイコンみたいなのです。

マスター、ミックスナッツ

マスター
枝豆やったらあるで

これを変更するためにはちょっと事前の作業が必要で画像をアップロードします。

通常のWordPressのメディアライブラリとは別でFTPソフトを使ってプラグインのディレクトリに

アップロードするんで慣れてない人は注意してください。画像をアップロードする場所は以下のとおりです。

wp-content/plugins/speech-bubble/img

ここに好きな名前で画像ファイルをアップしてください。

もしここに書いてることの意味が良く分からんならちょっと危ないんで

一旦FTPの勉強してください。

間違って大事な物消してもーたら幽体離脱しかねへんですからねw

 

アップロードできたらショートコードのicon=”1.jpg”とかってなってる1.jpgをアップロードした

画像のファイル名に変更してください。

まとめ

最後まで書いてみて思ったんですけど、僕の場合このテンプレなら

デフォルトで吹き出しの機能がついてるんで別にこのプラグインいらないんですよね・・・

まあLINE風には出来ないんでそっちがメインなら十分使えるんですけどね。

 

ただこれの良いところは普通のテーマに埋め込まれたショートコードと違って

プラグインなんでテーマを変更しても気にせず使えるってのがありがたいです。


この記事が役に立ったらポチッとお願いします! ⇒
オグリンのネットで稼いで自由人になるメルマガ
ブログでは言えないような事もメルマガではさくっと晒してます。
*あなたの苗字(HNでも可)
*あなたのメールアドレス

※プロバイダーアドレスでは、メールが受け取れない場合があります。Yahoo、Gmailなどのフリーメールアドレスでの登録をお薦めします。
※あなたの個人情報はプライバシーポリシーに沿って厳重に保護します。

9 Responses to “ブログにLINE風吹き出しを表示するSpeech Bubble”

  1. 初めまして。
    ブログランキングからきました。
    広樹といいます。

    ショートコードで吹き出しが出来るとは
    初めてしりました。。。

    賢威では出来る事言う事は存じて
    おりましたが。。。

    参考になりました!

    応援完了です!

    • アフィリエイター向けのテンプレートなら最初から吹き出し機能ついてるのがあったりしますよね。

  2. こんにちは、プラナです。
    ブログでされてる方いらっしゃいますが、こういった方法
    だったんですね^^
    とても勉強になりました。
    またお邪魔させていただきます。応援ポチッ!

    • こんなことしたいって思ったら大概プラグインで出来たりするんでWordPressは便利ですね

  3. オウリンさん、こんばんは~MONです。
    最近、吹き出しをよく見かけるし
    分かりやすいと思ってました。
    参考にさせてもらいます。
    応援して帰りますね。

  4. アフィリエイトを始めたばかりで、勉強しようと先輩方のブログをいっぱい見ているんですが、やっぱり難しいです。
    「低学歴でも高収入を得るために」というタイトルに惹かれ、オグリンさんの所を訪れさせていただきました。
    「ブログにLINE風の吹き出しを表現する」というところに惹かれ見てみると、
    ほんとだ、ラインみたい。
    こんなの使って自由に記事を書いてみたいもんだと 夢ばかり広がるmameでした。

    • 簡単な使い方は書いてるとおりなので後は慣れるように練習してもらえばいいと思います。
      夢だけ広げても無意味なんで実践しましょうw

      • うっ、痛いとこつかれた、、、(^^ゞ
        おっしゃるとうり ヒャヒャヒャ
        お返事ありがとうございました、少しがんばってみます。

コメントを残す

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