ワードプレスのプラグインなしで吹き出しが作れるテーマCocoon

WordPress
当ページのリンクには広告が含まれています。

ワードプレステーマ Cocoonには、吹き出し機能があります。CSSの追加をせずとも簡単に吹き出しが作れ、会話調の記事をスラスラと書くことができます。

お好みの吹き出しスタイルや画像を設定する操作方法は、ワードプレス初心者にも、HTML・CSSに不慣れでもカンタン!です。

この記事では、Cocoonの吹き出し機能を紹介していきます。

ワードプレス Cocoon 吹き出しの使い方

ワードプレスCocoonの「吹き出し」の設定・操作方法・使い方はとてもカンタン!です。

AREN
AREN

ワードプレス テーマCocoonをまだお使いでない方は、先にCocoonとCocoon childをインストールして子テーマを有効化してみてくださいね。

 

ままん
ままん

ワードプレス 無料テーマCocoonとCocoon childをインストールしてCocoon childを有効化すると、ダッシュボードに『Cocoon 設定』が現れます。

コクーンの吹き出し機能の設定手順

プラグインなしで吹き出し コクーンの吹き出しテンプレート

画像の画像はワードプレスCocoon ダッシュボードの中にある「Cocoon設定」中にある吹き出し一覧の一部。

ままん
ままん

こちらは私 ままん(@takamaman52)が設定してみた「吹き出し一覧」画面のスクリーンショットです。

コクーンで作った吹き出しの一覧ページです。

  1. タイトル
    タイトルには、自分が分かりやすい題名を入力しておく
  2. 名前
    実際にアイコン画像の下に表示される名前(文字)です。
  3. アイコン画像
    あらかじめ用意した160px以上の正方形画像を「投稿画面>メディアを追加」からアップロード。
  4. 吹き出しスタイル
    吹き出しスタイルは「デフォルト」「フラット」「LINE風」「考え事」の4種類が用意されています。
  5. 人物位置
    アイコンを表示するポジションで、「左」「右」を選べます。
  6. アイコンスタイル
    用意されたアイコンの形と枠線が4種類あります。
    「丸(枠線あり)」「丸(枠線なし)」「四角(枠線あり)」「四角(枠線なし)」

ワードプレスCocoonの吹き出し設定

ゆうちゃん
ゆうちゃん

こちらの吹き出し設定は、
4.吹き出しスタイル「考え事」
5.人物位置「左」
6.アイコンスタイル「丸(枠線あり)

新規に独自の吹き出しを追加する

Cocoonで新しくオリジナルの吹き出しを作る

ダッシュボードからCocoon設定の「吹き出し>新規追加」を開いた画面はこのようになっています。1から6までの項目にそれぞれ入力していくだけでオリジナルの「吹き出しスタイル」が出来上がります。

ままん
ままん

プラグインもCSSの追加も必要ないことが嬉しいですね。

作った吹き出しを使い投稿するやり方

作った吹き出しを使って投稿する

 

ワードプレス Cocoonの投稿画面をビジュアルで開くと、吹き出しのテンプレートがあります。新規で独自に作った「吹き出しタイトル」もこちらに表示されるので、使いたい「吹き出しタイトル」を選択します。

AREN
AREN

内容を入力してください。

ままん
ままん

内容を入力してください。

するとこのように文字入力前の「吹き出し」が表示されるので「内容を入力してください」という部分を文章に置き換えれば、会話調の出来上がりとなります。

Cocoonをおすすめする理由

ワードプレス テーマCocoonの素晴らしい点は、何と言ってもユーザビリティ。

吹き出しも操作がカンタンで、ワードプレス初心者でもすぐに使え、新規追加も削除もできます。

ムスメ AREN
ムスメ AREN

難しいCSSの追加をしなくても、ビジュアル投稿画面の吹き出しテンプレートから操作できるのね!

ままん
ままん

吹き出しのテンプレートを作ったのはCocoon『わいひらさん』です。

わいひらさんがCocoonを無料で公開しています。

サポートフォーラムも充実しています。解説が日本語なことが何より安心です。

ワードプレスを利用するにはレンタルサーバーが必要

まずレンタルサーバーを借りて、ドメインを取得します。

わたしはエックスサーバー を借りました。

エックスサーバー にはワードプレス簡単インストールという機能が付いているので、ワードプレスのブログを始めやすいと思います。

解説はこちらに記してありますので覗いてみてくださいね。

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