デザイン見本 Cocoonタブブロックのgrayishスタイル見本
Cocoon ver2.7.3でタブブロックが追加されました。grayishではデフォルトスタイルの他、シンプルに使いまわせそうなスタイルのバリエーションを追加しています。
ブロックエディタの追加CSSクラスに所定のクラス名を入力してご利用いただけます。
フロントページで使えそうなスタイルも追加していますので、サンプルをご覧になっていただき、是非ご利用ください。
ブロックエディター
記事内に広告が含まれています。
デザイン見本 
カスタマイズ Cocoonの新機能でパターンデータをシェア可能に！作例のパターンをシェア&使い方
サイト型のフロントページに使えるようなブロックの作例を前の記事でご紹介しましたが、ブロックの作成、追加CSSクラス名の入力など作業が割と多く、もっと手軽にシェアしたいと思ってました。Cocoon ver2.7.1より追加されたパターン機能で、パターンデータのエクスポート＆インポートが可能になった為、各自でインポート可能なデータを用意することにしました。これによってブロックに関しては簡単に作例と同じ構成で使用可能です。専用のCSSを追加することでデザインを再現できます。
尚、WordPress6.5ではパターンの場所が変更になり、タイトルの変更ができなくなっていますが、コードエディターに切り替えることで変更可能です。この手順も追記しています。
マニュアル 記事の装飾に使える、スキン独自のカラーパレット
Cocoonブロックなどの、スキン独自スタイルに使用しているカラーについて、記事内でも利用できるようにカラーパレットに追加しています。
段落などのテキスト、背景色を変えるだけでも印象が変わるので、是非ご活用ください。
ハイライトとして一部分だけの色変更にも使用できます。
ご自分だけのカラーを追加したい場合は、Cocoon設定から追加可能なのでお試しください。
デザイン見本 ブロックエディタ見本 コアブロック
コアブロックの見出し、段落（アイコンボックスのみ）、引用、プルクオート、テーブルについてスキンでスタイルを追加しています。記事作成の際にご参照ください。
デザイン見本 ブロックエディタ見本 Cocoonブロック
Cocoonブロックについて、スキン独自のスタイルを当てているものについて見本を載せています。記事作成の際に参考になれば幸いです。一部のブロックは独自スタイルを当てていません。独自スタイルのないブロックは目次の一番最後の項目にリスト化しています。
確認・注意事項 記事作成はブロックエディタ（Gutenberg）をご利用ください
CocoonにはCocoonブロックも完備されており、記事作成でブロックエディタを問題なく使用できるようになっています。クラシックエディタも依然ニーズがあることは理解していますが、管理人の工数の問題もあり、クラシックエディタで動作確認はできておりません。