こんな悩みを解決していきます。
結論から言うと、
・Cocoon設定⇨吹き出しから設定
・テキストエディタで画像URLを書き換え
の2つの方法で設定するのが簡単です。
Cocoonならプラグインを使ったり、CSSをカスタマイズしなくてもオリジナルの吹き出しを作成できます。
・Cocoon吹き出しカスタマイズでできること
・Cocoon設定でのオリジナル吹き出し設定方法
・テキストエディタでのオリジナル吹き出し設定方法
Cocoon吹き出しカスタマイズでできること
吹き出しを設定すると
ここから
このように変えることができます。
吹き出しを使うことで、文章内に会話風のやりとりを入れることができるので、文章にリズムが出て読みやすくなります。
また、本記事の一番初めのように、読者の疑問を吹き出しで表現することで、記事の中で解決する悩みを読者に理解させるといった効果も期待できます。
Cocoon設定から設定する方法
それでは、実際に画像付きで吹き出しの設定方法を解説したいと思います。
まずは、Cocoon設定から吹き出しを設定していきます。
以下の手順で設定することができます。
②「新規追加」をクリック
③情報を入力
④保存
それでは、詳しく解説していきます。
①画面左からCocoon設定⇨吹き出しをクリック
画面左側からCocoon設定⇨吹き出しを選んでください。
②新規追加をクリック
下のような画面になるので、「新規追加」をクリックします。
もし、すでにあるサンプルのうち使わないものがある場合は「編集」をクリックして、サンプルに上書き保存してもOKです。
③情報を入力
必要な情報を入力します。設定するのは
・タイトル：管理画面や投稿画面で利用する名前(記事に表示されません)
・名前：アイコンの下に表示される名前
・吹き出しのスタイル：デフォルト、フラット、LINE風、考えごとから選択可
・人物位置：左右を選択可
・アイコンスタイル：四角(枠線あり or なし)、丸(枠線あり or なし)の4種類から選択可
・TinyMCE：エディターのリストに表示するか選択可。チェックを入れることがほとんどです。
今回は以下のように設定しました。
画像は円形になっていますが、円形の吹き出しは画像は円形の画像で設定しても大丈夫です。
④保存
保存をクリックします。
投稿画面で確認してみます。
投稿画面で、吹き出しのリストをドロップダウンすると設定した吹き出しのタイトルが表示されます。
選択すると以下のようにテキストに表示されます。
以上で、設定は完了です。
テキストエディタから吹き出しを設定する方法
続いてテキストエディタから設定する方法です。
こちらは、「1回しか使わないから、サクッと作りたい」といった場合に使ってください。
Cocoon設定のように保存しておくことできません
*プラグインを使えば保存できますが、そこまでするくらいならCocoon設定でやってしまった方が早いです。
手順は以下の通りです。
②メディアライブラリを開いて、使用予定の画像URLをコピー
③テキストエディタで画像URLを変更する
こちらも画像つきで解説していきます。
①投稿画面で吹き出しのサンプルを出す
記事投稿画面から吹き出しのリストをクリックして、サンプルを出してください。
*変えられるのはアイコン画像だけなので、吹き出しの形やアイコンの枠の形はサンプルのままになります。
②メディアライブラリを開いて、使用予定の画像URLをコピー
タイトル下の「メディアを追加」からライブラリを開いて、画像URLをコピーします。
③テキストエディタで画像URLを変更する
次に、テキストエディタを開いて、サンプル画像のURLを使用する画像のURLに書き換えます。
書き換えたら、ビジュアルエディタで変更が反映されていることを確認してください。
以上で設定は完了です。
Cocoon吹き出しカスタマイズまとめ
ここまで、Cocoonの吹き出しカスタマイズの方法として
②テキストエディタから設定
の2つの方法をご紹介しました。
CocoonはCSSを使わなくても、簡易的なものはCocoon設定から作成できます。
吹き出しを設定しておけば、自由に使うことができるのでとても便利ですね。
たまにしか使わない吹き出しであれば、テキストエディタからでも設定できます。
ぜひ吹き出しを取り入れて、見やすい記事にしてみてください。