WordPressテーマ「Cocoon」のブロックの使い方9選【吹き出しなど】

コラム

WordPressテーマ「Cocoon」のブロックの使い方9選

Cocoonで使える9種類の優秀な「ブロック」をご紹介していきます!

Cocoonブロックは非常に豊富でしかも強力です!

この記事を読めば各ブロックの使い方が分かるだけではなく、「なるほど、そういうCocoonブロックの活用法もあったんだ!」という新たな発見があると思います。

特に、Cocoon初心者の頃は、優れた機能を見逃しがちです。この記事を参考に、是非超優良テーマであるCocoonを使いこなしてみてください。

より読みやすい記事を書けるようになり、PV増加につながるはずです!

Cocoonブロック「吹き出し」の使い方

吹き出し機能ってどう使うのかな?

[+]ボタンから吹き出しマークを選ぶのが基本ね。

吹き出しの細かな設定はどうやるの?

吹き出しブロックを選択した状態で、右上の歯車のマークを押して、ブロックタブを選択すれば、左右位置や登場させるキャラ、吹き出しの色をカスタマイズできるわよ!下に手順を図解するわね。

まずCocoonブロックから「吹き出し」を選択します。その状態で下記の画像を参考に、歯車マークを選択します。

すると、右側のサイドバーが以下の画像のようになります。

この画面の[人物]から人のアイコン画像を設定できます。例えば[ビジネスウーマン(右)]となっていても[人物位置]で左右を変更することができます。

この画面を出すことができれば後は直感的に操作できるわ。一番よく使う機能は[吹き出し色設定]>[背景色]よ。例えばこの吹き出しは薄い黄色を背景色に設定してるわよ。

ネコ丸
ネコ丸

でも、僕みたいにオリジナル画像をキャラに設定するにはどうするにゃ?

方法は2つあるわ!吹き出しブロックのアイコン画像をクリックして都度、画像を選択するという方法が1つ目ね。2つ目は、[ダッシュボード]>[Cocoon設定]>[吹き出し]>[新規追加]からオリジナル吹き出しをあらかじめ設定しておく方法よ。

Cocoon設定から吹き出しキャラを設定する方法
ネコ丸
ネコ丸

やっぱりオリジナル画像を使いたいから、Cocoon設定であらかじめアイコン画像を設定しておいた方がいいにゃ!

Cocoonブロック「アイコンボックス」の使い方

Cocoonブロックには様々な種類のボックスがありますが、記事を書く上でアイコンボックスは非常に便利です。

例えば、これは「補足情報」というボックスです。薄いブルーが、とても見やすいですよね。

ブロックを選択した状態で右上の[歯車マーク]を選択すると右サイドバーにそのブロックの設定画面が表示されます。この設定画面から「アイコンボックス」の種類を変えることができます。このボックスでは、色を変化させてみました。

他にも、このようなメモ機能のボックスや、

「〇」も、

「✖」も表現できます。

プロフィールを説明するボックスも、使う場面がありそうですよね。

Cocoonブロック「案内ボックス」の使い方

Cocoonブロックには、「案内ボックス」というものもあります。

「案内ボックス」では、このように様々な背景色の上に同じトーンカラーの文字を記載し、目立たせることができます。青の統一感があって、とても見やすく、やさしい感じになりますよね。

これまでの他のボックスと同様に、右上の[歯車マーク]の「スタイル設定」から、文字色と背景色を変更することができます。例えばこのボックスでは、「サクセス(薄い緑)」を選んでみました。緑に統一されたカラーが素敵です。

Cocoonブロック「白抜きボックス」の使い方

Cocoonブロックには、「白抜きボックス」というものもありますが、上記の「案内ボックス」よりはシンプルな装飾になるため、活躍する頻度は少ないかもしれません。

このように、「白抜きボックス」は「案内ボックス」のシンプル版のようなものですね。

「白抜きボックス」の枠線の色を変更できます。

背景色も変更できます。

文字色も編集できます。なかなかこのようなカラーリングはしないかもしれませんが。。

Cocoonブロック「付箋風ボックス」の使い方

Cocoonブロックには、「付箋風ボックス」もあります。

「付箋風ボックス」では、左端に濃い色の装飾がなされています。

この「付箋風ボックス」もこれまでと同様に、右上の[歯車マーク]から色などを変更できます。これは、黄色を選んだ場合です。

全部で5種類のカラーがあり、これは青色を選んだ場合です。

Cocoonブロック「タブボックス」の使い方

Cocoonブロックには、「タブボックス」というものもあります。

この「タブボックス」は、記事中で適切なメッセージを読者に強調することができるため、非常に便利な機能です。

このように、しっかり強調したい文章に使うことができます。

ラベルの種類を選べるだけではなく、ボックスの色も自由に変更できます。

例えば、ラベルを「POINT」にすれば、重要なメッセージを強調できます。

変わったラベルとして「Amazon」なんてものもあります。Amazonの商品を紹介するときに便利ですね。

Cocoonブロック「ブログカード」の使い方

ブログカードとは内部リンクや外部リンクを強調するための機能です。単に「【日本史】縄文時代総まとめ!超わかりやすく解説」とテキストリンクとするより、ブログカードを使って、

とした方が綺麗だし、クリック率も上がりますよね。

ブログカードの使い方は、下記画像のようにURLをブログカード内にコピペするだけです。

Cocoonブロック「ボタン」の使い方

Cocoonブロックの「ボタン」は、ユーザーに是非クリックして欲しいリンク先を紹介するのに便利です!

Cocoonには2種類のボタンが用意されています。「ボタン」と「囲みボタン」です。基本的に「囲みボタン」の方が圧倒的に使いやすいので、「囲みボタン」の使用をオススメします!

これが普通のボタン↓

「普通のボタン」にリンクを設定するには、通常のテキストリンクと同様にツールバーから[クリップのマーク]を選択します。

これが囲みボタン↓(下記ボタンは光らせているが光らせないことも可!)

「囲みボタン」にリンクを設定するには、囲みボタンを選択した状態で、右上の[歯車マーク]をクリックし、URL欄にリンク先URLをコピペします。

画像で解説すると以下のような具合です。

この囲みリンクは、ASPのアフィリエイトリンクをボタンリンクで表示させたい場合などに、とても役立ちます。

※cocoonの囲みボタンを使ったアフィリエイトリンクの貼り方については、コチラで詳しく解説されています。

Cocoonブロック「タイムライン」の使い方

「タイムライン」は歴史やスケジュールなど時系列を表現するのに便利なCocoonブロックです。

例えば、次のような感じで使う事ができます。

筆者の1日
  • 07:00
    起床

    朝ごはんを食べる

  • 09:00
    出社(テレワークなので自宅)
  • 18:00
    退勤

    ホワイト企業なので残業はない!

  • 19:00
    夕食

    好物はタイ料理

  • 23:00
    就寝

まとめ

以上9種類のCocoonブロックの使い方をご紹介してきました。これらの神機能を駆使して、一段も2段もレベルの高い読みやすい記事を目指したいですよね!

全てのCocoonブロックは、そのブロックを選択した状態で右上の[歯車マーク]をクリックすることで自由自在に編集できますよ!

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