せいかつブログ

【Cocoon】簡単!吹き出しの基本的な使い方

この記事は約9分で読めます。

こんにちは、まちゃりさです。

今回は、ワードプレステーマの「Cocoon」で「吹き出し」を使用する手順をご紹介します。

吹き出しは、このような会話を表示したい際に使用します。

最近どうですか?

So-so!(まあまあね)

私のブログ記事内では、ほぼ全ての記事で使っています。

文字ばかりの記事より格段に内容が頭に入りやすくなります!

まだ使われていない方は、この記事を読んでぜひ使ってみてください。

 

それでは、どうぞ!

スポンサーリンク

吹き出しとは?

キャラクターアイコンを喋っているように見せる枠のことです。

記事内で吹き出しを使う効果はこんな感じです。

  • 記事が見やすくなる
  • オリジナリティが出る

文字だらけの記事よりも、吹き出しがあった方が記事が格段に見やすくなります。

先輩ブロガーさんの記事では、吹き出しをたくさん使われている方が多いように思います。

 

▼先輩ブロガーさん(さとるさん)の使い方例

犬と人間の会話ができたり…

一人でかっこいいことをつぶやいたり…

「1人」対「複数」での会話ができたり…

こんな感じ♪ 

上記の吹き出しを使用している参考サイトはこちら(※使用テーマは「Cocoon」ではありません)↓

 

他にも、読者の疑問点を吹き出しに記述し、それに筆者が答える形で吹き出しを使ったりする場合も。

悩む人
悩む人

最近、腰痛がひどいんです・・

まちゃりさ
まちゃりさ

そんなときおすすめなのが、「ストレッチ」です!

工夫次第で、吹き出しの使い方は様々あります。

 

【Cocoon】吹き出しの種類

Cocoonで使用できる吹き出しには、次の2種類があります。

  • Cocoon標準搭載の吹き出し
  • 自作の吹き出し

これらについて、順にご紹介していきます。

 

Cocoon標準搭載の吹き出し

まず、Cocoonで最初から入っている吹き出しのご紹介です。

Cocoonでは10種類の吹き出しパターンが用意されています。

これらは、Cocoon利用者であれば、すぐに使用できます。

 

【Cocoon吹き出し 10種類】

  • 男女(シンプル)
  • 男性(左)

SAMPLE001 男性(左)

  • 女性(右)

SAMPLE002 女性(右)

  • ビジネスマン・ビジネスウーマン(LINE風)
  • ビジネスマン(左)

SAMPLE003 ビジネスマン(左)

  • ビジネスウーマン(右)

SAMPLE004 ビジネスウーマン(右)

  • 悩むおじさんとおばさん(フラット)
  • 悩むおじさん(左)

SAMPLE005 悩むおじさん(左)

  • 悩むおばさん(右)

SAMPLE006 悩むおばさん(右)

  • 男性・女性医師(四角枠)
  • 男性医師(左)

SAMPLE007 男性医師(左)

  • 女性医師(右)

SAMPLE008 女性医師(右)

  • どや顔の男女(考え事)
  • どや顔男性(左)

SAMPLE009 どや顔男性(左)

  • どや顔女性(右)

SAMPLE010 どや顔女性(右)

種類が多く、幅広い場面で使用することが可能です。

(Cocoon標準の吹き出しを使用する手順を先に見たい方は、こちらをクリック)

 

自作吹き出し

Cocoonで標準搭載されている吹き出し以外に、「自作の吹き出し」を作りたい場合もあります。

アイコン画像を用意すれば、簡単に作成できます。

 

準備:160px~200pxの正方形画像

画像サイズが大きいと見切れてしまうので、吹き出し枠に収まる範囲の画像を準備しましょう。

Cocoon作成者「わいひら」さんのサイトでは、画像サイズ160px~200pxくらいの正方形が推奨されています。

このサイズに収まる画像を準備します。

(参考)使用画像について

私は「いらすとや」さんの顔イラストを利用したりしています。

様々な表情のアイコン画像があるので、とても便利です。

※「いらすとや」さんの画像を利用する際は、いらすとや利用規約に準ずる形でご利用ください。

今回は例として、「いらすとや」さんの人物画像を使用し、吹き出しを作成してみます。

 

自作吹き出しの設定方法

それでは、自作吹き出しの設定手順です。

▼手順

[Cocoon設定]>[吹き出し]をクリック。

[Cocoon設定]>[吹き出し]
[Cocoon設定]>[吹き出し]

一番上の[新規追加]をクリック。

[新規追加]をクリック
[新規追加]をクリック

設定項目が7つ表示されます。

設定項目
設定項目
7つの設定項目
  1. タイトル
  2. 名前
  3. アイコン画像
  4. 吹き出しスタイル
  5. 人物位置
  6. アイコンスタイル
  7. TinyMCE

1つずつ設定方法をご紹介します。

  • 1.タイトル
タイトル
タイトル

タイトルは、投稿画面のドロップダウンリストに表示される名称です。

投稿画面のドロップダウンリスト
投稿画面のドロップダウンリスト

分かりやすいキーワードを入れておきます。

 

  • 2.名前
名前
名前

吹き出しの下に表示される名前です。

悩む女性
悩む女性

アイコンの下に「悩む女性」と表示されます。

 

未入力の場合は、何も表示されません。

未入力の場合は、表示されない
未入力の場合は、表示されない

名前は、投稿画面でも編集(変更)が可能です。(ブロックエディタを使用の場合

 

文字数について:

推奨は5文字以内です。スマホ:6文字以上、PC:7文字以上になると2行で表示されます。

東国原英夫さん
東国原英夫さん

名前が5文字以上になると、2行で表示されます。

 

  • 3.アイコン画像
[選択]をクリックして、準備した画像を選びます。

[選択]をクリック
[選択]をクリック

画像サイズ160px~200pxくらいの正方形が推奨されています。

 

  • 4.吹き出しスタイル
吹き出しスタイル
吹き出しスタイル

吹き出しスタイルは次の4種類から選びます。

  • デフォルト
  • フラット
  • LINE風
  • 考え事

デフォルト

フラット

LINE風

考え事

投稿画面でも変更は可能です。

 

  • 5.人物位置
人物位置
人物位置

吹き出しアイコンの位置を「左」か「右」で指定します。

左です

右です

投稿画面でも変更は可能です。

投稿画面でも変更は可能
投稿画面でも変更は可能

 

  • 6.アイコンスタイル
アイコンスタイル
アイコンスタイル

アイコンスタイルは、次の4種類から選びます。

アイコンの周りの形と線のあり・なしを選択します。

  • 四角(枠線なし)
  • 四角(枠線あり)
  • 丸(枠線なし)
  • 丸(枠線あり)

四角(枠線なし)

四角(枠線あり)

丸(枠線なし)

丸(枠線あり)

デフォルトでは、「丸(枠線あり)」が選択されます。

 

  • 7.TinyMCE
TinyMCE

投稿画面のドロップダウンリストに表示させるかどうかの設定です。

ドロップダウンリストに追加
ドロップダウンリストに追加

吹き出しの数が多くなければ、チェックしておいてOK。

あまり使用しないアイコンは、チェックを外して非表示にしておきましょう。(ドロップダウンリストに載りませんが、設定を変えれば使用できます。)

すべての設定が完了したら、「保存」をクリックします。

「保存」をクリック
「保存」をクリック

できたら、新しく投稿画面を開いて確認してみましょう。

上記の登録作業中にすでに開いてある投稿画面には、設定が反映されないことがあります。

追加した吹き出しアイコンを使用したい際は、すでに開いてあった投稿画面を一度閉じて、再度開くと使用できるようになります。

 

投稿画面で吹き出しを使う手順

ここからは、実際の投稿画面で、吹き出しを使用するやり方をご紹介します。

※リンクをクリックすると、飛ばし読みできます。

上記それぞれを解説していきます。

ブロックエディタを使う場合

まずは、ブロックエディタを使用する場合です。

ブロックの追加>吹き出しをクリック

COCOONブロックの「吹き出し」をクリック
COCOONブロックの「吹き出し」をクリック

右側「ブロック」のスタイル設定「人物」リストに、吹き出し一覧が表示されます。

ここから、好きな吹き出しを選びます。

「人物」リストに、吹き出し一覧が表示される
「人物」リストに、吹き出し一覧が表示される

名前は、アイコン下をクリックすると変更が可能です。

名前は、アイコン下をクリックすると変更が可能
名前は、アイコン下をクリックすると変更が可能

吹き出しの中をクリックすると、言葉を入力することができます。

言葉を入力する
言葉を入力する

人物の位置は、「人物位置」で左右に移動が可能です。

「人物位置」で左右に移動が可能
「人物位置」で左右に移動が可能

右に移動してみました。

右に移動してみた
右に移動してみた

右側の「ブロック」で、吹き出しのスタイルを自由に変更できます。

右側のブロックで、吹き出しのスタイル変更可
右側のブロックで、吹き出しのスタイル変更可

ブロックが表示されなくなったときは・・

アイコンの下の「名前」欄をクリック
アイコンの下の「名前」欄をクリック

アイコンの下の「名前」欄をクリックしてみましょう。

右にブロックが表示されるようになります。

吹き出しの背景色、文字色、枠線の色なども変更できます。

吹き出しの背景色、文字色
吹き出しの背景色、文字色
吹き出し枠線は、ボーダー色で変更
吹き出し枠線は、ボーダー色で変更
カラフルな吹き出し
カラフルな吹き出し

クラシックエディタを使う場合

続いて、クラシックエディタを使用する場合です。

吹き出し」をクリックすると、登録済みの吹き出しが表示されます。

「吹き出し」をクリック
「吹き出し」をクリック

ここから、好きな吹き出しを選びます。

好きな吹き出しを選ぶ
好きな吹き出しを選ぶ

後は、吹き出し内の文字を変更して使用します。

クラシックエディタの注意点

・ビジュアルエディタのように、吹き出しのレイアウトの変更ができません。(色、背景色、枠線の色)

・「名前」を登録していない吹き出しに、アイコン下の「名前」を追加することができません。

まとめ

いかがでしたか?

今回は、テーマ「Cocoon」で吹き出しを使用するやり方について、ご紹介しました。

ブログを始めたての頃は、記事に何を書いていいか迷います。

しかし、吹き出しがあるだけで、ブログ記事感が出るものです。

また、記事が一気にわかりやすく・見やすくなるため、ぜひ使用することをおすすめします。

記事を書く際は、ぜひ積極的に活用してみてください。

 

それでは、また。

最後までお読みいただきありがとうございました!

おわり。

参考記事

Cocoon作成者「わいひら」さんの以下記事を参考に作成しました。

自作の吹き出しを作成して利用する方法
サイト訪問者にわかりやすく表示できる吹き出し機能の利用方法です。アイコンのセリフのように表示させることで、訪問者に分かりやすく説明できるかもしれません。

Cocoonについてのおすすめ記事

【Cocoon】モバイル(スマホ)用のグローバルナビメニューを設定する方法
【Cocoon】簡単!吹き出しの基本的な使い方
【Cocoon】グローバルメニューのカスタマイズ方法
【Cocoon】ヘッダーにグローバルメニューを表示させる方法
【Cocoon】超簡単!サイトマップの作り方(ブログ初心者向け)

コメント

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