ブログカスタマイズ

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


関連記事

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

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

頭を抱えて困った様子の女性

コピペだけでOK!STINGER 8でサイドバーが追尾せず変な位置で固定される問題の解決策

現在DigiLocusではWordPressの無料テーマSTINGER 8を使用しています。 STINGERシリーズは国内でトップクラスの人気を誇るテーマで、筆者はSTINGER 3の頃から愛用してい …

Akismet 設定

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

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

固定ページ livedoorブログ

livedoorブログで固定ページ的なものを作ってメニューバーに貼る方法

livedoorブログを作り始めたのですが、色々設定してみて「固定ページはどうやって作るの?」というところで少しとまどいました。 固定ページというのは、WordPressのブログでなら普通に使える機能 …

楽天アフィリエイト 枠線

楽天アフィリエイトのリンクの「外側の薄い枠線」を消す・センター寄せにする方法

わたしは楽天アフィリエイトの広告を使わせてもらっていますが、ブログにリンクを貼る時に、「余計な枠線があるなぁ…」と気になりました。 楽天アフィリエイトの画像やテキストを囲む黒い枠線。これはいいんですが …