WordPress Cocoon 吹き出し

概要

CMS「WordPress」のテーマ「Cocoon」で「吹き出し」を使ってみたいと思います。
吹き出しとは、下記のように画像のアイコンとセリフの枠があるもののセリフの部分を言います。

画像とセリフが一緒になったものが「吹き出しブロック」です。

自分の感情を表現したいときや、掛け合いするのに便利です。

以下にテンプレート化して再利用する方法を示します。

前提条件

この吹き出しのテンプレート化には、下記の条件があります。

• CMSとして「WordPress」を利用
• テーマは「Cocoon」を利用
• エディタとしてクラッシックエディタではなく、ブロックエディタを利用

吹き出しのテンプレート化

①WordPressの編集画面の左上の「投稿一覧を表示」ボタンを選ぶ。

②ダッシュボードの「Cocoon設定」の「吹き出し」を選ぶ。

③「新規追加」ボタンを押し、吹き出し用の設定の各項目を入力・選択します。

• タイトル：自分でわかるタイトル（名前）にする
• 名前：アイコン画像の下に表示される名前
• アイコン画像：160px以上の正方形画像
• 吹き出しスタイル：使いたいものを選ぶ
• 人物位置：左右のうち、いずれかを選択
• アイコンスタイル：使いたいものを選ぶ

④すべての項目の入力・選択が終わったら「保存」ボタンを押す。

⑤一覧に戻り、作成したテンプレートが表示されればOK。

吹き出しテンプレートの利用

①編集画面左上の「ブロック挿入ツールを切り替え」を選択。

②「ブロック」タブ内の「Cocoonブロック」から「吹き出し」を選択。

③吹き出しが現れます。

④右メニューの「人物」から利用したいものを選ぶ。

※「人物」の下方で「吹き出しスタイル」や「人物位置（左右）」を変更可能。