Cocoonブロックのアイテム紹介

WordPressの人気テーマ 「Cocoon」には、特徴的な独自のアイテムが多数用意されています。それらについて特徴と使い方を紹介します。これを見れば「Cocoon」を使用した際のイメージが把握しやすいと思います。

Cocoonブロック（囲み枠）

こちらは「Cocoonブロック」の中にある囲み枠です。

白抜きボックス

囲み罫のあるボックスです。罫線色、ボーダー（背景）色、文字色が指定できますし、ボックス内の文字について、文字サイズ、文字色、背景色を指定することもできます。

案内ボックス

中間色の背景色付きのボックスです。「デンジャー（薄い赤色）」といったプリセット値を選択して指定します。

便箋風ブロック

左に縦罫があしらわれた背景色付きのボックスです。「青色」といったプリセット値を選択して指定します。

アイコンボックス

左にアイコンが表示される罫囲みのボックスです。「補色情報」といったプリセット値を選択して設定します。

タブボックス

タブと囲み罫のあるボックスです。「チェック」といったプリセット値を選択して設定します。

Cocoonブロック（特殊なアイテム）

ブログカード

次は「ブログカード」です。URLページへのリンクをカード形式で表示してくれます。非常に目立つので、リンク先を強くアピールしたいときに最適です。右上の「人気記事」といった文字は「ラベル」を選択することで指定できます。

次は外部URLを指定した「外部ブログカード」として使用した例です。

なお、文頭文末にスペースが入っていると失敗するようです。うまくいかないときにはリンクを[htto://….]で囲む方法があります。

プレビューや公開した際に、次のように、URLがそのまま表示されてしまうことがあります。

これはたいてい、行頭と行末に半角スペースが入ってることが原因です。URLをコピペしたときに起きがちなので、半角スペースが入っていないかチェックしましょう。

内部URLを指定した「内部ブログカード」として利用することも可能です。

トグルボックス

以下は Cocoonブロックの「トグルボックス」です。クリックすると開いたり、閉じたりができます。

アイコンリスト

以下は Cocoonブロックの「アイコンリスト」です 名称通りリスト表現が可能です。リストの行頭のアイコンのデザインを変更することもできます。

検索案内

次はCocoonブロックの「検索案内」です。「検索」を押すと検索結果を表示します。検索する初期値の指定もできます。

タイムライン

次は Cocoonブロックの「タイムライン」です。 時系列をベースにしたスケジュールなどを表現するのに便利です。タイムラインの数は、スタイル設定の「アイテム数」のスライダで増減できます。

Cocoonブロック（ボタン）

ボタン

こちらは「Cocoonブロック」の中にあるボタンです。ボタンですから、押すと、リンク先をアクセスします。ボタンのデザインとして、円形の指定や、キラッと光らせる指定が可能です。

Cocoonブロック（吹き出し）

吹き出し

こちらは「Cocoonブロック」の中にある吹き出しです。キャラをもちいた会話表現ができますので、ブログを読ませるきっかけ作りに最適です。

Cocoon汎用ボックス

こちらは「Cocoon汎用ブロック」の中にあるアイテムです。枠のデザインによって、次の種類があります。

見出しボックス

タブ見出しボックス

ラベルボックス

Cocoonマイクロコピー

こちらは「Cocoonマイクロコピー」の中にあるアイテムです。 注意書きのような、必要なユーザーだけが注目すればよい文章にお勧めです。

マイクロテキスト

「下寄り」「上寄り」により上下が詰まっています。

マイクロバルーン

以下は吹き出し風の「マイクロバルーン」です。

Cocoonレイアウト

こちらは「Cocoonレイアウト」の中にある「2カラム」と「3カラム」というアイテムです。ざっくりとした段組みを用いたいときに便利です。

2カラム

3カラム

Cocoonブロックの最新情報を調べたい

Cocoonブロックの詳しい説明とサポート状況は、公式サイトで確認できます。