WordPressのいろんなサイトの記事を見ていると、
こんにちは!ぽてんです☆
こういった吹き出しをよく見かけます。吹き出しがあることによって文章のみの記事より読みやすくなり、また親しみやすさも感じやすくなりますよね。
WordPressのテーマの中でも、無料テーマCocoonではプラグインなしで、吹き出し機能を使うことができます。
当記事では、
・吹き出しを設定する方法
・吹き出しを記事に挿入する方法
の2つに分けて、初心者向けに分かりやすく紹介いたします。
Cocoon 吹き出しを設定する方法
毎回記事を投稿するその都度、吹き出しを一から編集するのは、同じ吹き出しのスタイルを使う方にとっては手間ですよね。
そこで、あらかじめ吹き出しの設定を行い、記事には設定しておいた吹き出しを挿入するだけ、という効率的な方法があります。
Cocoonの吹き出しの設定ができる場所は以下の通りです。
1.Cocoon設定 → 吹き出しをクリック
2.吹き出し一覧の中で、イメージに近いものを選び、上図のオレンジ枠の編集をクリックします。
元々入っているSAMPLEが必要ないときは(右側にある)編集の下の削除をクリックして整理しましょう。
▼吹き出しの設定について解説いたします。
タイトル
:今設定している吹き出しを記事内で使いたい時に、検索で出てくる名前です。
お好みでわかりやすい名前を付けましょう。(このタイトルは記事を閲覧するユーザーには表示されませんのでご安心ください!)
名前
:吹き出しの画像アイコンの下に表示される名前の部分です。
(こちらは記事を見るユーザーにも公開されます。)
吹き出しスタイル、人物位置(左・右)、アイコンスタイルはお好みで選択されてください。
TinyMCEの「エディターのリストに表示」は、チェックを入れたままでOKです。
3.設定が終わりましたら、保存を押します。
以上で吹き出しの設定は完了です!
Cocoon 吹き出しを記事に挿入する方法
ワードプレスの投稿画面より、まず、ブロックを追加の「⊕」をクリックします。
Cocoonブロック内の吹き出しをクリックすると、吹き出しが挿入されます。
丸アイコン内のイラストをクリックすると、画像を簡単に変更でき、
右側サイドバーのスタイル設定で、吹き出しのスタイルや、人物位置(左・右)、丸や四角などのアイコンスタイル、背景色、文字色を自由に変更することができます。
Cocoon設定で作っておいた吹き出しは投稿画面のどこから挿入できる?
(右側にある)スタイル設定 > 人物 より、
プルダウンで下へスクロールすると、
先ほど設定した吹き出しのタイトル名がでてきますのでクリックしたらすぐに挿入できます。
吹き出しの色を変えたいけど、設定がでてこなくなった!
WordPressの投稿画面に吹き出しを挿入した後、色を変えたいと思ったら、右側に吹き出しの設定がでてこない、どこにいった?となった場合は、
(上画像の赤矢印)アイコンの左上にある吹き出しのアイコンをクリックすると、投稿画面の右側に吹き出しの設定がでてきますので、こちらから設定を行いましょう!
お疲れ様でした☆