わたしがWordPressでまずやりたかったこと…それは、ブログで吹き出しを使ってみることでした！
ミカコ文字ばかりになってしまう記事では、吹き出しがとてもいい仕事をしてくれています。
今回は、この吹き出しについて、超初心者向けに、わかりやすくお伝えします。
初心者がつまずくのは、主に
★実際の吹き出しの作り方
★吹き出しアイコン用の画像の用意
ではないでしょうか。
この２点について、Twitterでブログの先輩にお聞きしたことを元に、初心者目線で解説します。
ワードプレスでの吹き出しの作り方
主な吹き出しの作り方は、３つあります。
-
- テーマに実装（用意）されている
- プラグインを使う
- CSSコードを直接書き込む
では、ひとつひとつ見ていきましょう。
①テーマに実装されている
わたしが使用しているテーマ「JIN」でも最初から実装されていたので、難しい設定はとくになく、簡単に使えるようになっています。 （現在は「SANGO」にテーマを変えています）
それぞれのテーマでやり方が違いますので、マニュアルを確認してください。
他にも、実装されているテーマは多いようです。
（実際にブログの先輩方が使っているテーマの一例であり、全部網羅しているわけではありません）
吹き出しが実装されている主なテーマ
- JIN
- 賢威
- Diver
- Cocoon
- STOKE
- SANGO
- AFFINGER5 など
それぞれ、テーマごとにマニュアルが有るかと思いますが、やり方はJINと同じように、
①アイコン画像をメディアにアップロード
②テーマで指定されているショートコードをプラグイン「AddQuickTag」に登録する
これだけで、簡単に呼び出せるよう設定するタイプが多いようです。
②プラグインを使う
お使いのテーマに吹き出し機能が実装されておらず、CSSコードをいじること自体ハードルが高い方はこちらがおすすめです。
ミカコ
代表的なプラグインとして「Speech Bubble」があります。
色んな吹き出しが作れるようです！
もしお使いのテーマと合わない場合は他の方法でいきましょう！
設定方法・使い方はこちらの２つのブログがとても詳しいので参考にしてください。
参考 かわいいふきだしプラグイン「SpeechBubble」の設定方法 | ネコノテ ーブログアフィリエイト初心者の便利帳ー初心者アフィリエイト主婦の副収入実況ブログ
参考 WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる！ブログマーケッターJUNICHI
③CSSコードを直接書き込む
これが一番、初心者にはハードルが高いのではないでしょうか？
もちろん、自分でコードを作り出すなんてことはしなくていいです。
詳しいおたすけサイトからコピーして貼っちゃいましょう！
こちらは、「TinyMCE Templates」というプラグインを使って、すぐに呼び出せるように工夫されたやり方を紹介されています。
参考 WordPressで会話風の画像とテキストをコピペで簡単表示！ – MORIAWASE（モリアワセ）MORIAWASE（モリアワセ）
ミカコ
【ワードプレス超絶初心者向け】子テーマとは？デザインのカスタマイズの前に必読！
上の記事を読んで子テーマのことを理解され、作ったあとなら、CSSをいじることのハードルも低くなるのでは！
吹き出しに使うアイコン画像の用意
吹き出しに使うアイコンは、先輩方のブログを見ているとこんなに種類があります。
- 写真を使う
- 自分でイラストを描く
- 無料イラスト素材屋をDLして使う
- ココナラなどで、絵師さんに注文して描いてもらう
では、ひとつずつ先輩方の参考になるブログを拝見しながら見ていきましょう！
①写真を使う
ペットや、自分の写真を使用している方が結構いますね！
とても個性が出るし、魅力的な写真がアイコンならそれだけでまたブログを見たい！と思う方も多いはず…！
ミカコ
写真をアイコン使用中のブロガーさん
着物とうさぎとwebマーケ・よっしーさん（@yoshitaka86 ）
②自分でイラストを描く
今はスマホでもタブレットでも簡単に絵が描けますよね！
これもめちゃくちゃ個性が出ます！
わたしもそうしたかったのだけど、アイコンにするとどうしても納得いかなかった…！
ちなみにわたしが絵を描く時に使っているのは、
iPad pro 10.5 とApplePencil 、アイビスペイントです。
道具だけは最高…。Apple Pencil最高に描きやすい！あとはウデマエだけ！
③無料イラスト素材をDLして使う
これが一番簡単で、チャレンジしやすい方法かもしれません！
わたしも、家族以外の人物が登場する時は使います。
イラスト素材をDLするとき、アフィリエイトをしている方は商用利用OKか確認しましょう！
参考 これが無料？優秀なフリーイラスト素材サイト30（商用利用可）サルワカ | サルでも分かる図解説明マガジン
④ココナラでアイコンを注文してみた！
わたしは最初、自分で描いたのですがどうも上手く描けなくて納得がいかず、時間を取られるのが嫌で、この方法を取りました。
【ココナラ】とは、「みんなの得意を売り買い・スキルのフリーマーケット」だそうです！
ミカコ
わたしは、Twitterでも使っている自作のアイコンに似せて、絵師さんに吹き出し用に喜怒哀楽の表情をつけて描き直してもらおうと思っていたので、自分の描いた絵の雰囲気に似てる作風の方を探しました。
一般的には、自分の写真を見せて似顔絵を書いてもらったりするのが普通のようなので、わたしのように自分の描いたものに似せてくれなんて、どあつかましいし失礼なんじゃないかとびくびくしておりましたが、快く引き受けて下さった絵師さんがいます！
ゆずみつサワーさん（@yuzumitsusour09 ）です。
相談してから作業にとりかかってもらうのですが、レスポンスがスムーズで、作業も早かったので、あっという間に素敵なイラストを作っていただけました！
ミカコ
アイコン注文時のチェックポイント
- 商用利用OKか確認！（別料金に設定されている方もいます）
- わたしのブログも見ていただいて、色調をあわせてもらいました！
- 背景は「透過」を選択し、アイキャッチ画像にも入れやすく！
これはわたしの主観かもしれませんが、Twitter内でもイラストの上手な方って、親切でしっかりしていて、頭の良い方が多い気がします…！
そういうご本人の雰囲気が絵に現れていることって多々あるので、「ココナラって敷居高そう…」と思っている方も、気軽に「これは！」というイラストを探してお願いしてみるといいと思いますよ！
ココナラでアイコンを探してみる！
追記：読者の方から、「ココナラに登録したいが、招待コードがあったら教えてください」と問い合わせを頂いたので、載せておきますー！
【 kefxb3 】が、わたしの招待コードです。
新規登録時にこのコードを入力すると、ココナラ内で使える３００円分のポイントがもらえます♪
ココナラのほかにも、メルカリなどでも注文できるようです！
アイコンを注文して使用中のブロガーさん
せらたま。・すこみみさん（@theratama01 ）
パステル通信・まほさん（@Pastelcareer )
まめまメモ・まめまさん（@majime_zubora ）
その記事は、本当に吹き出しを使っていいのか？
また、あるブロガーさんからは「意図的に吹き出しを使わないようにしている」というご意見もありました。
会話形式の時には役に立ち、文章の多い記事では箸休め的存在にもなる吹き出しですが、記事の内容によってはあまり多用しないほうがいい場合もあります。
ここぞという時に使えるように、読者のユーザビリティ（使いやすさ、読みやすさ）を見極めましょう！
まとめ
わたし個人としては、いくつか吹き出しアイコンの画像に表情のパターンがあると、セリフにあったものが作れて好きだなぁと思いました！
対話形式の場合、左で喋った吹き出しに対して右で答えるというパターンが主流のようでした。
しかし最近は人の視線の動きを重視すると、左で揃えたほうが見やすいので、左で揃えているブロガーさんが多いようです。
この記事を書くためにご協力頂いた皆様にお礼を申し上げます。
【おしまい】
