ブログサイト吹き出しの設定方法【WordPress】【Cocoon】

カッパ子

ブログ記事とかで見る吹き出しアイコンってどうやってるの？

ユウ

プラグインやテーマを活用すれば簡単だよ！

ブログサイトを運営している方にとって、記事を魅力的に見せるためのデザインは大事ですよね。

その中でも、吹き出し用アイコンは記事に親しみやすさを増して、記事を最後まで読んでもらうために効果的です。

本記事では、WordPressブログで使用する吹き出し用アイコンの作成方法と設定方法について解説します。

デザイン初心者の方でも簡単に作成できるよう、具体的な手順とツールを紹介するので、ぜひ参考にしてください。

吹き出し用アイコンの役割とメリット

まず初めに、吹き出し用アイコンを使うメリットについて解説します。

吹き出しは会話とアイコンの形式でテキストを追加で切るので、読者は「人の声」として感じやすくなり、親近感を持って文章を読むことができます。

「これからこんなことを話しますよ」というように記事の内容について簡単に説明できるのも便利です。

吹き出しアイコンを使うメリット

次に、WordPressで使用する吹き出し用アイコンの具体的な作成方法について解説します。

初心者の方でも簡単に作成できるツールと手順を紹介します。

吹き出し用アイコンはデザインを凝らないのであれば、どんなデザインソフトでも作成可能です。

無料で使えることを考えると「Canva」や「Figma」、有料ならAdobeの「Illustrator」などがオススメです。
絵が描けるのであれば「CLIP STUDIO PAINT」や「Procreate」などのイラストソフトで作成するのも良いですね。

作成するソフトを選んだら新規デザインを作成、お好きなキャラクターでデザインを作成しましょう。

アイコンのサイズは「100×100px」が一般的ですが、縦横比１：１の正円であれば問題なく使えると思います。
形はCocoonの場合四角形も使えるのでその辺りはお好みで選びましょう。

作成するアイコンは一つではなく、喜怒哀楽など表情ごとに複数作成すると使い勝手が良くなるのでおすすめです。

デザインが完成したら、適切な形式で書き出しましょう。
アイコン画像であれば、「PNG」で書き出しておけば問題ありません。

上記の作成方法が難しいと感じる方は「ココナラ」や「クラウドワークス」などのクラウドソーシングサービスでプロに依頼するというのも手だと思います。

ただ、吹き出しを使わない場合は無駄になってしまうので、最初は自分で作成したものやフリー素材で運用しておいて、よく使うのであればキチンとしたものを作るのでも良いでしょう。

最後に作成したアイコンをWordPressにアップロードして、吹き出しとして使えるようにする方法について解説します。当ブログのテーマ「Cocoon」をベースに解説しますが、基本的に流れは同じだと思います。

まずは他の画像と同じようにWordPress管理画面から「メディア」→「新規追加」よりアイコン画像をアップロードします。

画像をアップロードしていればWordPressのエディタ画面で「吹き出し」ブロックを作成しアイコン部分を選択すれば好きな画像を使用、アイコン下部を選択すれば名前を入力することができます。

ただ、これだと毎回アイコンと名前を設定することになり面倒なので、テンプレートを作成しておくことをオススメします。

Cocoonテーマの場合、「Cocoon設定」→「吹き出し」を選択することで吹き出しのテンプレート一覧画面が開くので、そこから「新規追加」を選択すればオリジナルのテンプレートを作成可能です。

設定内容としては、

設定したら保存するのを忘れずに！

保存が完了したら先ほどのテンプレート一覧画面に表示されてエディタから呼び出すことができるようになります。

呼び出し方法は簡単。
エディタで「吹き出し」ブロックを追加し、スタイル設定の「人物」ドロップダウンリストから先ほど設定した「タイトル」の名前を探して選択するだけです。

先ほど設定したのはあくまでもデフォルト設定で、呼び出した後に吹き出しスタイルや位置などを変えることもできるので、変えるのに少し手間がかかる「名前」と「アイコン画像」が同じであればテンプレートは一つでいいと思います。

WordPressブログでの吹き出し用アイコンの作成方法について紹介しました。

吹き出しを活用すれば、ブログ記事を魅力的にして読者の興味を引きやすくなります。

ぜひ今回紹介した方法を使って、自分だけのオリジナルアイコンを作成して、ブログに個性と親近感を加えてみてください。

リンク