このサイトでは、管理人であるままくまが、日常で起こった出来事をもとに、 皆さんに役立つ(?)であろう出来事をゆるっと発信していきます。

Cocoon*吹き出しの使い方*画像をカスタマイズしてオリジナルを作ろう

ブログ

皆さん、ブログを書くときに吹き出しは使っていますか?

ままくま
ままくま

こんなやつ

吹き出しを使うと、つらつらと文章を並べるよりもポップで読みやすい記事に仕上げることが出来ます。

また、吹き出しの画像はカスタマイズ出来るので、自分のブログのオリジナルキャラクターを作ると、ブログ全体に統一感を持たせることもできます。

吹き出しの使いかたをマスターして、より読みやすいブログを目指しましょう!

この記事でわかること
  • 吹き出しの設定方法
  • 吹き出しの効果的な使い方
  • 読みやすい記事とは
スポンサーリンク

Cocoonでの吹き出しの設定方法

まずは吹き出しの設定をしましょう。

よく使う画像の吹き出しは、あらかじめ設定しておくと、記事を書くとき楽に設置できます。

吹き出しの設定方法
  • Cocoon設定の吹き出しを選択
  • 新規追加を選択
  • 吹き出し内容を設定し、保存する

    内容の詳細

    • タイトル…作成する吹き出しの名前。記事作成時に表示されるので、自分がわかりやすい名前を付けましょう。
    • 名前…アイコンの下に名前が表示されます。空欄でもOK。
    • アイコン画像…使用する画像を選択します。160px以上の正方形画像にしましょう。
    • 吹き出しスタイル…4種類のスタイルから選ぶことができます。
    • 人物位置…アイコンの位置を左右どちらにするか選択します。
    • アイコンスタイル…アイコンの形(〇か□)と、枠の有無を選択します。
    • TimyMCE…チェックを外すと記事作成時、設定した吹き出しを呼び出すことができません。基本的にはチェックを入れておきましょう。

    記事作成時にもある程度設定できるので、タイトル・名前・画像さえ登録しておけばOK!

試しにこのアイコンを設定してみましょう。

maro time | 登録不要・商用フリーのアイコン素材サイト

タイトルとアイコン画像のみを設定して保存します。

ちなみに名前も設定した場合は、以下のようにアイコン下に名前が表示されます。

保存すると一覧ページに吹き出しが増えます。

吹き出しの効果的な使い方

まずは、記事への基本的な設定方法を説明します。

記事への吹き出し導入方法
  • 1
    記事上かブロック右の+を選択し、吹き出しを呼び出す
  • 2
    右の吹き出し設定で詳細を設定する

    人物”で、使用したい吹き出しを選択し、その他設定したい項目があれば適宜選んでいきましょう。

    この吹き出しみたいに、吹き出し内の背景色や文字色、吹き出しの枠色の設定もできるよ。

    ※吹き出し設定が出てこない場合は、以下のように吹き出し全体が選択された状態で「」をクリックし、「追加設定を表示」を選択しましょう。

    ※今回だけ別の画像を使いたいな、と思った場合は、吹き出しのアイコン部分をクリックすると、好きな画像をアップロードして使用することもできます。

    (“人物”はどれを選んでも大丈夫です。この時選択した吹き出しのアイコンのみ変更され、元の内容は変更されません。)

吹き出しの活用方法

吹き出しの設定方法が分かったところで、私の吹き出しの使い方を紹介します。

私が吹き出しを使う場面は主に次の3つです。

  • リード文導入前
  • 内容に1つ付け加えがしたいとき
  • 自分の意見を入れたいとき

リード文導入前

結婚式の打ち合わせって何を話すの? | Small Wedding (mamakumablog.com)

読者のこういう疑問に答えますよ、という導入によく使用しています。悩みに応える系の記事によく使いますね。

※当ブログは、私目線の内容が多いので、あまりこの書き方はしませんが…。

内容に1つ付け加えがしたいとき

文章の流れは乱したくないけど、これも知っておいて欲しいという時に使います。

【体験談】結婚式でやって良かったこと | Small Wedding (mamakumablog.com)

上の画像では、実際にやったことは本文で、やってないけどこんな選択肢もあったよ、という追加文を吹き出しで記載しています。

吹き出しは、説明している筆者とは別の目線からの意見として情報を追加することにも使え、内容の幅も広がります。

自分の意見を入れたいとき

自分の考えを本文に書くことがあると思いますが、自分はどうしたか、どう思ったかを強く言いたい時に使うと効果的です。

【webサイト高速化】Cocoonテーマでも、モバイルスピードも向上! | ゆるっと*ちびくまブログ (mamakuma.site)

上記の画像は、当ブログのサイトスピード向上に関する記事です。

この説明は『PWA導入に目に見える効果はなかった』という事柄だけで終わらせても良かったのですが、

最後にサイトスピードの結果を載せるにあたって、『結局、PWAは導入したのかしていないのか』を明確にするために、

吹き出しを使って導入しなかったという事実を強調しました。

吹き出しを使うことで、文字だらけで読みづらいことも軽減されるしね!

読みやすい記事を心がけるために

吹き出しを始め、タブや白抜きボックスなど、ワードプレスには多くの装飾があります。

装飾を使用することで、より見やすい記事を書くことができますが、読みやすい記事作りは何よりまずは中身からだと思っています。

  • 読みたいと思わせるリード文
  • 読みやすい流れ
  • 読者目線の内容
  • 内容に沿った絵や画像

これらが揃って初めて装飾が生きてくるのではないでしょうか。

ブログを書き慣れないうちは、まず文章を書いて、内容が完成した後、読み直した時に、

  • ここは吹き出しで変化をつけようかな
  • ここはリスト化して、白抜きで囲もうかな

などと順序立てて構成・装飾していくことをお勧めします。

ままくま
ままくま

今だから思う経験談です

こんな偉そうなこと言えるほど、全然稼げてないけどね

まとめ

今回は、cocoonテーマでの吹き出しの設定・活用方法をお話ししました。

記事の導入や一言付け加えたいけど、流れを乱したくないとき、変化をつけたいときなど、吹き出しはとても使えます。

私の使用例も載せたので、使い方に迷っている人は、参考にしてみてください。

また、『こういう使い方がおすすめだよ』という意見があれば、教えてくださると嬉しいです。

それでは〜

コメント