今回は、WordPressプラグインspeech bubble「スピーチバブル」の
- インスト―ル手順
- 使用方法
- アイコン画像の変更方法
についてご紹介します。
スピーチバブルを使用すると
- 会話形式のコンテンツが作れ、読者さんにわかりやすい
- 登場人物が登場するので親近感がわく
- 読まれやすくなる
などのメリットがあります。
実際に作成すると、以下のようになります。
- Speechbubbleのコードの紹介
- セリフの変更方法
- キャラの名前の変更方法
- 吹き出しの種類の変更方法
- 人物の向きと、吹き出しのしっぽの種類の変更方法
もご紹介します。
自分好みに変更して使ってみてくださいね。
目次
Speech Bubbleのインストール手順
「Speech Bubble」はプラグインなので、まずインストール手順を紹介します。
【ダッシュボード】‐【プラグイン】-【新規追加】をクリック
プラグインを追加・キーワード欄に「speech bubble」と入力
【今すぐインストール】をクリック
【有効化】をクリック
以上で、プラグインの【インストール】と【有効化】が終わりました。
吹き出しプラグインSpeech Bubbleを使って投稿をする方法
- SpeechBubbleのコードの紹介
- セリフの変更方法
- キャラの名前の変更方法
- 吹き出しの種類の変更方法
- 人物の向きと、吹き出しのしっぽの種類の変更方法
Speech Bubbleのコードの紹介
【投稿】‐【新規追加】をクリック
【ビジュアルモード】、【テキストモード】どちらでも使用可能です。
今回はビジュアルモードですすめていきます。
スピーチバブルには下記のコードを入力することで使用できますが、本ブログでコードを記載すると、以下の画像になってしまい、コードが表示されないので、キャプチャ画像での紹介になります。
以下のブログ記事の中でコードのコピーをしていただけます。僕のブログに飛びます。
キャプチャ画像↓
もしくは、下記のコードをコピーし、【？】を【_】アンダーバーに書き換えていただけると使用できます。
※【_】アンダーバーは半角でShiftキー＋「ろ」です。
| [speech?bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”Aさん”]おっす[/speech_bubble] |
| [speech?bubble type=”drop” subtype=”R1″ icon=”1.jpg” name=”Bさん”]おはようございます[/speech_bubble] |
セリフの変更方法
スピーチバブルのコードの紹介で記載した、スピーチバブルのコードの後半部分「おっす」を変更することで、【セリフ】を変えることができます。
| subtype=”L1″ icon=”1.jpg” name=”Aさん”]●●●●●[/speech_bubble]
subtype=”L1″ icon=”1.jpg” name=”Bさん”]△△△△△[/speech_bubble] |
Aさんの【セリフ】は↑のコードの●●●●●の部分を変えればOK。
同じくBさんの【セリフ】は↑のコードの△△△△△を変えればOK。
キャラの名前の変更方法
スピーチバブルのコードの紹介で記載した、スピーチバブルのコードの後半部分「Aさん」を変更することで、【名前】を変えることができます。
| subtype=”L1″ icon=”1.jpg” name=”□□”]●●●●●[/speech_bubble]
subtype=”L1″ icon=”1.jpg” name=”◎◎”]△△△△△[/speech_bubble] |
キャラの名前が「Aさん」ですが、↑コードの【name=”□□”】の□□を変更すると名前を任意で設定できます。
「Bさん」も↑コード【name=”◎◎”】の◎◎を変更することで、名前を任意で設定できます。
吹き出しの種類の変更方法
吹き出しの種類は9種類あります。
9種類はコード始め部分の【type=”drop”】の「drop」部分を変更すればokです。
デフォルトではdropになっています。
9種類のコードはdrop・ std・ fb・ fb-flat・ ln・ ln-flat・ pink・ rtail・ thinkのどれかを撰べばいいです。
それぞれ見てみますね。
drop
std
fb
fb-flat
ln
fb-flat
pink
rtail
think
キャラの向きと、吹き出しのしっぽの種類の変更方法
キャラを左に置くか、右に置くかは【subtype=” “】の部分で変更します。
また、吹き出しのしっぽも同じく【subtype=” “】の部分で変更します。
【L1】→人物を左側に配置・吹き出しのしっぽは「話す」タイプ
【L2】→人物を左側に配置・吹き出しのしっぽは「考える」タイプ
【R1】→人物を右側に配置・吹き出しのしっぽは「話す」タイプ
【R2】→人物を右側に配置・吹き出しのしっぽは「考える」タイプ
アイコン画像（キャラとかの画像）の変更方法
デフォルトの設定の画像をみてみると、シンプルなアイコンになっています。
それを、今回僕が使用した「もくもくちゃん」みたいに、あなたの好きな画像や写真に変更することができます。
予めアップロードしたい画像を用意してください。
画像は（jpg.png.gif.svg.tif）、ファイル名は半角英数字で作りましょう。
画像サイズは大きくても勝手にリサイズされて、ちょうどいい大きさに変更されますので、画像編集の際にサイズ変更などをしなくても大丈夫です。
アイコン画像の変更手順
あなたの使用しているサーバーの、WordPressの中のフォルダ「speech-bubble」の中の「img」ファイルを探します。
今回、ご説明する内容はXSERVERを使った場合の設定方法になります。
インフォパネルにログイン
【ご契約一覧】から、任意のサーバーでの【ファイルマネージャ】へ「ログイン」をクリック
任意のファイル名をクリック
【public_html】をクリック
【wp-content】をクリック
【plugins】をクリック
【speech-bubble】をクリック
【img】をクリック
【ファイルを選択】をクリック
使用する画像を選択し、開くをクリック
【アップロード】をクリック
アップロードされたファイルを確認
アイコン画像変更手順のまとめ↓
※gif画像
アップロードできたかの確認
コードの中の【icon=”○○”name】。
○○の部分にアップロードしたファイル名を入力してください。
icon=”mokuhidari-iiyo.png” name
オリジナルタグを作ってスピーチバブルの定型文の入力の手間を省くプラグイン
スピーチバブルを簡単に使えるようにするプラグインを、別記事にてご紹介しています。
宜しければ、ご覧になってみてください。
https://kima01.com/addquicktag/
まとめ
今回は、WordPressプラグインspeech bubble「スピーチバブル」の
- インスト―ル手順
- 使用方法
- アイコン画像の変更方法
についてご紹介しました。
スピーチバブルを使用すると
- 会話形式のコンテンツが作れ、読者さんにわかりやすい
- 登場人物が登場するので親近感がわく
- 読まれやすくなる
などのメリットがあります。
是非あなたもこのSpeech Bubbleというプラグインを活用して、ブログを書いてみてくださいね。