吹き出しの作り方

今回はブログでよく見かける吹き出しの作り方を勉強していきます。

吹き出しがあると文字量が減ってブログが見やすくなるので一緒に吹き出しを表示させましょう!

今回は Cocoon 吹き出しで検索をかけた時に一番上にヒットした

きつねコードのIT初心者のためのブログ・WordPress運営さんのブログを参考にさせていただきました。

詳しく知りたい方はリンクからご覧になってください!ここでは簡単にまとめたものを備忘録として書き残します。

結論 +の部分をクリックしたら吹き出しがあった!

なんとデフォルトで機能が用意されていたみたいです…

投稿ページを編集する時にブロックを追加(四角形の中に+のマーク)を押しますよね、その時に

上のバーで”吹き出し”と検索するか下の全て表示していっぱいあるメニューの中から吹き出しを見つけます!

そうすると何も設定していなくてもイラストと吹き出しが出てきます!

ここに名前
ここに名前

デフォルトだとこのような感じです。

そして入力部分に文字を入れて画像をいれていくと…

どうどう
どうどう

ブログでよく見かける吹き出しの完成です!

文章だけよりも途中に吹き出しと画像がある方が見え方が違いますね!でもいちいち吹き出しを追加して画像と名前を入れていく作業はこれから多くの吹き出しを入れていく中で不便に感じると思います。

cocoonはテンプレート化して呼び出すことができます!

テンプレート化の方法は管理画面に戻ってコクーン設定(白い楕円形アイコン)の中にある吹き出しをクリックすると吹き出し一覧のページが出てきます。

どうどうばっかじゃねーか!

こんな感じで名前と画像をあらかじめ設定することができます。右側にある編集からいじれるのですが吹き出しやアイコンのスタイルのパターンが複数あり自分で好きなデザインを選ぶことができます。

テンプレートした吹き出しを持ってくる場合は+アイコンをクリックして吹き出しを追加します。

最後の未入力君
最後の未入力君

ここまでは簡単!

そして画面右側にある設定から人物を選択、用意したテンプレートを呼び出すことができます。

もし右側に設定のメニューが出ていない場合は右上の編集ボタンをクリック!

どうどう
どうどう

こっちの方が速い…!

どうどう
どうどう

どうどうしかないから独り言になっちゃう。

さっきよりも早く編集ができるようになりました。今は画像だけを差し替えた状態なので、ここから更にこだわりのあるデザインにすることができます。cocoon恐るべし…

今回のまとめ

吹き出しを入れるだけならブロックの追加(+ボタン)をクリックして”吹き出し”と検索すれば出てくるので簡単に配置することができました!

デフォルトのアイコンや名前を何回も編集するのが大変でしたが、それもテンプレート化して呼び出せば解決!

簡単だけどブログ内の文章が読みやすくなるので手間以上の価値があると思います!これからたくさん使っていくぞ!

すごい今更なんですけどテーマはCocoonを使用しています。。。

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