1番シェアされている記事はこちら

【超絶初心者でも簡単】ワードプレス・吹き出しの作り方、アイコンイラストの用意

WordPress超絶初心者(2018.8月時点)のミカコ(@mikakolife)です。

わたしがWordPressでやりたかったこと…それは、吹き出しを使ったブログ!

ミカコ
これのことー!

かなり多くの方のブログで見たので、憧れていました!

画像をあまり使わず、文章だけになってしまいがちなわたしのようなブログでは、吹き出しがとてもいい仕事をしてくれています。

今回は、この吹き出しについて、超絶初心者向けのお話です。

 

初心者がつまずくのは、主に

★実際の吹き出しの作り方


★吹き出しアイコン用の画像の用意

ではないでしょうか。

この2点について、Twitterでブログの先輩にお聞きしたことを元に、初心者目線で解説します。

【WordPress】超初心者ブロガーのTwitterの使い方。離れ小島で、アクセスの少なさに涙目にならないための方法!

吹き出しの作り方

主な吹き出しの作り方は、3つあります。

    1. テーマに実装(用意)されている
    2. プラグインを使う
    3. CSSコードを直接書き込む

では、ひとつひとつ見ていきましょう。

①テーマに実装されている

わたしが使用しているテーマ「JIN」でも最初から実装されていたので、難しい設定はとくになく、簡単に使えるようになっています。 (現在は「SANGO」にテーマを変えています)

他にも、実装されているテーマは多いようです。
(実際にブログの先輩方が使っているテーマの一例であり、全部網羅しているわけではありません)

吹き出しが実装されている主なテーマ

  • JIN
  • 賢威
  • Diver
  • cocoon
  • STOKE
  • SANGO
  • AFFINGER5 など

それぞれ、テーマごとにマニュアルが有るかと思いますが、やり方はJINと同じように、

アイコン画像をメディアにアップロードし、

テーマで指定されているショートコードプラグイン「AddQuickTag」に登録することで、

簡単に呼び出せるよう設定するタイプが多いようです。

②プラグインを使う

お使いのテーマに吹き出し機能が実装されておらず、CSSコードをいじること自体ハードルが高い方はこちらがおすすめです。

ミカコ
ただし、プラグインはやたらめったらインストールしていると、サイト表示や管理画面表示が重くなってしまうことがあるので、厳選して使おう!

代表的なプラグインとして「Speech Bubble」があります。

色んな吹き出しが作れるようです!

ご注意!
調べていくうちに、このプラグインで不具合があったという報告や、更新があまりされていないプラグインだという情報を見つけました。
もしお使いのテーマと合わない場合は他の方法でいきましょう!

設定方法・使い方はこちらの2つのブログがとても詳しいので参考にしてください。 

③CSSコードを直接書き込む

これが一番、初心者にはハードルが高いのではないでしょうか?
もちろん、自分でコードを作り出すなんてことはしなくていいです。
詳しいおたすけサイトからコピーして貼っちゃいましょう!

こちらは、「TinyMCE Templates」というプラグインを使って、すぐに呼び出せるように工夫されたやり方を紹介されています。

参考 WordPressで会話風の画像とテキストをコピペで簡単表示! – MORIAWASE(モリアワセ)MORIAWASE(モリアワセ)
ミカコ
スタイルシート(CSS)をいじるときは、子テーマの作成を忘れずに!
【ワードプレス超絶初心者向け】子テーマとは?デザインのカスタマイズの前に必読!

上の記事を読んで子テーマのことを理解され、作ったあとなら、CSSをいじることのハードルも低くなるのでは!

吹き出しに使うアイコン画像の用意

吹き出しに使うアイコンは、先輩方のブログを見ているとこんなに種類があります。

  1. 写真を使う
  2. 自分でイラストを描く
  3. 無料イラスト素材屋をDLして使う
  4. ココナラなどで、絵師さんに注文して描いてもらう

では、ひとつずつ先輩方の参考になるブログを拝見しながら見ていきましょう!

①写真を使う

ペットや、自分の写真を使用している方が結構いますね!

とても個性が出るし、魅力的な写真がアイコンならそれだけでまたブログを見たい!と思う方も多いはず…!

ミカコ
顔出しはストーカーなどに充分気をつけて、個人情報を載せないようにしましょう!

 

写真をアイコン使用中のブロガーさん

着物とうさぎとwebマーケ・よっしーさん(@yoshitaka86 

やりたいことは空から降ってこない・まっちゃん.さん(@futtekonai 

②自分でイラストを描く

今はスマホでもタブレットでも簡単に絵が描けますよね!

これもめちゃくちゃ個性が出ます

わたしもそうしたかったのだけど、アイコンにするとどうしても納得いかなかった…!

ちなみにわたしが絵を描く時に使っているのは、
iPad pro 10.5 とApplePencil 、アイビスペイントです。
道具だけは最高…。Apple Pencil最高に描きやすい!あとはウデマエだけ!

 

アイコンを自分で描いたブロガーさん

にこるとめーこ・にこるさん(@choco2col 

いまじんズ・Sayaさん(@sayataro98 

 

③無料イラスト素材をDLして使う

これが一番簡単で、チャレンジしやすい方法かもしれません!

わたしも、家族以外の人物が登場する時は使います。

イラスト素材をDLするとき、アフィリエイトをしている方は商用利用OKか確認しましょう!

参考 これが無料?優秀なフリーイラスト素材サイト30(商用利用可)サルワカ | サルでも分かる図解説明マガジン
イラストをDLして使用中のブロガーさん
OK! しろくまくん・しろくまくん(@banban1971 

 

④ココナラでアイコンを注文してみた!

わたしは最初、自分で描いたのですがどうも上手く描けなくて納得がいかず、時間を取られるのが嫌で、この方法を取りました。

【ココナラ】とは、「みんなの得意を売り買い・スキルのフリーマーケット」だそうです!

ミカコ
わかりやすいキャッチコピーだよね!

わたしは、Twitterでも使っている自作のアイコンに似せて、絵師さんに吹き出し用に喜怒哀楽の表情をつけて描き直してもらおうと思っていたので、自分の描いた絵の雰囲気に似てる作風の方を探しました。

一般的には、自分の写真を見せて似顔絵を書いてもらったりするのが普通のようなので、わたしのように自分の描いたものに似せてくれなんて、どあつかましいし失礼なんじゃないかとびくびくしておりましたが、快く引き受けて下さった絵師さんがいます!

ゆずみつサワーさん(@yuzumitsusour09 )です。

相談してから作業にとりかかってもらうのですが、レスポンスがスムーズで、作業も早かったので、あっという間に素敵なイラストを作っていただけました!

ミカコ
せっかちのわたしはとても嬉しかったです!

 

アイコン注文時のチェックポイント

  • 商用利用OKか確認!(別料金に設定されている方もいます)
  • わたしのブログも見ていただいて、色調をあわせてもらいました!
  • 背景は「透過」を選択し、アイキャッチ画像にも入れやすく!

 

これはわたしの主観かもしれませんが、Twitter内でもイラストの上手な方って、親切でしっかりしていて、頭の良い方が多い気がします…!

そういうご本人の雰囲気が絵に現れていることって多々あるので、「ココナラって敷居高そう…」と思っている方も、気軽に「これは!」というイラストを探してお願いしてみるといいと思いますよ!

ココナラでアイコンを探してみる!



 

追記:読者の方から、「ココナラに登録したいが、招待コードがあったら教えてください」と問い合わせを頂いたので、載せておきますー!

【 kefxb3 】が、わたしの招待コードです。

新規登録時にこのコードを入力すると、ココナラ内で使える300円分のポイントがもらえます♪

ココナラのほかにも、メルカリなどでも注文できるようです!

アイコンを注文して使用中のブロガーさん

せらたま。・すこみみさん(@theratama01 

パステル通信・まほさん(@Pastelcareer )

まめまメモ・まめまさん(@majime_zubora 

その記事は、本当に吹き出しを使っていいのか?

 

また、あるブロガーさんからは「意図的に吹き出しを使わないようにしている」というご意見もありました。

会話形式の時には役に立ち、文章の多い記事では箸休め的存在にもなる吹き出しですが、記事の内容によってはあまり多用しないほうがいい場合もあります。

ここぞという時に使えるように読者のユーザビリティ(使いやすさ、読みやすさ)を見極めましょう!

まとめ

 

わたし個人としては、いくつか吹き出しアイコンの画像に表情のパターンがあると、セリフにあったものが作れて好きだなぁと思いました!

対話形式の場合、左で喋った吹き出しに対して右で答えるというパターンが主流のようでした。

しかし最近は人の視線の動きを重視すると、左で揃えたほうが見やすいので、左で揃えているブロガーさん多いようです。

わたしもまだまだ使いこなせていないので、色々な方のブログを拝見して勉強していこうと思います。

この記事を書くためにご協力頂いた皆様にお礼を申し上げます。

 

【おしまい】

ブログで稼ぐ方法とは?アフィリエイトにおすすめなASP10選を紹介!【初心者向け】 アフィリエイト初心者におすすめWPプラグイン「Rinker」の使い方!ASPどっちに設定する? 【超絶初心者でも簡単】ワードプレス・吹き出しの作り方、アイコンイラストの用意 【ワードプレス超絶初心者向け】子テーマとは?デザインのカスタマイズの前に必読!