PR

【Cocoon初心者】ブログが楽しくなる!吹き出し機能の簡単な使い方

Cocoon speech bubble ブログのこと

WordPressブログを立ち上げて、テーマをCocoonにして、いよいよ記事を書く段階になったとき、一番にやりたかったのが、吹き出しを入れることでした。

えむ
えむ

きっと、あなたもそうですよね。


吹き出しがあると可愛らしさがアップしますし、記事がぐっと読みやすくなります。

でも、初めてWordPressの操作をしたとき、手順がわからず手こずりました。


例えばわたしの場合、吹き出しの位置を左から右にしたくても、どこをポチッすればいいの?
それらしい項目が見当たらないんですけど?

と、ブロックエディターの操作画面がさっぱりわからず、チンプンカンプン。
設定ボタンに気付き、操作が出来るようになるまで相当な時間がかかりました。

初めて投稿編集画面を開いた時、真っ白の画面に面食らっている。


えむ
えむ

でも、やり方がわかればとても簡単ですよ。

それではご一緒に、Cocoonの吹き出し設定をしていきましょう♪

手順1:Cocoon設定の【吹き出し】で編集する

まずはじめに、ダッシュボードの【Cocoon設定】から【吹き出し】を選択します。

Cocoon設定→吹き出しをクリック


吹き出し一覧が出てきます。

吹き出し一覧


お好みで、すでに出来上がっている吹き出しを利用してもいいです。

吹き出しの新規追加をする

ここでは、「えむ」の吹き出しを新しく作ってみます。

【新規追加】をクリックします。

新規追加をクリック


入力項目

「タイトル」「名前」「アイコン画像」の入力をします。

入力項目
①タイトル
②名前
③アイコン画像→選択をクリック
  1. 【タイトル】
    管理画面で自分がわかるようにタイトルを付けます。
  2. 【名前】
    アイコン下に表示される名前を入力します。
    無くてもいいです。
  3. 【アイコン画像】
    「選択」をクリックして、使いたい画像をクリックします。
    ※あらかじめ、使いたい画像はアップロードしておきます。

画像を選んでクリック



画面右側のブロック内、「画像の選択」をクリックします。

画像の選択をクリック



入力項目の画面に戻りますので、【保存】をクリックします。

保存をクリック



吹き出しが新規作成されました。

【一覧ページへ】をクリックします。

一覧ページへをクリック



作った吹き出しが表示されました。

吹き出し一覧に作成した吹き出しが表示される


えむ
えむ

お疲れさまでした!


【おまけ】試しに作った吹き出しが楕円形に!

正方形のアイコン用の画像ではなく、アイキャッチ用の画像をクリックしてみたら、楕円形になりました。

おもしろい発見です。

なにかで使う機会があればいいな。



手順2:記事内で吹き出しを使う

それではいよいよ、投稿編集画面で吹き出しを表示させましょう。


右上の「設定ボタン」をクリックします。

超初心者のわたしは、この「設定ボタン」の存在に気付かなかったので、真っ白な編集画面を前にして放心状態だったのでした。




吹き出しを表示させる

  1. ブロックを追加する+マークをクリックします。
  2. 「吹き出し」をクリックします。
ブロックを追加→吹き出しをクリック


※吹き出しが見当たらない場合は、「すべてを表示」をクリックし、下へスクロールすると吹き出しが出てきます。


見本の吹き出しが出ました。

見本の吹き出し


カーソルを吹き出しのところに持っていってクリックし、吹き出しを囲む枠を表示させると、ブロックで吹き出しの編集が出来るようになります。




新規作成した吹き出しにする

それでは、新規作成した「えむ」の吹き出しにします。


右側にある「ブロック」で設定していきます。

スタイル設定

人物

「スタイル設定」の「人物」に、作成していた吹き出しがありますのでクリックします。



えむの吹き出しになりました。



文字をいれます。

えむ
えむ

こんにちは!



吹き出しのスタイル

吹き出しのスタイルを「フラット」にしてみます。


えむ
えむ

こんにちは!



人物位置

人物位置を「右」にします。


えむ
えむ

ようやく右になった!



アイコンスタイル

アイコンスタイルを「四角」にしてみます。

えむ
えむ

楽しい!



吹き出し色設定

「背景色」「文字色」「ボーダー色」の設定ができます。

吹き出し色設定


えむ
えむ

あなたのブログのイメージに合わせて、色を設定してみてね。



まとめ:Cocoonの吹き出し設定は簡単で可愛らしくできます

今回はCocoonの吹き出し機能について、簡単にできる設定方法を解説しました。

手順はつぎのとおりです。

  • 【Cocoon設定】→【吹き出し】で、吹き出しの新規追加をする。
  • 記事内で吹き出しを表示させる。
  • スタイル設定をする。



Cocoon吹き出し機能により、記事が読みやすくなり、親しみやすい雰囲気になります。

ぜひあなたも可愛いアイコンにして、ブログ記事作成を楽しみましょう♪

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