Cocoonでブログ記事に簡単に吹き出しを追加して、読みやすい記事を書こう!

ブログ運営

ブログを読んでいると、よく吹き出しが使われています。

吹き出しを追加すると、記事がぐっと読みやすくなるね!

今回は、Cocoonで吹き出しを使えるようにする設定の仕方と、吹き出しの効果についてお話します。

スポンサーリンク

吹き出しを記事で使えるようにしよう

まずは、吹き出しを記事内で使えるようにする設定の仕方を説明します。

Cocoonの設定

まずは、「Cocoon設定」から「吹き出し」メニューを開きましょう。

すると、以下のようなメニューが表示されますので、新規追加、または編集を選択します。

今回は、新規追加でやってみます。

入力項目は

  • タイトル:管理用
  • 名前:きぬたしか登場しないので今回はなし
  • アイコン画像:横150pxぐらいの画像を用意しました
  • 吹き出しスタイル:デフォルトを選択
  • 人物位置:今回は右
  • アイコンスタイル:画像自体に円を書いてしまったので、四角(枠線なし)を選びました
  • TinyMCE:ビジュアルエディターで簡単に使いたかったのでチェックをいれました

ここまでで初期設定は終了です。

CSSの編集

実際に使ってみると、吹き出しの位置がずれていたり、スマホとPCでのサイズを変更すべきだったりと、修正したい部分があったので、CSSを編集しました。

メニューの「外観」から「テーマエディター」を開いてCSSを編集します。

まず、以下をPCサイズに反映させました。

.speech-person{
width: 150px;/*画像サイズの横幅変更*/
}
.sbp-r .speech-balloon {
margin-right: 20px; /*吹き出しと画像の間の幅を変更*/
margin-top: 30px; /*吹き出しの上の隙間幅を変更*/
max-width: 70%; /*吹き出しの横幅の最大値を変更*/
}

次に、以下をスマホサイズに反映させました。

@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

}

この{ }の中に記入します。

.speech-balloon {
max-width: 65%; /*吹き出しの横幅の最大値を変更*/
}

数値は自分のブログのデザインによって調整してください。

記事を書く時の設定

吹き出しを使う時は「ビジュアルエディタ」を利用します。

投稿画面の右上のタブから「ビジュアルエディタ」を選択しましょう。

そして、ボタンが並んでいる中の一番右のアイコンをクリックし、メニューを表示させます。

すると、メニューが増えるので、左下の吹き出しタブから、自分が作成したタイトルの吹き出しを選択します。

これだけで、記事に吹き出しを設置できるよ!簡単すぎてCocoonさまさま。

吹き出しを使うことの効果

吹き出しを使うことで、どのような効果があるのか見ていきましょう。

記事にリズムが生まれる

長々と一定の文字の大きさや色でずらっと書かれた記事は、なかなか読みにくいものです。

ブログの記事は「見出し」や「画像」、「改行」などで記事にリズムや読者が休憩できるタイミングを作り、読みやすくしています。

吹き出しも、見出しや画像と同じような効果があります。

吹き出しを使うことで、記事にリズムを作り出し、読みやすい文章にすることができます。

堅苦しさがなくなる

ずっと説明ばかりしている記事は、少し堅苦しさがあります。

そこで文章の途中に吹き出しをいれて、口語をつかうとどうでしょう。

キャラクターが登場することで読者の肩の力も抜け、理解がしやすくなりますよね。

記事の内容を理解してもらいやすくするためにも、吹き出しは効果的です。

キャラクター(筆者)を意識させやすい

記事中にキャラクターが登場し、読者に語りかけることで、読者がそのキャラクターを意識しやすくなります。

プロフィールに書いてあるだけでは、検索流入で記事にたどり着いた人はなかなかそのキャラクターを意識しないでしょう。

キャラクターを記事に登場させることで、筆者に対して読者は興味を持ちやすくなるでしょう。

吹き出しを追加してみて

omulifeでも、この記事から吹き出しを追加してみました。

今後としては、様々な表情のアイコンを用意することを予定しています。

吹き出しを作成することで、読みやすく、理解しやすい記事にすることができます。

さらに筆者を意識してもらいやすいという利点もあるので、SNSとのつながりも強めていけるのではないかと思っています。

もっともっと「きぬたなお」を知ってもらえるよう頑張ります!

ブログを運営している方は参考にしてみてください。

この記事を書いた人
きぬたなお

在宅勤務を夢見るフツーの会社員。ブラックすぎる企業から転職して天国のような職場で働いています。多趣味すぎてあっちこっち手を出すものの、たいてい三日坊主。あと美味しいものに目がない。

きぬたなおをフォローする
ブログ運営
スポンサーリンク
omulife