コクーンでアイコン付き「吹き出し」を利用する方法を紹介!

コクーンでアイコン付き「吹き出し」を利用する方法を紹介! コクーン

今回は、コクーン(Cocoon)で記事中に「アイコン付きの吹き出し」を挿入する方法を紹介します。

吹き出しとは、このような会話風に表示されるアイコン付きのパーツです。
コクーンの吹き出し

吹き出しをポイントポイントで使用することで、記事にメリハリがついて見やすくなります。
また、複数の吹き出しを並べて使用することで「会話風」に解説することもでき、読みやすい記事にもなります。

コクーンを使ってブログを運営されている方は、ぜひ参考にしてください。

コクーンで吹き出しの設定を行う方法

まず、ワードプレスの管理画面を開き、「Cocoon設定」→「吹き出し」と画面を移動します。

吹き出しの一覧画面が開くので、画面上部にある「新規追加」のメニューをクリックしてください。
吹き出しの一覧

このような、吹き出しの新規作成画面が開くので、上から順番に各項目を設定していきましょう。
吹き出しの設定画面

項目名 内容
タイトル 吹き出しのタイトル
名前 アイコンの名前
6文字以下を推奨
アイコン画像 アイコンとして使用する画像
吹き出しスタイル 吹き出しの表示デザイン
「デフォルト」「フラット」「LINE風」「考え事」から選択
人物位置 アイコンの表示位置
「左」「右」から選択
アイコンスタイル アンコンの表示デザイン。「四角(枠線なし)」「四角(枠線あり)」「丸(枠線なし)」「丸(枠線あり)」
TinyMCE 記事の投稿画面で、吹き出しの選択一覧の中に含めるかどうか。
特に理由がなければチェックを入れたままでOK。

このように上から順番に設定して、最後に「保存」をクリックして、設定を保存します。
吹き出しの設定画面

吹き出しの設定画面

これで、吹き出しの新規作成が完了し、記事投稿画面から挿入可能になります。
吹き出し一覧の画面に戻ると新規作成した吹き出しが追加されていればOKです。
作成した吹き出しの確認

ちなみに、既存の吹き出しに関しては、不要であれば「削除」を行ってしまっても問題ないです。
もしくは、「編集」のメニューをクリックし、内容を編集して使用してもOKです。
既存の吹き出しを編集

編集画面を開くと、このように各項目を変更できる仕様になっています。
既存の吹き出しを編集

それでは、次の段落ではアイコン付きの吹き出しを記事に挿入する方法を紹介します。

コクーンで吹き出しを記事に挿入する方法

コクーンで、記事内にアイコン付きの吹き出しを挿入する方法を説明します。
今回は、ブロックエディタとクラシックエディタで分けて説明していきます。

ブロックエディタを使用している場合

まずは、ブロックエディタを利用している場合に、アイコン付きの吹き出しを挿入する方法を紹介します。

「+」をクリックしてブロックメニューを開いてください。
ブロックメニュー

「吹き出し」と検索して、そのまま吹き出しを挿入します。
吹き出しを選択

このように、アイコン付きの吹き出しが挿入されました。
吹き出しを挿入

画面右側に吹き出しに関する設定項目があります。
吹き出しの設定

「人物」という項目があるので、そこで、上記で作成した吹き出しを選択してみてください。
人物の選択

このように、吹き出しが変更されます。
人物の選択

次は、吹き出しの右側のブロックに、アイコンのコメントを入力しましょう。
コメントの入力

これで、アイコン付きの吹き出しの設定が完了です。

記事を公開すると、このように表示されているはずです。
吹き出しの表示を確認

クラシックエディタを使用している場合

次は、クラシックエディタを利用している方向けに、アイコン付きの吹き出しを挿入する方法を紹介します。

エディタ上に「吹き出し」というセレクトボックスがあるので、クリックしてください。
吹き出しを選択

選択項目が出てくるので、使用したい吹き出しを選択して挿入します。
吹き出しの設定

このようにエディタ内に吹き出しが挿入されます。
吹き出しを挿入

ここでコメントを入力すると、アイコン付きの吹き出しが完成します。
吹き出しの設定

実際に記事を公開すると、このようにユーザーへの公開サイトに表示されます。
吹き出しの表示を確認

これで、アイコン付きの吹き出しの設定が完了です。

最後に

今回は、ワードプレスの人気テーマ「コクーン(Cocoon)」で、記事内にアイコン付きの吹き出しを挿入する方法を紹介しました。

アイコン付きの吹き出しを重要なポイントで使用することで、読者に大切な内容が伝わりやすくなります。
また、会話風に吹き出しを繰り返すことで、記事が非常に見やすくなります。

コクーンを使用している方は、ぜひアイコン付き吹き出しも積極的に使用していきましょう。

コメント

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