WordPress(ワードプレス)で吹き出しを追加する方法(Cocoon)

ブログ・ライティング

ワードプレス初心者だった頃
ひたすら文章ばかり打ち込んでいて、
文章の読みやすさは二の次になっていた私。

「見やすさを改善するために吹き出しを付けてみよう」と思っても
やり方が分からず、
ブログの作り方のサイトを読みあさっていました。

慣れてしまえばサクッとこなせるようになるので、
同じ悩みを抱えている方のお役に立てたらと思います。

沼の主
沼の主

好きなイラストで

こんな吹き出しが作れるようになります!

では、早速作ってみましょう。

吹き出しブロックとは

最初の設定では、このような男性の顔で作ることができます。

はじめまして!

文章と自分の気持ちを区別したいときなどに使います。
吹き出しを作ることで、ブログの表情が一気に豊かになりますね。

この男性の顔の部分を変えることで、
嬉しいこと、悲しいこと、ダークな一面など
様々な表情を表現することができます。

吹き出しはテンプレート化することができます。
一度設定すると以降は簡単に呼び出して使うことができて、便利です!

Cocoon(コクーン)での設定

こちらのブログはCocoon(コクーン)を使って製作しています。

WordPressテーマによって作成方法が異なります。

Cocoonを利用中の方は参考になると思います。

沼の主
沼の主

Cocoonは無料&とても使いやすいので

初めてのブログ作りにオススメです!

吹き出しをブログに付ける方法

いつも通り文章を入力します。

改行した時に右側に出てくる黒い四角の+マークをクリック

吹き出し」をクリック
(すぐ出てこない場合は「すべて表示」をクリックして、下にスクロールしてみましょう。
使ったことがない場合は、結構下に出てくるはずです)

ここに名前が入ります
ここに名前が入ります

ここに文字を入力します

吹き出しの中に言葉を入力します。
必要に応じて吹き出しの名前を入れましょう。未入力でもOKです。

あとは改行して普通に文章を書いていけばOKです!

これで基本の吹き出しが作れるようになりました!

吹き出しの表情を変更する方法

初期設定では上のように男性の画像が出てきますが、
Cocoonでは性別や表情をいくつかの選択肢から
選ぶことができるようになっています。

表情の変更方法を見てみましょう

改行の状態で黒い四角の+マークを押し、
「吹き出し」を選択して空欄の吹き出しを作ります。

画面の右側に「投稿」「ブロック」などの選択肢が出てきましたか?

出ていなければ「下書き保存」「プレビュー」「公開」の隣にある
「設定」という歯車のマークをクリックすることで出てきます。

「ブロック」を選択します。

変更したい吹き出しを選択した状態で「ブロック」を見ると、
上部が「吹き出し」となっており、
下にスクロールすることで吹き出しの内容を細かく変更することができます。

「スタイル設定」の一番上が「人物」となっており、右の↓で選択します。

「男性」「女性」「ビジネスマン」「ビジネスウーマン」「悩むおじさん」「悩むおばさん」「男性医師」「女性医師」「どや顔男性」「どや顔女性」 から選べます。

下に進むと「吹き出しスタイル」があり、「デフォルト」が基本の形です。

こちらがデフォルト
(ビジネスマン)

こちらがフラット
(悩むおじさん)

こちらがLINE風
(男性医師)
アイコンスタイルを「四角(枠線あり)」にしています

こちらが考え事
(どや顔男性)

(どや顔男性、なにかたくらんでそうな顔してますね・・・)

人物位置を右、左にずらして使用することで、
画面のバランスが良くなり、見やすくなります。

対話をさせる時に使うと区別しやすくなるのではないでしょうか。

「アイコンスタイル」で「丸」と「四角」、
「枠線あり」と「枠線なし」が選べます。

下にスクロールを進めると、吹き出しの背景色や文字の色も選べます。
好きな色を自由に選んでみてください。

沼の主
沼の主

次に、オリジナルキャラクターを吹き出しに設定してみましょう

オリジナルキャラクターを吹き出しに設定する方法

オリジナルキャラクターをお持ちの方は、
吹き出しの画像を変更してみましょう。

私はイラストは苦手なので

ココナラ

でお願いして作ってもらいました!(1000円~)

オリジナルキャラがいると愛着が湧くので、ブログのやる気も出てきます!

作り方

ワードプレスにログインします。

右の「Cocoon設定」から、「吹き出し」をクリックします。

上部の「新規追加」をクリック

「タイトル」「名前」を入力します。
「タイトル」:管理用のタイトルなので、自分で判断できればOK
「名前」:アイコンの下に表示されることになる名前(このサイトでいう「沼の主」部分です)

「アイコン選択」の隣の「選択」ボタンをクリックし、
該当するオリジナル画像を指定します。

160px以上の正方形画像を選びましょう)

「吹き出しスタイル」「人物位置」「アイコンスタイル」は
必要があれば変更してください。

(詳しくは1つ前の「吹き出しの表情を変更する方法」で説明しています)

最後に一番下の青い「保存」ボタンを押せば完了です!

あとは、ブログ作成時に「吹き出し」を選択する項目で
「ビジネスマン」「おじさん」などの並びに「(自分で決めた名前)」が出てきます。

選択すればすぐに使うことができますよ!

沼の主
沼の主

これでもう吹き出しで悩むことはありません!やったね!

私もブログ初心者で、
オリジナルキャラクターは1つの表情しかありません。

ゆくゆくは、オリジナルキャラクターに喜怒哀楽の表情を持たせたり
新しいキャラクターを増やしても楽しいだろうなと妄想しています。

一緒に少しずつ経験を積んで、
色々なことができるように頑張っていきましょう!

リンクを貼りつける方法→こちら
サイトアイコン(ファビコン)の設定方法→こちら

コメント

タイトルとURLをコピーしました