せいかつブログ

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

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

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

今回は、ワードプレステーマの「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標準の吹き出しを使用する手順を先に見たい方は、こちらからどうぞ)

 

自作吹き出し

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

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

 

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

 

画像サイズが大きいと見切れてしまいます。

まずは、吹き出し枠に収まる範囲の画像を準備します。

 

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

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

 

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

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

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

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

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

 

 

自作吹き出しの設定方法

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

 

▼手順

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

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

 

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

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

 

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

7つの設定項目
7つの設定項目

これら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 設定箇所
TinyMCE 設定箇所

 

投稿画面の表示イメージです。

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

 

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

あまり使用しないアイコンは、チェックを外して非表示にしておきます。

 

1~7のすべての項目の設定が完了後、「保存」をクリックします。

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

 

保存後、新しく投稿画面を開いて確認してみましょう。

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

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

 

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

 

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

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

上記それぞれ、やり方を解説していきます。

 

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

 

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

 

▼ブロックエディタで吹き出しを使用する手順

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

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

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

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

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

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

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

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

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

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

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

右に移動してみました。

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

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

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

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

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

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

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

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

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

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

 

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

 

▼クラシックエディタで吹き出しを使用する手順

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

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

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

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

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

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

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

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

 

まとめ

 

いかがでしたか?

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

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

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

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

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

 

それでは、また。

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

おわり。

参考記事

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

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

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

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

コメント

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