ブログ運営 ワードプレス

Speech bubble 吹き出しプラグインをロリポップサーバーで試してみた!

更新日:


WordPressを使い出すと、カスタマイズの豊富さや使いやすさにハマっていき無料ブログが使えなくなると感じます。
プラグインと言われる簡単なカスタマイズが実に豊富でとても便利です。
そこで、Speech bubble というプラグインをロリポップサーバーで導入してっみたので、記録がてらレビューしてみます!

会話形式プラグイン Speech bubble

そもそもプラグインて何?

WordPress初心者にとって、初めて聞く用語が多くないですか?
「有料ブログを始めよ!」て、意気込んだものの・・・
専門的用語が多くて遠ざかってしまうこともしばしば。
筆者も一つ一つググって調べていますので、このブログで情報をお伝えできればと思います!
そんなことで、まず「プラグイン」について調べてみました。
WordPressでブログ運営やホームページ運営をするにあたって、プラグイン機能は無くてはならない存在です。
では、そもそもプラグインとは何でしょうか?

プラグインは、WordPressの機能を拡張するためのツールです。
WordPress のコアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。ユーザーそれぞれが特定のニーズに合ったプラグインを利用して、カスタム機能を取り入れられるように作られています。
*WordPress Codexより

何だか説明を聞いても難しく感じますが・・・
使ってみるとそんなに難しくないので、どんどん取り入れていきましょう!

会話形式プラグイン

会話形式プラグインと呼ばれているプラグインがあります。
説明するより見ていただいた方が早いので、下記をみてくださいね!

トーマス
ね〜、ゴードン!
会話形式プラグインてどんなの?
ゴードン
会話形式プラグイン?
そんなことも知らないのか!?
トーマス
ゴードン!教えてよ〜
ゴードン
「Speech Bubble」プラグインを使うことによって、吹き出しを使った会話をブログで表現できるんだ!
トーマス
へ〜!!吹き出しを使うとなんか良いことあるの?
ゴードン
吹き出しを使うことで会話形式に見えるだろ!そうすることで楽しんだよ!ブログ書いてる人の自己満足なんだけどね。
それに読みやすくないか?文章の羅列よりも漫画の方が読みやすいだろ?それと一緒だよ!
トーマス
なるほどね!確かに会話形式だと読みやすいね!
ところで、初心者にも簡単に使うことできるの?
ゴードン
もちろん簡単だよ!プラグインを導入すれば初心者でも簡単にできるから安心して!

こんな感じの会話形式を吹き出しを使って表現できるのが会話形式プラグインと呼ばれるものです。
ほんと自己満足なんですよ。笑

Speech bubble導入方法

Speech bubbleプラグイン

導入方法も簡単で、プラグインから新規追加を選択します。
プラグインの検索に「Speech bubble」と入力し検索します。
「今すぐインストール」をクリックして「有効化」をクリックでOKです!

Speech bubbleを使ってみよう!

トーマス
それでは実際に使ってみましょう!

ブログ投稿はいつもと同じように、新規追加で記事作成画面に行きます。
下記のコードをコピペして下さい。↓↓

コピペすると下記のように表示されるはずです!

Aさん
speech bubble テスト

ちょっとコードを解説
type="drop" これは吹き出しの種類になります。全部で9種類。後ほど説明します。
subtype="L1" の「L1」Lは左の意味、1は吹き出しのしっぽ

subtype="L2"にするとしっぽ部分が「・・・」になります↓↓

Aさん
subtype="L2"にしました!

subtype="R2"にすると右側に表示されます↓↓

Aさん
ubtype="R2"にしました!

icon="1.jpg" ここは好きな画像に変更できます。方法はちょっとややこしいので後ほど説明します。
name="Aさん" の「Aさん」を好きな名前に変えると表示名が変わります。
「speech bubble テスト」と入力していますが、ここは好きな会話文章でOK

吹き出しは全部で9種類

吹き出しの種類は全部で9種類あります。
type="●●●"
●●●の部分に下記のコードに変更することで表示が変わります。
「drop」「std」「fb」「fb-flat」「ln」「ln-flat」「pink」「rtail」「think」

Aさん
「drop」で表示
Aさん
「std」で表示
Aさん
「fb」で表示
Aさん
「fb-flat」で表示
Aさん
「ln」で表示
Aさん
「fb-flat」で表示
Aさん
「pink」で表示
Aさん
「rtail」で表示
Aさん
「think」で表示

アイコン画像の変更方法

キャラアイコンは変更可能です!

ゴードン
アイコン画像は変更できるけど、ちょっと面倒なんだ!でも覚えてしまえば難しくもないはず!頑張って挑戦してね。

まずはアイコンに使う画像を用意しましょう!
続いて画像をアップするのですが、ブログに画像をUPするのとはちょっと違う。
サーバーのspeech bubbleフォルダに画像をアップします。
はい、ちょっとややこしくなりました。

筆者の契約サーバーはロリポップなので、ロリポップサーバーの場合の説明を書いてみます。
その他のサーバーの方は参考程度に見ていただければ良いかと思います。

ますはロリポップのHPに行き、ログインしましょう!


ログイン後、WEBツール→ロリポップ! FTPをクリック

ロリポップFTP画面に移行します。
画像をアップしたい自身のサイトフォルダをクリックしましょう。
サイトが一つしかない場合はフォルダは1つしか出ないと思います。
筆者は3つ運営していますので、フォルダが3つ表示されています。

次に、「wp-content」をクリックします。

続いて、「plugins」をクリックします。

さらに、「speech-bubble」をクリックします。

さらに、さらに「img」をクリック!

最後に「アップロード」をクリックして、「ファイルを選択」をクリック

アイコンに使いたい画像を選択して、「アップロード」をクリックして完成です!

ゴードン
やってみると意外と簡単なんだよ!

画像を変更してみよう

サーバーにアップロードした画像ファイル名をコピペまたは覚えておきます。
speech bubbleのコード内にアップロードした画像ファイル名を入力します。

ゴードン
icon="●●●" ●の部分にファイル名を入れればOK
これでspeech bublleを使いこなせますね!

speech bubbleまとめ

使ってみると意外と楽しくて、読みやすいと思うのは自己満足かもしれません・・・
それでも良いです。ブログなんて自己満足の世界ですからね!

関連コンテンツ

-ブログ運営, ワードプレス
-, , ,

Copyright© 気まぐれレビューブログ , 2018 All Rights Reserved Powered by AFFINGER5.