

なんとなくブログを飽きずに読んでもらうために
表示というか見せ方で工夫できへんもんかと考えてました。
長文になったらやっぱり読むのしんどくなりますよね。
そんなワケで長文でも比較的読む気になりやすいのは?
て考えたら多分ブログの表示がLINE風になってたら
普段から良く使うからなんとなく読みやすいんじゃないか?
そう思ってやり方を探してみました。
目次
WordPressプラグインSpeech Bubbleで吹き出しが作れる
ちゃんとありましたよプラグイン。こういうのってもう既にどっかの誰かが考えてるんで
大体欲しい物は存在してたりするんですよね。
僕ごとき凡人が思いつくようなレベルのことは
既に先人が解決してるってのがエンジニア時代に培った経験則ですw
Speech Bubbleってプラグインを使えばこんなのが作れます。
こんな風に僕とネコとの毎日のやり取りがLINEになりますw
これがショートコードで出来るようになってます。
アイコン画像なんかも見ての通り変更出来ますよ。
Speech Bubbleのインストール方法
まずはWordPressの管理画面でプラグイン>新規追加で「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
ln
ln-flat
std
fb
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にすると妄想してる感じになります。
アイコン画像の変更
デフォルトでは顔が無い良くみるような口コミのアイコンみたいなのです。
これを変更するためにはちょっと事前の作業が必要で画像をアップロードします。
通常のWordPressのメディアライブラリとは別でFTPソフトを使ってプラグインのディレクトリに
アップロードするんで慣れてない人は注意してください。画像をアップロードする場所は以下のとおりです。
wp-content/plugins/speech-bubble/img
ここに好きな名前で画像ファイルをアップしてください。
もしここに書いてることの意味が良く分からんならちょっと危ないんで
一旦FTPの勉強してください。
間違って大事な物消してもーたら幽体離脱しかねへんですからねw
アップロードできたらショートコードのicon=”1.jpg”とかってなってる1.jpgをアップロードした
画像のファイル名に変更してください。
まとめ
最後まで書いてみて思ったんですけど、僕の場合このテンプレなら
デフォルトで吹き出しの機能がついてるんで別にこのプラグインいらないんですよね・・・
まあLINE風には出来ないんでそっちがメインなら十分使えるんですけどね。
ただこれの良いところは普通のテーマに埋め込まれたショートコードと違って
プラグインなんでテーマを変更しても気にせず使えるってのがありがたいです。
初めまして。
ブログランキングからきました。
広樹といいます。
ショートコードで吹き出しが出来るとは
初めてしりました。。。
賢威では出来る事言う事は存じて
おりましたが。。。
参考になりました!
応援完了です!
アフィリエイター向けのテンプレートなら最初から吹き出し機能ついてるのがあったりしますよね。
こんにちは、プラナです。
ブログでされてる方いらっしゃいますが、こういった方法
だったんですね^^
とても勉強になりました。
またお邪魔させていただきます。応援ポチッ!
こんなことしたいって思ったら大概プラグインで出来たりするんでWordPressは便利ですね
オウリンさん、こんばんは~MONです。
最近、吹き出しをよく見かけるし
分かりやすいと思ってました。
参考にさせてもらいます。
応援して帰りますね。
とりあえず名前間違ってます
アフィリエイトを始めたばかりで、勉強しようと先輩方のブログをいっぱい見ているんですが、やっぱり難しいです。
「低学歴でも高収入を得るために」というタイトルに惹かれ、オグリンさんの所を訪れさせていただきました。
「ブログにLINE風の吹き出しを表現する」というところに惹かれ見てみると、
ほんとだ、ラインみたい。
こんなの使って自由に記事を書いてみたいもんだと 夢ばかり広がるmameでした。
簡単な使い方は書いてるとおりなので後は慣れるように練習してもらえばいいと思います。
夢だけ広げても無意味なんで実践しましょうw
うっ、痛いとこつかれた、、、(^^ゞ
おっしゃるとうり ヒャヒャヒャ
お返事ありがとうございました、少しがんばってみます。