WordPressを使い出すと、カスタマイズの豊富さや使いやすさにハマっていき無料ブログが使えなくなると感じます。
プラグインと言われる簡単なカスタマイズが実に豊富でとても便利です。
そこで、Speech bubble というプラグインをロリポップサーバーで導入してっみたので、記録がてらレビューしてみます！
Contents
会話形式プラグイン Speech bubble
そもそもプラグインて何？
WordPress初心者にとって、初めて聞く用語が多くないですか？
「有料ブログを始めよ！」て、意気込んだものの・・・
専門的用語が多くて遠ざかってしまうこともしばしば。
筆者も一つ一つググって調べていますので、このブログで情報をお伝えできればと思います！
そんなことで、まず「プラグイン」について調べてみました。
WordPressでブログ運営やホームページ運営をするにあたって、プラグイン機能は無くてはならない存在です。
では、そもそもプラグインとは何でしょうか？
WordPress のコアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。ユーザーそれぞれが特定のニーズに合ったプラグインを利用して、カスタム機能を取り入れられるように作られています。
＊WordPress Codexより
何だか説明を聞いても難しく感じますが・・・
使ってみるとそんなに難しくないので、どんどん取り入れていきましょう！
会話形式プラグイン
会話形式プラグインと呼ばれているプラグインがあります。
説明するより見ていただいた方が早いので、下記をみてくださいね！
[speech_bubble type="std" subtype="L1" icon="IMG_1753-768x512.jpg" name="トーマス"]
ね〜、ゴードン！
会話形式プラグインてどんなの？[/speech_bubble]
[speech_bubble type="std" subtype="R1" icon="godon.jpg" name="ゴードン"]
会話形式プラグイン？
そんなことも知らないのか！？[/speech_bubble]
[speech_bubble type="std" subtype="L1" icon="IMG_1753-768x512.jpg" name="トーマス"]
ゴードン！教えてよ〜[/speech_bubble]
[speech_bubble type="std" subtype="R1" icon="godon.jpg" name="ゴードン"]
「Speech Bubble」プラグインを使うことによって、吹き出しを使った会話をブログで表現できるんだ！[/speech_bubble]
[speech_bubble type="std" subtype="L1" icon="IMG_1753-768x512.jpg" name="トーマス"]
へ〜！！吹き出しを使うとなんか良いことあるの？[/speech_bubble]
[speech_bubble type="std" subtype="R1" icon="godon.jpg" name="ゴードン"]
吹き出しを使うことで会話形式に見えるだろ！そうすることで楽しんだよ！ブログ書いてる人の自己満足なんだけどね。
それに読みやすくないか？文章の羅列よりも漫画の方が読みやすいだろ？それと一緒だよ！[/speech_bubble]
[speech_bubble type="std" subtype="L1" icon="IMG_1753-768x512.jpg" name="トーマス"]
なるほどね！確かに会話形式だと読みやすいね！
ところで、初心者にも簡単に使うことできるの？[/speech_bubble]
[speech_bubble type="std" subtype="R1" icon="godon.jpg" name="ゴードン"]
もちろん簡単だよ！プラグインを導入すれば初心者でも簡単にできるから安心して！[/speech_bubble]
こんな感じの会話形式を吹き出しを使って表現できるのが会話形式プラグインと呼ばれるものです。
ほんと自己満足なんですよ。笑
Speech bubble導入方法
Speech bubbleプラグイン
導入方法も簡単で、プラグインから新規追加を選択します。
プラグインの検索に「Speech bubble」と入力し検索します。
「今すぐインストール」をクリックして「有効化」をクリックでOKです！
Speech bubbleを使ってみよう！
[speech_bubble type="std" subtype="L1" icon="IMG_1753-768x512.jpg" name="トーマス"]
それでは実際に使ってみましょう！[/speech_bubble]
ブログ投稿はいつもと同じように、新規追加で記事作成画面に行きます。
下記のコードをコピペして下さい。↓↓
<div class="information">[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"]speech bubble テスト [/speech_bubble]
コピペすると下記のように表示されるはずです！
ちょっとコードを解説
type="drop" これは吹き出しの種類になります。全部で９種類。後ほど説明します。
subtype="L1" の「L1」Lは左の意味、１は吹き出しのしっぽ
subtype="L2"にするとしっぽ部分が「・・・」になります↓↓
[speech_bubble type="drop" subtype="L2" icon="1.jpg" name="Aさん"]subtype="L2"にしました！ [/speech_bubble]
subtype="R2"にすると右側に表示されます↓↓
[speech_bubble type="drop" subtype="R2" icon="1.jpg" name="Aさん"]ubtype="R2"にしました！ [/speech_bubble]
icon="1.jpg" ここは好きな画像に変更できます。方法はちょっとややこしいので後ほど説明します。
name="Aさん" の「Aさん」を好きな名前に変えると表示名が変わります。
「speech bubble テスト」と入力していますが、ここは好きな会話文章でOK
吹き出しは全部で９種類
吹き出しの種類は全部で９種類あります。
type="●●●"
●●●の部分に下記のコードに変更することで表示が変わります。
「drop」「std」「fb」「fb-flat」「ln」「ln-flat」「pink」「rtail」「think」
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"]「drop」で表示[/speech_bubble]
[speech_bubble type="std" subtype="L1" icon="1.jpg" name="Aさん"]「std」で表示[/speech_bubble]
[speech_bubble type="fb" subtype="L1" icon="1.jpg" name="Aさん"]「fb」で表示[/speech_bubble]
[speech_bubble type="fb-flat" subtype="L1" icon="1.jpg" name="Aさん"]「fb-flat」で表示[/speech_bubble]
[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="Aさん"]「ln」で表示[/speech_bubble]
[speech_bubble type="ln-flat" subtype="L1" icon="1.jpg" name="Aさん"]「fb-flat」で表示[/speech_bubble]
[speech_bubble type="pink" subtype="L1" icon="1.jpg" name="Aさん"]「pink」で表示[/speech_bubble]
[speech_bubble type="rtail" subtype="L1" icon="1.jpg" name="Aさん"]「rtail」で表示[/speech_bubble]
[speech_bubble type="think" subtype="L1" icon="1.jpg" name="Aさん"]「think」で表示[/speech_bubble]
アイコン画像の変更方法
キャラアイコンは変更可能です！
[speech_bubble type="std" subtype="R1" icon="godon.jpg" name="ゴードン"]
アイコン画像は変更できるけど、ちょっと面倒なんだ！でも覚えてしまえば難しくもないはず！頑張って挑戦してね。[/speech_bubble]
まずはアイコンに使う画像を用意しましょう！
続いて画像をアップするのですが、ブログに画像をUPするのとはちょっと違う。
サーバーのspeech bubbleフォルダに画像をアップします。
はい、ちょっとややこしくなりました。
筆者の契約サーバーはロリポップなので、ロリポップサーバーの場合の説明を書いてみます。
その他のサーバーの方は参考程度に見ていただければ良いかと思います。
ますはロリポップのHPに行き、ログインしましょう！
ログイン後、WEBツール→ロリポップ！ FTPをクリック
ロリポップFTP画面に移行します。
画像をアップしたい自身のサイトフォルダをクリックしましょう。
サイトが一つしかない場合はフォルダは１つしか出ないと思います。
筆者は３つ運営していますので、フォルダが３つ表示されています。
次に、「wp-content」をクリックします。
続いて、「plugins」をクリックします。
さらに、「speech-bubble」をクリックします。
さらに、さらに「img」をクリック！
最後に「アップロード」をクリックして、「ファイルを選択」をクリック
アイコンに使いたい画像を選択して、「アップロード」をクリックして完成です！
[speech_bubble type="std" subtype="R1" icon="godon.jpg" name="ゴードン"]
やってみると意外と簡単なんだよ！[/speech_bubble]
画像を変更してみよう
サーバーにアップロードした画像ファイル名をコピペまたは覚えておきます。
speech bubbleのコード内にアップロードした画像ファイル名を入力します。
[speech_bubble type="std" subtype="L1" icon="godon.jpg" name="ゴードン"]
icon="●●●" ●の部分にファイル名を入れればOK[/speech_bubble]
これでspeech bublleを使いこなせますね！
speech bubbleまとめ
使ってみると意外と楽しくて、読みやすいと思うのは自己満足かもしれません・・・
それでも良いです。ブログなんて自己満足の世界ですからね！