★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

WPテーマ “ハミングバード” の吹き出しでキャラに喋らせる方法

ブログ向けWordPressテーマの ハミングバード

これを使うとキャラ画像の横に吹き出し表示して喋らせることができます。

例えばこんな感じで
WPテーマ ハミングバード - キャラに吹き出しを付けて喋らせている例

画像とセリフさえ用意すれば、ショートコードで楽々挿入可能

とはいえ、初めて使う人の中には「どうやって台詞を喋らせればいいかさっぱり・・・」という方も多いかもしれません。

そこでハミングバードで吹き出しを使ってキャラに喋らせる手順をまとめました。

また特定キャラの吹き出しをワンクリックで挿入する方法も最後に紹介します。

キャラに吹き出しをつけて喋らせる基本手順

吹き出し表示するには次の手順を順番に行っていくだけです。

1.まずキャラ画像を用意しよう

まずやるべきことは喋らせたいキャラ画像の用意

なので最初に画像素材サイトからお気に入りのキャラ画像を探してDLしておきましょう。

ちなみに・・・
キャラ探しする場合は次の素材サイトで探すのがオススメ

個人的によく使っているのはイラストAC
ここは所属イラストレーターが多いので、高クオリティの素材が見つかりやすいです。

た・だ・し、もしあなたが

ありふれた素材じゃなくて、完全オリジナルなキャラ画像を使いたい・・・

こう思っているならイラストを外注してみるのも手ですね。

イラスト外注は次サービスに登録すれば依頼可能です。

  • ココナラ  : プロにイラスト作成依頼できるサイト
  • SKIMA : 個人間でイラスト依頼できるサービス

特に ココナラ の場合、 千円からでもイラスト依頼できる のが利点

また出品者と直接相談すれば、笑い顔や驚き顔などの差分付きキャラ画像も作成可能です。

どういうサービスが出品されているかは、
実際に登録して「似顔絵・イラスト・漫画」カテゴリーから探してみてください。

世界に1つだけしかないキャラ画像が作れます。

2.作成・DLしたキャラ画像をアップロードしよう

そうしたら次にキャラ画像をWordPressにアップロードします。

この時、アップしたキャラ画像のURLをコピーするのを忘れないでください。

その手順は知ってる方も多いかもですが、次の通り

まずメニューから「メディア」ー>「新規追加」をクリック

WordPressメニューから「メディア」ー>「新規追加」をクリック

クリックすると画像一覧が表示されたはず

そうしたら画面上の「新規追加」ボタンを押し、さらに「ファイルを選択」ボタンを押してファイル選択ダイアログからキャラ画像をアップロードします。

↓次画像で赤枠で囲んだボタンをクリックすればOK
メディア画面上の「新規追加」ボタンを押し、さらに「ファイルを選択」ボタンを押して吹き出し表示したいキャラ画像をアップロード

この時アップロードするキャラ画像のサイズはあまり大きすぎない方がいいです。

大きすぎると表示速度的にもマイナスなので、
50ピクセル~100ピクセルの範囲でキャラ画像をリサイズしておきましょう。

あとハミングバードではキャラ画像の周りが丸く縁どられるので、余白必須です。

もし余白が全くないなら、白色で適当な余白を作っておいてください。

余白作成ならオンラインで画像編集できるツールを使うのが楽

ではキャラ画像がアップできたら、画像一覧からその画像をクリック

ハミングバードで吹き出し表示したいキャラ画像をクリック

画像詳細のダイアログが表示されたと思います。

その中で下画像の赤枠で囲った
URL」内の画像URLをコピーしておくか、どこかにメモしておきましょう。

「添付ファイルの詳細」が開いたら「URL」内のキャラ画像URLをコピーする。このURLが吹き出しショートコードの挿入時に必要になる

画像URLが分からないとキャラに吹き出し表示できないので、URLのチェックをお忘れなく!

これでハミングバードで吹き出し表示する準備はほぼ完了です。

3.吹き出し表示するショートコードを作ろう

では最後にショートコードを使ってキャラに吹き出し表示してみましょう。

ただしショートコード直書きは超大変なので、
投稿画面からワンクリックで挿入できるように設定しておくと便利です。

その設定手順は次記事で解説したので要チェック

ブロガー向けWordPressテーマ "ハミングバード" でショートコードを楽に挿入する方法をまとめました。ショートコード直書きは時間がかかるし面倒くさいという方に特におススメです。数分あれば設定できるので是非お試しを!

まずはこの手順を試すのが先です。設定自体は数分もかからないのでお試しあれ

上の手順通りにすれば、投稿画面からハミングバード専用のショートコードが挿入できるようになったはず

登録したショートコードの中には吹き出しも含まれてます。

なので、キャラに吹き出し表示するためにツールバーから「Quicktags」をクリック

ハミングバードで吹き出し表示するには、まずツールバーから「Quicktags」をクリック

それを押したら一覧が出てきますが、その中で 【吹き出し】 と最初についてるのがキャラにセリフを喋らせる用のショートコードです

【吹き出し】と付いているものに注目!
追加したハミングバード用ショートコードの内、最初に【吹き出し】と付いているのがキャラにセリフを喋らせる用のショートコード

上画像みたいに Facebook風 とか LINE風 とか色々な種類が選べます。

今回はオーソドックスな 【吹き出し】LINE風(右) を選んでみましょう。

ハミングバードの吹き出しからLINE風を選んでみる

投稿本文内に次みたいなショートコードが挿入されましたよね?

[voice icon="アイコンURL" name="名前" type="r line"][/voice]

このショートコードで赤色マーキングした部分に注目

アイコンURL」を先ほどコピーしたキャラ画像URL、「名前」を好きなキャラ名に置き換えてください。

例えば次がオリジナルキャラにセリフを喋らせる書き方の例

[voice icon="https://example.com/wp-content/uploads/2019/05/usami.png" name="宇佐美" type="r line"]むしゃむしゃポリポリ、ニンジンうめ~~[/voice]

こういう風に書いて投稿を保存すると、実際にキャラが台詞を喋ってくれます。

作成した吹き出し付きキャラ画像の例
WPテーマ ハミングバード - 左に吹き出し、右にキャラが配置された吹き出しの例

初期状態だと吹き出しが左、キャラ画像が右に表示されます。

もし吹き出しとキャラの位置を逆にしたいなら、
type="r line" の部分を次みたいに type="l line" に置き換えればOK

[voice icon="アイコンURL" name="名前" type="l line"][/voice]

キャラをright)に置くなら r 、
キャラをleft)に置くなら l にする、
こういう感じで覚えると分かりやすいです。

ちなみに次が吹き出しの表示例
WPテーマ ハミングバード - 右に吹き出し、左にキャラが配置された吹き出しの例

もしキャラ同士で会話させるなら、このテクニック必須なので必ず覚えておきましょう。

以上がハミングバードで吹き出しを表示させる方法

ここではLINE風吹き出しを例に出しましたが、他の吹き出しでも設定方法は全く同じです。

個人的にはシンプルな吹き出しより Facebook風 or LINE風 の吹き出しを使った方が、キャラのセリフを目立たせるのに効果的かな、と思います。

そこは各人の好みで使い分けてください。

特定キャラの吹き出しを一発で挿入するには

今紹介した吹き出し表示する方法、これには少し面倒なところがあります。

それはいちいち画像URLと名前を設定しないといけないこと

キャラに喋らせるたびに手動入力するのも面倒だし、一発でショートコードから挿入で来たら便利ですよね。

なので最後に特定キャラの吹き出しをワンクリックで挿入する方法も紹介します。

では手始めに AddQuicktag プラグインの設定画面を開きましょう。

開き方はメニューから「設定」ー>「AddQuicktag」をクリックすればOK

WordPressメニューから「設定」ー>「AddQuicktag」をクリック

そうしたら何も入力されていない空のクイックタグを探してください。

こんな感じの未編集のクイックタグを探す
特定キャラ用の吹き出しを用意するには未編集のクイックタグから色々設定を行う

そこに特定キャラ用の吹き出しショートコードを追加していきます。

ではまず「ボタン名*」のところに任意のクイックタグ名を入力

オレンジ色の枠で囲った部分にボタン名入力
キャラ専用の吹き出しを作るにはクイックタグ用のボタン名をまずは入力。最初に【吹き出し】とつけておくと分かりやすい

ここの名前は分かりやすいなら何でもいいです。

ただし、ボタン名の最初は 【吹き出し】 で統一し、その後にキャラ名や表情名(笑顔、驚き、悲しみなど...)を付けておくと分かりやすいかも

そして次に「ラベル名」に半角英数字でボタンの識別名を入力

オレンジ色の枠で囲った部分にラベル名入力
ラベル名にクイックタグの識別名を入力。ここも「吹き出しであること」と「キャラ名&表情名」が分かる名前にするのがベスト

ここは "hukidashi_usami_taberu" みたいに半角文字だけ使って日本語は使わないように気を付けましょう。

なるべく「吹き出しだということ」と「キャラ名と表情名」が分かるラベル名にするのがベストですね。

そして最後は「開始タグ*」と「終了タグ(s)」にショートコードを入力すればOK

オレンジ色の枠で囲った部分に入力
「開始タグ*」と「終了タグ(s)」に特定キャラ用の吹き出しショートコードを入力する

この時の注意点として、
開始タグには [/voice] を入力せず、終了タグに [/voice] を含めるようにしてください。

例えば先ほど例として挙げた次のようなショートコードで考えてみます。

[voice icon="アイコンURL" name="名前" type="r line"][/voice]

この例でいえば、開始タグに含めるのは [voice icon="アイコンURL" name="名前" type="r line"] まで、終了タグに含めるのは [/voice] のみということ

この設定を間違えるとショートコードが機能しないので要注意です!

そうしたら最後に右側に表示されてるチェックボックスを全部チェック

右側のチェックボックスを押せば全部オンになる
クイックタグを投稿画面から挿入するために全部チェックを入れておく

チェックしておかないと投稿画面からショートコード挿入できないので、必ず全部をオンにしておきましょう。

後は「変更を保存」ボタンを押せば専用キャラの吹き出し完成

笑顔とか悲しみとか驚きとか表情ごとのショートコードを作っておけば、吹き出しの編集作業も楽になります。

ハミングバード活用術の関連記事

今紹介したキャラを喋らせる方法みたいに、
このブログではハミングバードの活用術を色々紹介してます。

現在公開中のハミングバード活用術はコチラ

WordPressテーマ "ハミングバード" でピカピカ光るリンクボタンを超簡単に作る手順まとめました。CSSの知識とかも一切必要なく、ただ丸々コピペでできるので是非お試しください!では最初にやるべきことは・・・

記事内容を分かりやすくしたり、目立たせるのに役立つはずです。

特別な知識とかも必要ありません。基本丸々コピペでできるので、是非お試しあれ!

まとめ

以上、ハミングバードの【吹き出し】でキャラに喋らせる方法でした。

ちょっとした工夫をすれば記事がもっと読みやすくなること間違いなしです。ハミングバードを使っている方はこういう機能もフル活用していきましょう!

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press