「全幅コンテンツ」のスタイルガイド

このページでは、WordPressテーマ「Arkhe」における「全幅コンテンツ」の見た目について解説していきます。

このページを再現する検証用コード

「全幅コンテンツの挙動を自分の環境でも確認したい」という方は、自身の編集ページをコードエディターモードにして以下のコードをコピペしてください。

全幅 + 全幅 を並べた時

全幅コンテンツを連続で使用すると、ブロック間の余白が無くなる

という仕様になっています。


全幅のカバーブロックです

全幅のグループブロックです


グループブロックを「全幅」にした時

Arkheの仕様
  • 基本的には、コンテンツがそのまま全幅で表示されます。
  • ただし、「背景色」を設定している(.has-backgroundを持つ)場合、
    • 内部のコンテンツはページコンテンツの幅に収まるようになります。
    • さらに、上下の余白も大きくなります。
      • 上下の padding が4emに、
      • 左右の padding がvar(--ark-pad--container)に。
    • さらにその中で「全幅」コンテンツを配置した場合、内部幅いっぱいまでコンテンツが広がります。

ここはグループブロックA(背景色の指定なし)です。

  • こんな感じで、
  • コンテンツも全幅で表示されます。

ここはグループブロックB(背景色の設定あり)です。

  • こんな感じで、
  • コンテンツは記事の幅に収まります。

内部にさらに配置した「全幅」グループブロックです。※ 段落に色を付けています。

ここはグループブロックC(背景色 : 白)です。

  • 背景色を指定していないように見えて、
  • ページ全体と同じ白の背景色に設定しています。

カバーブロックを「全幅」にした時

Arkheの仕様
  • 「背景色付きの全幅グループブロック」と同じ挙動です。
    • 内部のコンテンツはページコンテンツの幅に収まります
    • 内部の余白が通常時より広めになります。
    • 上下の padding が4emに、
    • 左右の padding はvar(--ark-pad--container)に。
  • さらにその中で「全幅」コンテンツを配置した場合、内部幅いっぱいまでコンテンツが広がります。

全幅のカバーブロック

これは段落ブロックに背景色を付けたブロックです。

内部にさらに配置した「全幅」グループブロックです。※ 段落に色を付けています。


その他の「全幅」が使用できるブロックたち

特別な仕様は特になく、普通に全幅表示されます。

「全幅」のメディアと文章ブロック

メディアと文章ブロック

全幅です。

メディアと文章ブロック

全幅です。


「全幅」のカラムブロック

全幅のカラムブロック

内部の段落ブロックに色をつけているよ

内部の段落ブロック

内部の段落ブロック


全幅のカラムブロック(背景色あり)

内部の段落ブロックに色をつけているよ

内部の段落ブロック

内部の段落ブロック


「全幅」のテーブルブロック

テーブルテーブルテーブル
テーブルテーブルテーブル

「全幅」のプルクォートブロック

プルクォートブロック

引用元をここに表示

「全幅」のYouTube埋め込み

私の推し猫さまたちのYouTubeチャンネルです。