ブログカスタマイズ

Speech bubble (ふきだしプラグイン)でブログで簡単にキャラを会話させよう!

投稿日:2018年3月5日 更新日: 投稿者:


Warning: Use of undefined constant SB_ALERT_SUBTYPE_MISSING - assumed 'SB_ALERT_SUBTYPE_MISSING' (this will throw an Error in a future version of PHP) in /home/digilocus/digilocus.net/public_html/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 180

Warning: Use of undefined constant SB_ALERT_SUBTYPE_MISSING - assumed 'SB_ALERT_SUBTYPE_MISSING' (this will throw an Error in a future version of PHP) in /home/digilocus/digilocus.net/public_html/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 180
Ame
蓮さん、こないだNHKの人を撃退…じゃなくて、なんか帰ってくれた話が面白かったからブログに書きたいんだけど、会話用のイラスト描いてよ~
ブログで会話とかおしゃれなことする気だこの人!
いいよ~、Ameの自画像ね、ちょっと待っててね

という感じの流れで、ブログ内でキャラを会話させる仕組みを取り入れることとなったDigiLocus。

ブログ内での会話、Ameさんはもっと難しいやり方でふきだしなど作ることも考えたみたいですが、より簡単に済む「Speech bubble (ふきだしプラグイン)」を使わせてもらうことになりました。

WordPressでのSpeech bubble (ふきだしプラグイン)の使い方を、今回気づいたことなどを踏まえながら順番に書き記しておきたいと思います。

(正直やり方を見たとき複雑そう…と思って少し躊躇しましたが、全然簡単にできましたよ!)

Speech bubble (ふきだしプラグイン)をWordPressにインストール

まずはWordPressの「プラグイン」という項目から、「Speech bubble (ふきだしプラグイン)」を検索してインストールします。

Speech bubble (ふきだしプラグイン)

インストールしたら有効にしておきましょう。

ふきだしで会話させたいキャラの画像を準備

Speech bubble (ふきだしプラグイン)をインストールできたら、会話させたいキャラを用意しなくてはいけませんね。

デフォルト
用意しなくてもわたくしのような「デフォルトの人」は用意されていますが。

画像の準備はブログのサーバーからやらなきゃいけない手順なので、わたしの使っているXserverを例にお話します。

ぱっと見ちょっと難しそうですが、やってみれば何てことないです。

わたしも最初「えっ、WordPressに画像アップロードするだけじゃないの…?」とやったことない手順に不安になりましたが、下の通りにやってくだけなので初心者でも大丈夫!

FTPアカウントの作成

Xserverのサーバーパネルに入ってもらって、「FTP」という項目の「FTPアカウント設定」を押して下さい。

Speech bubble (ふきだしプラグイン)

そうするとドメインの選択画面というのが出てきますので、ふきだしを使いたいブログを選択しましょう。

FTPアカウント設定という画面になったら、「FTPアカウントの追加」を押します。

Speech bubble (ふきだしプラグイン)

  • FTPユーザーID
  • パスワード
  • パスワード(確認)

この3つを入力したら「接続先ディレクトリ」は空欄、「FTP要領」は0のままで大丈夫なので、右下の「FTPアカウントの作成(確認)」ボタンを押しましょう!

これで第一の下準備は完了です。
ホームに戻ってまた「FTPアカウント」を押してもらうと、今追加したFTPアカウントがちゃんと増えているはずなので、それを選択してログインします。

画像ファイルのアップロード

ログインしたら、こんな画面が出てくるはずですね。

Speech bubble (ふきだしプラグイン)

ファイルを次々とクリックしながら進んでいきます。
進む順番は、下の通りです。

Speech bubble (ふきだしプラグイン)を設置したいブログのファイル名を選択 → public_html → wp-content → plugin → speech-bubble → img

imgまで来たら、右にある[ファイルのアップロード]のところで「ファイルを選択」を押して画像を選び、「アップロード」します。

ファイル形式はjpg、png、gif、svg、tifが使えます。

jpgとpngは試しましたが、正直ちっちゃいので違いがよく分かりません。
ファイルサイズが半分で済むjpgで十分だと思いましたが、お好みで!

WordPressでのSpeech bubble (ふきだしプラグイン)の書き方

以上で全ての前準備が終わったら、いよいよWordPressでふきだし機能を使ってみましょう。

いつものようにWordPressの「投稿」画面に行き、テキスト画面に下記のコードを貼り付けます。これがSpeech bubble (ふきだしプラグイン)でふきだしを使うコードです。

名前
文章

「種類」はふきだしのデザインの種類、「向き」は左向きか右向きか、「画像」は準備したキャラの画像、「名前」はキャラの名前、「文章」には会話の文章を、自分で入れていくことになります。

記入例を挙げると、こんな感じ。

これが記入例です!

これがこう表示されます↓

これが記入例です!

それでは、ひとつひとつ書き方を説明していきますね。

type

Speech bubble (ふきだしプラグイン)には、ふきだしの種類がいくつも用意されています。親切ですね。

こんな感じだよ~という例を挙げてみますので、好みのふきだしをお使い下さい!

コードのtype=”●●”のところにstdとかdropとか書けばOKです。

std

Ame
「std」はスタンダードでしょうか。

さりげなさが良いね

drop

青色でふちどりもあって可愛いですね

Ame
しずくっぽい?から「drop」?

ln

Ame
「ln」はLineってことかな

なんかいつものLineと違うかもー?

ln-flat

そうそう、この「ln-flat」がいつものLineって感じだね!

Ame
flatってだけあって、flatって感じがするね(?)

fb

Ameさんの好みでDigiLocusのふきだしはこの「fb」に決めたみたいです

Ame
そうだっけ。

fb-flat

「fb-flat」だって、フェイスブック第二弾!

Ame
白字なのと、枠がない感じがおしゃれに感じる

rtail

「rtail」は濃い目の水色。かわいい

Ame
これは目を引いてカッコいいね

pink

ピンクのふきだしでかわいめ!

Ame
文字まで全てが「pink」

think

「think」って次の「L2」とかあるのに意味あるのかな?

Ame
うーん…親切心…?

subtype

subtypeでは、キャラの位置を決められます。

  • L1・・・左側
  • R1・・・右側
  • L2とかR2・・・考える吹き出しに。
これがL2を使ったふきだしです

icon

ここに、会話させたいキャラの画像名を書きます。

アップロードした画像の名前をそのまま書いて下さい。hasu.jpgなど拡張子(.jpgとか.pngとか)の部分までしっかりと!

name

キャラの名前を好きにつけましょう。

この名前はふきだしの種類によって、アイコンの下に書かれたりふきだしの上に書かれたりしますね。長い名前だとふきだしの上のパターンの方がすっきりする?

※もしWordPressにちゃんとコードを書き入れてもSpeech bubble (ふきだしプラグイン)が作動してくれない時は、WordPressを一旦閉じてみると、解決するかもしれません。

ふたたびWordPressにログインしてコードを書いてみると、わたしの場合はちゃんとふきだしが表示されました。

まとめ

Speech bubble (ふきだしプラグイン)というプラグインを使えば、ブログ内で簡単に会話をさせることができましたね!

プラグインは確かに動作が遅くなったり、無駄に増やしてはいけないと遠慮しがちですが、ブログ内での会話をプラグインなしでとなるとハードルが高いです。

見栄えもSpeech bubble (ふきだしプラグイン)の方が良いように思いますし、わたしは気に入って使わせてもらってるプラグインですね。

ちょっと昔で更新が止まってるのが気になるところではあるんですが、今のところ問題なく使えるのでこのまま使用させて頂こうと思います^^

-ブログカスタマイズ


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

虫眼鏡で何かを調べている男性

HTTPSでサイトを作成したのにHTTPのページがインデックスされる場合の解決方法

先日独自ドメインを取得してHTTPS、つまりSSLに対応したサイトを作成したのですが、なぜかHTTPSだけでなくHTTPのページもインデックスされたり、HTTPSのページが検索結果に表示されないといっ …

お問い合わせフォーム WordPress

お問い合わせフォームをWordPressのブログに設置!プラグインContact Form 7が便利

自分のブログに、「お問い合わせフォーム」って…つけた方がいいですよね? 自分のブログから連絡を取りたい!と思ってくれた方にとっても、連絡を受け取る側にとっても、分かりやすくスムーズに管理できるのがお問 …

Akismet 設定

Akismetの設定は簡単!WordPressのスパム対策に必要なプラグイン

一生懸命作ったサイトに大量のスパムコメント…、そんな嫌な思いをしないで済むために、「Akismet Anti-Spam(アンチスパム)」のプラグインを使うのをおすすめします。 設定しておくと、自動でス …

ブログ 開設

ブログの開設と作成方法を初心者向けに解説!WordPressでの始め方

初心者の頃ブログを作るっていうと、「無料ブログでいいじゃん!」「WordPressなんて難しいの使わなくても、FC2とか…もっと初心者向けなブログあるでしょ?」と思う人が多いかもしれません。 確かに無 …

h2などの見出し前後の行間隔・余白をmarginとpaddingで調整【WordPress】

h2やh3などの見出しの前後の間隔(余白のスペース)がなんとなく詰まってるなぁor開きすぎてるなぁ…という時に使える、スペース間隔を自由に調整する方法をご紹介します。 このブログではWordPress …