この記事では、無料WordPressテーマ【Cocoon】の吹き出し設定に関する解説をしていきます。
吹き出しでは、キャラクターに吹き出しをつけて会話をしているかのような演出をすることができます。
吹き出しの作成
まずはWordPressのダッシュボードから左側メニューの「Cocoon設定」にカーソルを合わせて「吹き出し」をクリックします。
すると、「吹き出し一覧」としてキャラクターが表示されます。
ここではキャラクターの画像やタイトル、スタイルなどを変更することができ、上部の「新規追加」から新しくキャラクターを追加することが可能です。
「新規追加」をクリックすると、
- タイトル
- 名前
- アイコン画像
- 吹き出しスタイル
- 人物位置
- アイコンスタイル
- TinyMCE
の７つの項目が出てきます。
「タイトル」では、吹き出しコンテンツのタイトルを決めます。
例えば、下記のようなタイトルをつけます。
ちなみに（左）というのは、左右どちらに配置するかを分かりやすくするために記載しています。
「名前」では、キャラクターの名前を設定します。
今回はこのような名前にしてみます。
「アイコン画像」では吹き出しに表示させるキャラクターの画像を設定します。
サイズは160px以上の正方形が推奨となっていますが、あまり大きくても意味がありませんので、160px～200pxくらいがちょうど良いです。大きい画像の場合は自動で縮小されます。
今回はこちらの画像を使ってみます。
「吹き出しスタイル」は吹き出しの形を決めます。
「デフォルト」
「フラット」
「LINE風」
「考え事」
の4つから選択できます。
ちなみに、使用しているスキンによっては表示が多少変わる場合があります。
今回は「デフォルト」にしてみたいと思います。
「人物位置」では、キャラクターを左側に置くか、右側に置くかの設定になります。
キャラクターの向きによって位置を決めましょう。また、キャラクターの向きを変更したい場合は、
画像を選択する際に「画像を編集」を選択すると切り抜き編集ができる画面になるので、「水平方向に反転」というボタンをクリックすると画像が反転します。
今回はデフォルトのままで「左側」に設定します。
「アイコンスタイル」ではキャラクターを囲む枠の設定になります。
- 四角（枠線なし）
- 四角（枠線あり）
- 丸（枠線なし）
- 丸（枠線あり）
の4種類から設定できます。
今回は「四角（枠線あり）」に設定します。
「TinyMCE」では、登録するキャラクターを「エディター」のメニューにあるドロップダウンリストに表示させるかどうかの設定になります。
チェックを入れると表示されて、外すと無効になります。
ちなみにブロックエディターを使っている場合、
「吹き出しスタイル」
「人物位置」
「アイコンスタイル」
の３つは実際に挿入した際にも再度設定できます。
ここまで設定したら、一番下の「保存」をクリックします。
保存すると、デモ画面で確認できるようになります。
保存できたら実際に本文に挿入してみましょう。
クラシックエディターでの表示方法
まず、クラシックエディターでの使い方を解説します。プラグインの「Classic Editor」と「Advanced Editor Tools (旧名 TinyMCE Advanced)」を有効にしていることが条件となります。
Classic Editorについて（基本的にインストールのみでOK）
Advanced Editor Tools (旧名 TinyMCE Advanced)の設定について
「投稿」から「新規作成」を選択します。
つづいて上部ツールバーの左側にある「吹き出し」をクリックします。
すると、吹き出し一覧が表示されます。
ここでは、先ほど作成したキャラクター（一番下）を選択します。
これで吹き出しの中に、お好きな文言を入力して設置完了です。
ちなみに、キャラクターをたくさん作りすぎると一覧で表示したときに、どこに何があるか分かりにくくなって探すのが大変になります。
そこで、タイトルの先頭に数字をつけることで上から順番に並ぶようになります。
表示の順番は基本的に「数字 → ローマ字 → 日本語」の順番で表示されるようになっています。
頻繁に使うキャラクターや、種類別に数字やローマ字を入力しておくと探しやすくなって便利です。
ブロックエディターでの表示方法
続いて、グーテンベルグのブロックエディターでの使い方について解説します。
投稿から「新規作成」を選択したら左上の「＋マーク」をクリックし、下の方へスクロールして「吹き出し」をクリックします。
本文に挿入したら、右側のメニューから「スタイル設定」をクリックして「人物」のプルダウンをクリックし、作成した「タイトル」をクリックします。
すると、先ほど保存したキャラクターが表示されますので選択します。
ブロックエディターでの吹き出し設定については別記事で詳しく解説しています。
