Cocoonブロックの使い方 グループ別紹介 in Gutenberg

CocoonのブロックをGutenbergで使うCocoon

Cocoon汎用ブロック

見出しボックス

大きな見出しがボックスの上に表示されます。

  • 爆速入力)/b (boxの意)
  • 表示方法)見出し、内容を入力する
  • カスタマイズ)見出しの先頭にアイコンを設置できる。色変更可能。
  • 表示例)
見出し

見出しの先頭にアイコンが入る。

タブ見出しボックス

タブのような見出しがボックスの上に表示されます。

  • 爆速入力)/b (boxの意) 、/t(tabの意)
  • 表示方法)見出し、内容を入力する
  • カスタマイズ)見出しの先頭にアイコンを設置できる。色変更可能。
  • 表示例)

見出しボックスと同類です。

ラベルボックス

ラベルの見出しがボックスの上に表示されます。

  • 爆速入力)/b (boxの意) 、/l(labelの意)
  • 表示方法)見出し、内容を入力する
  • カスタマイズ)見出しの先頭にアイコンを設置できる。色変更可能。
  • 表示例)
見出し

ボックス表示はシンプル。

Cocoonマイクロコピー

マイクロテキスト

マイクロテキスト(小さな文字。ふりがな・ルビのように利用できる)を挿入できるボックスです。

  • 爆速入力)/m (microの意)
  • 表示方法)見出し、内容を入力する
  • カスタマイズ)上寄せ、下寄せ。
  • 表示例)
マイクロテキストの文字サイズ。

マイクロバルーン

小さな吹き出しを表示できる。

  • 爆速入力)/m (microの意)
  • 表示方法)見出し、内容を入力する
  • カスタマイズ)上寄せ、下寄せ。丸型、色設定が指定可能。
  • 表示例)
マイクロコピーバルーン

Cocoonレイアウト

3カラム

3つのボックスを横に並べたような表現ができます。

  • 爆速入力)/3 (3列の意)
  • 表示方法)通常のブロック編集と同じ。Widgetなども設置できる。
  • カスタマイズ)通常のブロック編集と同じ。その他のボックなどの表現を組み合わせられる。
  • 表示例)

WordPress

WordPressに関する記事を書いています。

Gutenberg

Gutenbergに関する記事を書いています

Blog

普段の様子を中心に記事を書いています。

2カラム

上記の3カラムが2カラムになったもの。

  • 爆速入力)/2 (2列の意)
  • 表示方法)通常のブロック編集と同じ。Widgetなども設置できる。
  • カスタマイズ)通常のブロック編集と同じ。その他のボックスなどの表現を組み合わせられる。
  • 表示例)
見出し

左側

見出し

右側

まとめ

いかがでしたか?

駆け足でざっと見てみました。色々なスタイルが用意されていますね!

Cocoonに限らず、テーマ独自の表現方法をブロックという形で提供されていきます。これにより、テーマにある機能を直感的に利用できるようになっています。

そして、同様に色々なブロックを集めたプラグインなどもこれからどんどん作られていくと思います。自分のブロックを作ってみたい、と思うかもしれませんね。

忘れてはいけないのは、テーマやプラグインに依存しているスタイルは、テーマ変更やプラグイン削除の時に影響を受ける、ということです。

私はシンプルな表示が好きなのですが、確かにこういったブロックを使うことで、読みやすくする工夫などがしやすくなりますね!私も少しずつ使っていきたいと思います。

最後まで読んでいただきありがとうございました。

 
そよパパ
そよパパ

Twitterで日々の生活のことTweetしています。気に入ってもらえたらフォローよろしくお願い致します♪

コンテンツがお役に立てれば幸いです。

2019/10/4 (連続更新25日目) あと少しで30日!誰にも見つからずにひっそりと更新されているだけだけど。100日連続更新を目指したい!

コメント

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