MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

「吹き出し」ブロックの使い方|ブロックエディタ Cocoon編

これが吹き出しだよ!

吹き出しは、いまや文章の装飾に必須の要素と言えます。

なるべく読者を飽きさせずに、最後まで記事を読んでもらえるように、装飾的な要素をところどころに配置する必要があります。

吹き出しも非常に良く使われる要素の一つです。漫画のような見た目で、読者が気軽に読み進めてもらえるようにすることを目的としています。ただし、あまり使いすぎると逆に読みにくくなってしまいますので、要所要所で効果的に配置するようにしましょう。

画像に枠も付けられるよ!

目次

Cocoonで独自の吹き出しを設定する

吹き出しサンプル

Cocoonには画像付きの吹き出しも用意されていますが、オリジナル画像で吹き出しを作成することもできます。

オリジナル画像の吹き出しの作り方は以下のとおりです。

STEP

WordPressの管理画面で、Cocoon設定 > 吹き出し を選択します。

Cocoon設定の吹き出し
STEP

「吹き出し」画面が表示されたら、新規追加 をクリックします。

新規追加

STEP

吹き出し用の設定画面が表示されたら、「タイトル」を入力します。

次に「アイコン画像」で 選択 をクリックして画像を選択します。

吹き出しの新規追加画面

STEP

アイコンのスタイル」(丸、四角、枠あり、枠なし)を設定できます。

その他、「人物位置」(左、右)なども選択できます。

吹き出しの設定
STEP

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

吹き出しが追加された
注意事項

Cocoon初期設定の吹き出し画像が表示されていない場合は、「アイコン画像」のリンクを修正する必要があります。赤字の部分を修正します。

リンク修正画面

https://〇〇.com/wp-content/themes/cocoon/images/△△.png

            

https://〇〇.com/wp-content/themes/cocoon-master/images/△△.png

Cocoonで吹き出しを挿入する

吹き出しを挿入する

作成したオリジナル画像の吹き出しを呼び出してみましょう。

STEP

ブロックエディタ上で + を押し、すべて表示 をクリックします。

STEP

Cocoonブロック内の 吹き出し をクリックします。

吹き出しの挿入
STEP

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

右上の歯車マークを押すと、右メニューが開きます。

吹き出しの設定
STEP

人物」のドロップボックスから、作成したキャラクターを選択します。

チロ犬を選択
STEP

作成したキャラクターの吹き出しが表示されました。

吹き出しを装飾する

STEP

人物位置」のドロップボックスで、左右の位置を選択できます。

STEP

キャラクターの位置を移動しました。

色の設定で、吹き出しの背景色文字色枠の色を変更できます。

注意事項

子ブロックを選択していると、ふきだしブロック全体の装飾ができません

ふきだしの枠や位置を変更するには、必ず親ブロックを選択します。

続けてブロックエディタを学んでね!

次の記事では、テーブル(表)作成について解説します。プラグインを使った方法も解説します。

次は「記事の書き方 5

よかったらシェアしてね!
目次
閉じる