ワードプレステーマ Cocoonには、吹き出し機能があります。CSSの追加をせずとも簡単に吹き出しが作れ、会話調の記事をスラスラと書くことができます。
お好みの吹き出しスタイルや画像を設定する操作方法は、ワードプレス初心者にも、HTML・CSSに不慣れでもカンタン!です。
この記事では、Cocoonの吹き出し機能を紹介していきます。
ワードプレス Cocoon 吹き出しの使い方
ワードプレスCocoonの「吹き出し」の設定・操作方法・使い方はとてもカンタン!です。
![AREN](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2019/01/784160-1.png?w=1231&ssl=1)
ワードプレス テーマCocoonをまだお使いでない方は、先にCocoonとCocoon childをインストールして子テーマを有効化してみてくださいね。
![ままん](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2019/01/780374.png?w=1231&ssl=1)
ワードプレス 無料テーマCocoonとCocoon childをインストールしてCocoon childを有効化すると、ダッシュボードに『Cocoon 設定』が現れます。
プラグインなしで吹き出し コクーンの吹き出しテンプレート
画像の画像はワードプレスCocoon ダッシュボードの中にある「Cocoon設定」中にある吹き出し一覧の一部。
![ままん](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2019/01/780374.png?w=1231&ssl=1)
こちらは私 ままん(@takamaman52)が設定してみた「吹き出し一覧」画面のスクリーンショットです。
- タイトル
タイトルには、自分が分かりやすい題名を入力しておく - 名前
実際にアイコン画像の下に表示される名前(文字)です。 - アイコン画像
あらかじめ用意した160px以上の正方形画像を「投稿画面>メディアを追加」からアップロード。 - 吹き出しスタイル
吹き出しスタイルは「デフォルト」「フラット」「LINE風」「考え事」の4種類が用意されています。 - 人物位置
アイコンを表示するポジションで、「左」「右」を選べます。 - アイコンスタイル
用意されたアイコンの形と枠線が4種類あります。
「丸(枠線あり)」「丸(枠線なし)」「四角(枠線あり)」「四角(枠線なし)」
![ゆうちゃん](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2019/02/2a2a1c51b8101570e150f0819ae7d24d.jpg?w=1231&ssl=1)
こちらの吹き出し設定は、
4.吹き出しスタイル「考え事」
5.人物位置「左」
6.アイコンスタイル「丸(枠線あり)
新規に独自の吹き出しを追加する
ダッシュボードからCocoon設定の「吹き出し>新規追加」を開いた画面はこのようになっています。1から6までの項目にそれぞれ入力していくだけでオリジナルの「吹き出しスタイル」が出来上がります。
![ままん](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2019/01/780374.png?w=1231&ssl=1)
プラグインもCSSの追加も必要ないことが嬉しいですね。
作った吹き出しを使い投稿するやり方
ワードプレス Cocoonの投稿画面をビジュアルで開くと、吹き出しのテンプレートがあります。新規で独自に作った「吹き出しタイトル」もこちらに表示されるので、使いたい「吹き出しタイトル」を選択します。
![AREN](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2019/01/784160-1.png?w=1231&ssl=1)
内容を入力してください。
![ままん](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2019/01/780374.png?w=1231&ssl=1)
内容を入力してください。
するとこのように文字入力前の「吹き出し」が表示されるので「内容を入力してください」という部分を文章に置き換えれば、会話調の出来上がりとなります。
Cocoonをおすすめする理由
ワードプレス テーマCocoonの素晴らしい点は、何と言ってもユーザビリティ。
吹き出しも操作がカンタンで、ワードプレス初心者でもすぐに使え、新規追加も削除もできます。
![ムスメ AREN](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2019/01/784160-1.png?w=1231&ssl=1)
難しいCSSの追加をしなくても、ビジュアル投稿画面の吹き出しテンプレートから操作できるのね!
![ままん](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2019/01/780374.png?w=1231&ssl=1)
吹き出しのテンプレートを作ったのはCocoon『わいひらさん』です。
わいひらさんがCocoonを無料で公開しています。
サポートフォーラムも充実しています。解説が日本語なことが何より安心です。
ワードプレスを利用するにはレンタルサーバーが必要
まずレンタルサーバーを借りて、ドメインを取得します。
わたしはエックスサーバー
を借りました。
エックスサーバー
にはワードプレス簡単インストールという機能が付いているので、ワードプレスのブログを始めやすいと思います。
解説はこちらに記してありますので覗いてみてくださいね。