ブロックエディター “Gutenberg” 吹き出しブロックの作成方法
あいうえおかきくけこ
こんな吹き出し見たことありませんか？
cocoonの吹き出し機能で、見やすい吹き出しをつくりましょう！！
吹き出しの作成
①吹き出しの画面が表示されたら新規作成をクリックします。
ダッシュボードのCocoon設定から「吹き出し」 をクリックします。
②クリックすると入力画面になります。タイトル、アイコン画像などを入力します。
アイコンのサイズは正方形になるようにすると画像がゆがみません。
名前は任意ですが、入力するとアイコンの下に名前が表示されます。
③「ビジュアルエディターリストに表示」 にチェックをいれます。
すべての項目の設定が終了したら保存のボタンをクリックします。
”調査”の吹き出しが追加されました。
投稿記事にブロックを追加する
④ブロックの追加項目のCocoonブロックから吹き出しを選択します。
吹き出しが追加されました。
⑤右側のスタイル設定で、人物プルダウンから追加したい名前を選択します。
スタイル設定で、自分好みにカスタマイズすることができます。
スタイル設定
- 人物：プルダウンで画像を指定
- 吹き出しスタイル：デフォルト、フラット、ライン風、考えことから選択
- 人物位置 ： 右、左の選択
- アイコンスタイル ：丸（枠線あり）、 丸（枠線なし）、四角 （枠線あり）、 四角（枠線なし） から選択
吹き出し色設定
- 背景色：吹き出しの背景色を変更
- 文字色：吹き出しの文字色を変更
- ボーダー色：吹き出しの枠線の色を変更
完成！！
あいうえおかきくけこ
さいごに
吹き出しがあるのと、視覚的にもインパクトがあって読み手側も内容が入ってきやすくなります。
簡単に追加できる吹き出しを活用して、より見やすい記事をつくりましょう…！！