デザイン見本 Cocoonタブブロックのgrayishスタイル見本
Cocoon ver2.7.3でタブブロックが追加されました。grayishではデフォルトスタイルの他、シンプルに使いまわせそうなスタイルのバリエーションを追加しています。
ブロックエディタの追加CSSクラスに所定のクラス名を入力してご利用いただけます。
フロントページで使えそうなスタイルも追加していますので、サンプルをご覧になっていただき、是非ご利用ください。
CSS
記事内に広告が含まれています。
デザイン見本 
カスタマイズ Cocoonの新機能でパターンデータをシェア可能に！作例のパターンをシェア&使い方
サイト型のフロントページに使えるようなブロックの作例を前の記事でご紹介しましたが、ブロックの作成、追加CSSクラス名の入力など作業が割と多く、もっと手軽にシェアしたいと思ってました。Cocoon ver2.7.1より追加されたパターン機能で、パターンデータのエクスポート＆インポートが可能になった為、各自でインポート可能なデータを用意することにしました。これによってブロックに関しては簡単に作例と同じ構成で使用可能です。専用のCSSを追加することでデザインを再現できます。
尚、WordPress6.5ではパターンの場所が変更になり、タイトルの変更ができなくなっていますが、コードエディターに切り替えることで変更可能です。この手順も追記しています。
カスタマイズ フロントページ向けのブロックパターン詰め合わせ(デモページあり）
ブログのフロントページによくあるセクション（About、Pickup、NewPost、Rankingなど）別にすぐに使えるパターンデータを用意しました。
パターンと合わせて手軽にデザインを再現できるCSSプラグインも配布します。
今回紹介したパターンで、デモのフロントページを作ってみたので是非ご覧になってください。パターンをペタペタと貼り付けるだけで作れます。
記事内にあるご利用の注意事項をよくご確認の上、ご利用ください。
カスタマイズ サイト型フロントページにも使える！カバーブロックを画面の幅いっぱいに広げるサンプルコード
サイト型フロントページなど、１カラムのページで使用可能な、カバーブロックや画像ブロックを画面幅いっぱいに広げるサンプルコードをご紹介します。
HTMLを書くことなくCSSだけでできます。ブロックの高度な設定で追加CSSクラスを付け、対応するCSSを子テーマやページのカスタムCSSに追加することで実現します。
背景を画面幅いっぱいにして作るNews（新着情報）セクションの作例も載せています。
カスタマイズ 子テーマのCSSでカスタマイズしたい場合
サイトフォントやサイトリンク色はスキン制御されていますが、これらは子テーマのCSSでカスタマイズすれば任意の値に変更可能です。スキン制御を外す、という作業はしたくないんだけど、変更したいという方に向けた内容です。
また、スキンのテーマカスタマイザーでカラー変更をする際に、特定の部分は別のカラーにしたい、というケースもあると思います。そのような場合も子テーマのCSSカスタマイズで変更可能です。
この記事に載せるコードは推奨ではなく参考用ですので、予めご了承ください。