WordPress

WordPressテーマ「Cocoon」解説 『吹き出し』ブロックの使い方

WordPress Cocoon 「吹き出し」の使い方

今回はWordPressテーマ「Cocoon(コクーン)」の『吹き出し』ブロックの使い方を説明したいと思います。

当ブログ「IT用語集」おなじみの二人が解説してくれます。

ちゃば
ちゃば

『吹き出し』ブロックについてやけど、俺たちが説明することになったで。

どっから説明すればいいんやろか?

かみさん
かみさん

1から10まで全部説明して欲しいって頼まれたけど。

結構長くなるかもよ。

ちゃば
ちゃば

そうか。じゃあたのんます。

かみさん
かみさん

結局・・・私ね。

いいわよ、説明するの嫌いじゃないから。

Cocoonの『吹き出し』の設定

かみさん
かみさん

じゃあ、まずWordPress管理画面の「Cocoon設定」「吹き出し」をクリックしてください。

ちゃば
ちゃば

「吹き出し一覧」ページに移動やな。

吹き出し一覧ページ
かみさん
かみさん

一覧ページではCocoonデフォルトのアイコンたちを確認することができます。

ちゃば
ちゃば

いろんな種類のアイコンがあって、どれを使うか迷うよな。

かみさん
かみさん

Cocoonデフォルトのアイコンは魅力的よね~。

表情も豊かだし。

ちゃば
ちゃば

でも俺たちみたいなオリジナルのアイコンも欲しいところやな。

かみさん
かみさん

そうね、オリジナルのアイコンもあったほうが、そのブログの独自性も出てバラエティに富んだ内容になるわね。オリジナルアイコンの作り方は後で説明するわ。

じゃあ、吹き出し一覧の「新規追加」をクリックしてください。

吹き出し新規追加
ちゃば
ちゃば

新規吹き出しの設定項目ページに移動や。

吹き出し設定ページ
かみさん
かみさん

ここでは下記の設定項目があります。

  • タイトル
  • 名前
  • アイコン画像
  • 吹き出しスタイル
  • 人物位置
  • アイコンスタイル
  • TinyMCE

一つ一つ説明していきたいと思います。

タイトル

吹き出しタイトル入力
ちゃば
ちゃば

ここで入力したタイトルは、投稿画面で「吹き出し」ブロックを選択すると右サイドバー「人物」の項目のところに表示されるんやで。

右サイドバー人物設定
かみさん
かみさん

自分が設定した吹き出しをすぐに見つけることが出来るようにタイトルをつけてくださいね。例えば、最初に数字を付けるとその順番に並びます

名前

吹き出し名前設定
かみさん
かみさん

吹き出しアイコンの名前を設定できます。

6文字以下が推奨されています。

吹き出しキャラクターの名前
かみさん
かみさん

アイコンの下に名前が表示されます。

空欄の場合は何も表示されませんので、不要な場合は空欄で結構です。

アイコン画像

アイコン画像選択欄
かみさん
かみさん

アイコン画像はこちらから呼び出します。

サイズは160px以上の正方形を推奨されています。

ちゃば
ちゃば

アイコンはどうやって用意するんや?

かみさん
かみさん

そうね、大きく分けて3つの方法があるわ。

1. 作成を依頼する

2. フリー画像をダウンロードする

3. 自分で作る

ちゃば
ちゃば

1.の「作成を依頼する」というのはどこに依頼するんや?

かみさん
かみさん

そうね、作成を依頼できるおすすめのサイトを紹介するわね。

ココナラ

SKIMA

TANOMUNO

上記のサイトなら2000円位から依頼できます。

ちゃば
ちゃば

じゃあ2.の「フリー画像をダウンロードする」は?

かみさん
かみさん

そうね、無料かつ商用利用も可能で、さらにハイクオリティーなアイコン素材がダウンロードできるサイトを紹介するわ。

いらすとや(←Cocoonデフォルトアイコンの作成元)

FLAT ICON DESIGN

フリーアイコンズ

フリー素材を使う際の注意点としては各サイトの利用規約を十分に確認してくださいね。

ちゃば
ちゃば

じゃあ最後は3.「自分で作る」やな

かみさん
かみさん

そうね、自分で作るなら下記のサイトを紹介するわ。

Canva

FireAlpaca

どちらもとても有名だけど、Canvaブラウザ上で作成が可能で、FireAlpacaはツールをダウンロードして使うのよ。どちらも無料で使えるわよ。

ちゃば
ちゃば

ちなみにこのアイコンは「かみさん」のも含めて俺が「FireAlpacaで作ったんやで

デザインは我が娘にしてもらったけどな。

かみさん
かみさん

あなたは絵を描いたりするのは上手よね。

ちゃば
ちゃば

まあね。

よし、自分で作る方法はまた別記事にまとめているから、参考にしてくれな。

FireAlpacaの使い方は別記事で詳しく説明します。

吹き出しスタイル

吹き出しスタイル設定画像
ちゃば
ちゃば

Cocoonでは吹き出しスタイルを4つから選択できるんや。

かみさん
かみさん

まずこれがデフォルトね。

色は右サイドバーで選べるわよ。

ちゃば
ちゃば

で、次にこれがフラット

かみさん
かみさん

これはLINE風ね。😁😊😆

ちゃば
ちゃば

最後に考え事

かみさん
かみさん

最初の設定で決定しても、各記事の右サイドバーでその都度個別に変更できるわ。

いろいろ試してみてね。

人物位置

吹き出し 人物位置設定画像
ちゃば
ちゃば

人物位置の設定は、アイコンの『左』『右』を選択できる。

今は『左』の場合。

ちゃば
ちゃば

こっちは『右』の場合や。

かみさん
かみさん

まあ”私”も”ちゃば”も正面を向いているからおかしくはないけど、アイコンが横向きの場合は『左』『右』には気をつけてくださいね。

私たちのアイコンももっとバリエーションを増やしたいわね。

アイコンスタイル

吹き出し アイコンスタイル設定
かみさん
かみさん

Cocoonの吹き出しのアイコンスタイルは、4種類のアイコン形状を選択できます。

吹き出し 4つのアイコン形状
ちゃば
ちゃば

お好みでどうぞ。

TinyMCE

吹き出し TinyMCE設定画像
かみさん
かみさん

ここはクラッシックエディタを使用する場合の設定なので、ブロックエディタを使う場合は必要ありません。とりあえずデフォルトのチェック入りのままで良いと思います。

Cocoonの『吹き出し』ブロックの使い方

ちゃば
ちゃば

ようやく設定が終わったな。

かみさん
かみさん

そうね、では投稿画面での使い方を説明していきます

とっても簡単ですよ。

まず『吹き出し』ブロックを選択して下さい。

投稿画面での吹き出しブロック説明1
かみさん
かみさん

Cocoon設定で設定した吹き出しアイコンの一番上の吹き出しが現れます。

右サイドバー「人物」の変更、そのほかの設定(吹き出しスタイル人物位置アイコンスタイル)も変更が可能です。

投稿画面での吹き出しブロック説明2
かみさん
かみさん

吹き出しの各色設定(吹き出し内の背景色、文字色、枠線色)も右サイドバーで変更できますので、色々試してみてください。

投稿画面での吹き出しブロック説明3
ちゃば
ちゃば

ちょっと気を付けてほしいのが、吹き出しブロック全体を選択しないと右サイドバーの設定は出てこないので注意な。

投稿画面での吹き出しブロック説明4
ちゃば
ちゃば

吹き出しの中を選択すると「段落」ブロックになり文章を書くモードになる。

投稿画面での吹き出しブロック説明5
かみさん
かみさん

あと吹き出し内でも文章を書くだけではなく、リスト作成画像の貼り付けなど、ブロックエディタが使えるから試してみてね。

  • リスト1
  • リスト2
  • リスト3
ちゃば
ちゃば

「吹き出し」の中にも「吹き出し」が作れるで。

ちゃばのすけ
ちゃばのすけ

あとアイコンをクリックするとアイコン画像もここで変更することができる。

名前も変更できる。ほら。

ただし保存は吹き出し設定で行わないと、登録されないので注意な。

かみさん
かみさん

大体こんなところですが、色々と試してください。

まとめ

かみさん
かみさん

これで『吹き出し』についての説明は以上です。

ちゃば
ちゃば

しかし『吹き出し』って良い機能よな。

どんどん使っていってほしいね。

かみさん
かみさん

そうね、うちのブログは『吹き出し』オンリーのページもあったりするから、かなり多用しているほうよね。

ちゃば
ちゃば

じゃないと俺たちも活躍の場がなくなるしな。

かみさん
かみさん

でもあまり使いすぎると逆に読みにくくなる場合もあるから気を付けてくださいね。

ちゃば
ちゃば

また新たな使い方を発見したら紹介しまっさ。

では~。

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