カスタマイズ 境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。
サイト型フロントページに使えるシリーズ、今回は境界線をなみなみやギザギザにできるCSSを紹介します。
また、画像やカバーブロックを直接円弧、斜めに切り抜きするCSSも紹介します。
さらに区切り線として使用可能な、直線・なみなみ・ギザギザのパターンも配布します。
サイト型
記事内に広告が含まれています。
カスタマイズ 
カスタマイズ サイト型のフロントページ向け：滑らかな曲線の境界線ブロックをつくる（円弧・波）※カバーブロック利用で簡単に使えるように改良！
１カラムのサイト型フロントページなので装飾として使える、滑らかな曲線のブロックを紹介します。セクションの境界を円弧や波の形で表示することができます。
カバーブロック利用で簡単に使用可能に改良しました。
grayishに限らず、Cocoonのスキンなしの場合などでも利用可能です。
カスタマイズ フロントページ向けのブロックパターン詰め合わせ(デモページあり）※プラグインとPickupパターンを修正
ブログのフロントページによくあるセクション（About、Pickup、NewPost、Rankingなど）別にすぐに使えるパターンデータを用意しました。
パターンと合わせて手軽にデザインを再現できるCSSプラグインも配布します。
今回紹介したパターンで、デモのフロントページを作ってみたので是非ご覧になってください。パターンをペタペタと貼り付けるだけで作れます。
記事内にあるご利用の注意事項をよくご確認の上、ご利用ください。
カスタマイズ Cocoonの新機能でパターンデータをシェア可能に！作例のパターンをシェア&使い方
サイト型のフロントページに使えるようなブロックの作例を前の記事でご紹介しましたが、ブロックの作成、追加CSSクラス名の入力など作業が割と多く、もっと手軽にシェアしたいと思ってました。Cocoon ver2.7.1より追加されたパターン機能で、パターンデータのエクスポート＆インポートが可能になった為、各自でインポート可能なデータを用意することにしました。これによってブロックに関しては簡単に作例と同じ構成で使用可能です。専用のCSSを追加することでデザインを再現できます。
WordPress6.5ではパターンの場所が変更になり、タイトルの変更ができなくなっていますが、コードエディターに切り替えることで変更可能です。この手順も追記しています。
※WordPress6.6では、管理画面上にある管理メニューの中に、6.5までの「パターン一覧」があります。こちらについて追記しています。
カスタマイズ サイト型フロントページにも使える！カバーブロックを画面の幅いっぱいに広げるサンプルコード
サイト型フロントページなど、１カラムのページで使用可能な、カバーブロックや画像ブロックを画面幅いっぱいに広げるサンプルコードをご紹介します。
HTMLを書くことなくCSSだけでできます。ブロックの高度な設定で追加CSSクラスを付け、対応するCSSを子テーマやページのカスタムCSSに追加することで実現します。
背景を画面幅いっぱいにして作るNews（新着情報）セクションの作例も載せています。
カスタマイズ サイト型にしたい場合の準備編
サイト型にするための準備として、フロントページ・新着記事一覧用の固定ページを作成する手順と、
WordPress管理画面の表示設定について紹介しています。
このサイトのフロントページの構成についても解説しています。