Cocoon吹き出しの使い方とカスタマイズ方法を解説します。
Cocoonの吹き出しは、画像や表示させる名前などを登録できて、使うときにそれを呼び出せばいいだけという便利機能です。
ぜひ、ここでマスターして、ブログ記事の執筆を効率化していきましょう。
| テーマ名 | WordPressテーマ「Cocoon」 |
| 価格 | 無料 |
| 開発者 | わいひらさん（@MrYhira） |
Cocoon吹き出しの使用例
まずは、Cocoon吹き出しを使用した例を見ていきましょう。
上記のような吹き出しが、登録をしておくと簡単に使えるようになるので便利です。
Cocoon吹き出しの登録方法
では、Cocoon吹き出しを登録していきます。
①タイトル：ふきだしのタイトル名（呼び出す時に使用）
②名前：アイコンの下に表示される名前
③アイコン画像：そのままの意味
④吹き出しスタイル：ノーマル、フラット、LINE風、考え事の４種類から選択
⑤人物位置：左側にするか右側にするか選択
⑥アイコンスタイル：丸型か、四角型か、枠線ありか、なしかを選択
⑦エディターのリストに表示：投稿画面のリストから選べるようにするか否かを選択
Cocoon吹き出しの使い方
続いて、登録した吹き出しを実際に使う方法を解説します。
これで、吹き出しの表示もできました。
ヒナキラ登録しておくと、いつでも呼び出せるので便利ですね。
Cocoonのふきだしをカスタマイズする方法
さいごにCocoonのふきだしをカスタマイズする方法も。
- デフォルトのふきだし
- カスタムしたふきだし
手順は以下のとおりです。
WordPressの管理画面から「Cocoon設定」を選び、「ふきだし」の設定画面に移動します。
「新規作成」ボタンをクリックして、新しいふきだしを作ります。
ここで名前やアイコン画像、スタイルなどを設定しましょう。
WordPressの「外観」から「テーマファイルエディター」を選び、「style.css」を開きます。
以下のCSSコードを追加。（”フラット”タイプがカスタマイズされるコード）
.sbs-flat .speech-balloon {
background-color: #edfcf3;
border-radius: 10px;
padding:1em;
}background-color: 背景色
border-radius: ふきだしの角の丸み
padding:ふきだしの幅
例としては、下記のように貼り付ければOKです。
すべての設定が完了したら、「保存」をクリックします。
すると、「フラット」タイプを選んだときに、カスタマイズされたものが表示されるようになります。
まとめ｜Cocoon吹き出しの使い方をマスターして効率化しよう
今回は、Cocoonで吹き出しを登録、使用する方法を解説しました。
登録さえしておけば、吹き出しを使いたいときに簡単に呼び出せるので便利です。
また、吹き出しを使うことで、目に留まりやすい効果もあるので、上手に使っていきましょう。
それでは、以上となります。
では、また！
SWELLの吹き出しなら、もっと効率化
当サイトで使用しているWordPressテーマ「SWELL」なら、さらに吹き出し利用の効率化ができます。
Cocoonではブロックを呼び出してから使用する必要がありますが、SWELLならテキストを吹き出しに変換できます。
自由度が高く、非常に使い勝手が良いので、結果的には時短に繋がります。
正直、有料テーマ10コ使った中で、ダントツの使い勝手です。（他の有料テーマはCocoonと同様の使用方法）
さらに、他の面でも色々と効率化が可能になっているので、生産性が上がります。
ブログ運営を効率化したい方は、一度SWELL公式サイトをチェックしてみることをオススメします。
当サイト使用テーマ。最高です。
- 購入者限定アフィリエイトがあるからテーマで稼げる
- 書きやすくて時短になるから生産性があがる
- ChatGPTとの相性もバツグンで時短が加速
- 誰でも簡単にオシャレなデザインにできる
- 買い切り、複数サイトにバンバン使える
- アプデが多くて進化がスゴイ
- SEOにも強い
- 価格が高い
- 個人開発の不安
- 人気すぎてデザインが被りがち
＼ 時短になって生産性が爆上がりするテーマ ／
※おしゃれで書きやすくてブログが楽しくなる
コメント