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

WordPress

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

へたくん
へたくん

Cocoonの性能の違いとやらを教えてくれ!

くみやん
くみやん

了解しました。たくさんあるので、びっくりしないでくださいね。

Cocoonブロック(囲み枠)

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

白抜きボックス

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

Cocoonブロックの「白抜きボックス」です。

文字のサイズと地色と色を指定することもできます。

案内ボックス

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

Cocoonブロックの「案内ボックス」です。

地の色を「スタイル設定」で選ぶことができます。

文字のサイズと地色と色を指定することもできます。

便箋風ブロック

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

Cocoonブロックの「便箋風ブロック」です。

行頭の縦バーの色を「スタイル設定」で選ぶことができます。

文字のサイズと地色と色を指定することもできます。

アイコンボックス

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

Cocoonブロックの「アイコンボックス」です。

左のアイコンの種類を「スタイル設定」で選ぶことができます。

文字のサイズと地色と色を指定することもできます。

タブボックス

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

Cocoonブロックの「タブボックス」です。

ラベルの種類を「スタイル設定」で選ぶことができます。

文字のサイズと地色と色を指定することもできます。

Cocoonブロック(特殊なアイテム)

ブログカード

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

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

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

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

失敗している例

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

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

トグルボックス

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

テキストの表示/非表示の切り替えができます。

ボーダー色(現在は緑色)を指定できます。

アイコンリスト

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

できること
  • 左のアイコンの種類を「スタイル設定」で選ぶことができます
  • アイコン色、 ボーダー色 を指定できます
    • リスト項目のインデントが指定できます

検索案内

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

タイムライン

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

スケジュール
  • 6:00
    起床

    時系列を表現できます。

  • 12:00
    昼食

    アイテムの数を「スタイル設定」で増減できます。

  • 18:00
    夕食

    「ポイント色(現在はピンクの丸)」「背景色(現在は薄黄色)」「文字色」「囲み罫の色」を指定できます。

Cocoonブロック(ボタン)

ボタン

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

Cocoonブロック(吹き出し)

吹き出し

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

おら
おら

Cocoonブロックの「吹き出し」です

あたい
あたい

キャラは「スタイル設定」の「人物」で選択できます。

「人物」「吹き出しスタイル」「人物位置(左/右)」「アイコンスタイル」も変更できますが、キャラはあらかじめ登録できるので、登録したものをそのまま使うのが通常となります。

ブロックエディタでは、本吹き出し文字の一番上と一番下に1行分のスペースがとられてますが、公開するとなくなるようです。。

吹き出しを出す方法として、「クラシック」ブロックを選択したのち「吹き出し」を選択する方法もあります。

このブロックがそれですが、再編集がしづらいので使わないほうがいいように思います。

Cocoon汎用ボックス

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

見出しボックス

Cocoon汎用ブロックの「見出しボックス」です。

左のアイコンの種類を「スタイル設定」で選ぶことができます。

ボーダー色、背景色、文字色を指定できます。

タブ見出しボックス

Cocoon汎用ブロックの「タブ見出しボックス」です。

左のアイコンの種類を「スタイル設定」で選ぶことができます。

ボーダー色、背景色、文字色を指定できます。

ラベルボックス

Cocoon汎用ブロック「ラベルボックス」です

左のアイコンの種類を「スタイル設定」で選ぶことができます。

ボーダー色、背景色、文字色を指定できます。

Cocoonマイクロコピー

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

マイクロテキスト

マイクロコピーの「マイクロテキスト」です。
「スタイル設定」でアイコンが選択できます。
「スタイル設定」で「下寄り」を選択しています。

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

「スタイル設定で「上寄り」を選択しています。
文字色も指定できます。

マイクロバルーン

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

アイコンが指定できます。
ボーダー色、背景色、文字色を指定できます。
位置(左、中央、右)や枠の「円形」も指定できます。
背景色、文字色、ボーダー色の指定ができます。

Cocoonレイアウト

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

2カラム

「2カラム」です。

2カラム目

「2カラム」は「スタイル設定」で「カラム比率」が指定できます。

3:1を指定しています。

3カラム

「3カラム」です。

 「3カラム」は「カラム比率」の指定ができません。

3カラム目

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

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

コメント

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