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

<!-- wp:heading -->
<h2>全幅 + 全幅 を並べた時</h2>
<!-- /wp:heading -->

<!-- wp:arkhe-blocks/notice {"className":"is-style-simple"} -->
<div class="ark-block-notice -point is-style-simple"><div class="ark-block-notice__head"><svg class="arkb-svg arkb-svg-point ark-block-notice__icon" viewbox="0 0 40 40" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg"><g><path d="M25.5,34.8h-11c-0.3,0-0.5-0.2-0.5-0.5v-1c0-0.3,0.2-0.5,0.5-0.5h11c0.3,0,0.5,0.2,0.5,0.5v1C26,34.6,25.8,34.8,25.5,34.8z"></path><path d="M23.5,37.8h-7c-0.6,0-1-0.4-1-1v-0.5c0-0.3,0.2-0.5,0.5-0.5h8c0.3,0,0.5,0.2,0.5,0.5v0.5C24.5,37.4,24.1,37.8,23.5,37.8z"></path><path d="M19.3,2.2C12.4,2.5,6.7,8,6.1,14.9c-0.5,6,2.8,11.3,7.7,13.8c0.2,0.1,0.3,0.3,0.3,0.4v2c0,0.3,0.2,0.5,0.5,0.5h11 c0.3,0,0.5-0.2,0.5-0.5v-2.1c0-0.2,0.1-0.4,0.3-0.4c4.6-2.3,7.7-7,7.7-12.5C34,8.2,27.4,1.8,19.3,2.2z M20.3,6.8 c-5.2,0-9.5,4.3-9.5,9.5c0,0.6-0.5,1.2-1.2,1.2S8.5,17,8.5,16.3c0-6.5,5.3-11.8,11.8-11.8c0.6,0,1.2,0.5,1.2,1.2 C21.5,6.3,21,6.8,20.3,6.8z"></path></g></svg></div><div class="ark-block-notice__body ark-keep-mt--s"><!-- wp:paragraph -->
<p><strong>全幅コンテンツを連続で使用</strong>すると、<strong>ブロック間の余白が無くなる</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:arkhe-blocks/notice -->

<!-- wp:paragraph -->
<p>という仕様になっています。</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:cover {"minHeight":40,"gradient":"vivid-cyan-blue-to-vivid-purple","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim has-background-gradient has-vivid-cyan-blue-to-vivid-purple-gradient-background" style="min-height:40px"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力..."} -->
<p class="has-text-align-center">全幅のカバーブロックです</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"align":"full","gradient":"pale-ocean"} -->
<div class="wp-block-group alignfull has-pale-ocean-gradient-background has-background"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">全幅のグループブロックです</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>グループブロックを「全幅」にした時</h2>
<!-- /wp:heading -->

<!-- wp:arkhe-blocks/notice {"className":"is-style-default"} -->
<div class="ark-block-notice -point is-style-default"><div class="ark-block-notice__head"><svg class="arkb-svg arkb-svg-point ark-block-notice__icon" viewbox="0 0 40 40" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg"><g><path d="M25.5,34.8h-11c-0.3,0-0.5-0.2-0.5-0.5v-1c0-0.3,0.2-0.5,0.5-0.5h11c0.3,0,0.5,0.2,0.5,0.5v1C26,34.6,25.8,34.8,25.5,34.8z"></path><path d="M23.5,37.8h-7c-0.6,0-1-0.4-1-1v-0.5c0-0.3,0.2-0.5,0.5-0.5h8c0.3,0,0.5,0.2,0.5,0.5v0.5C24.5,37.4,24.1,37.8,23.5,37.8z"></path><path d="M19.3,2.2C12.4,2.5,6.7,8,6.1,14.9c-0.5,6,2.8,11.3,7.7,13.8c0.2,0.1,0.3,0.3,0.3,0.4v2c0,0.3,0.2,0.5,0.5,0.5h11 c0.3,0,0.5-0.2,0.5-0.5v-2.1c0-0.2,0.1-0.4,0.3-0.4c4.6-2.3,7.7-7,7.7-12.5C34,8.2,27.4,1.8,19.3,2.2z M20.3,6.8 c-5.2,0-9.5,4.3-9.5,9.5c0,0.6-0.5,1.2-1.2,1.2S8.5,17,8.5,16.3c0-6.5,5.3-11.8,11.8-11.8c0.6,0,1.2,0.5,1.2,1.2 C21.5,6.3,21,6.8,20.3,6.8z"></path></g></svg><span class="ark-block-notice__title">Arkheの仕様</span></div><div class="ark-block-notice__body ark-keep-mt--s"><!-- wp:list -->
<ul><li>基本的には、<strong>コンテンツがそのまま全幅で表示</strong>されます。</li><li>ただし、「<strong>背景色</strong>」を設定している（<code>.has-background</code>を持つ）場合、<ul><li><strong>内部のコンテンツはページコンテンツの幅に収まる</strong>ようになります。</li><li>さらに、上下の余白も大きくなります。<ul><li>上下の padding が<code>4em</code>に、</li><li>左右の padding が<code>var(--ark-pad--container)</code>に。</li></ul></li><li>さらにその中で「全幅」コンテンツを配置した場合、内部幅いっぱいまでコンテンツが広がります。</li></ul></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:arkhe-blocks/notice -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>ここはグループブロックA（背景色の指定なし）です。</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>こんな感じで、</li><li>コンテンツも全幅で表示されます。</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"full","style":{"color":{"background":"#ebebeb"}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#ebebeb"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>ここはグループブロックB（背景色の設定あり）です。</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul id="block-cca8c14a-00c7-4208-b695-3da9b1d6ddab"><li>こんな感じで、</li><li>コンテンツは記事の幅に収まります。</li></ul>
<!-- /wp:list -->

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"backgroundColor":"vivid-cyan-blue","textColor":"white"} -->
<p class="has-white-color has-vivid-cyan-blue-background-color has-text-color has-background">内部にさらに配置した「全幅」グループブロックです。※ 段落に色を付けています。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","backgroundColor":"white"} -->
<div class="wp-block-group alignfull has-white-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>ここはグループブロックC（背景色 : 白）です。</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul id="block-db5e321e-78d1-4a6d-b1cb-e3598b0ef606"><li>背景色を指定していないように見えて、</li><li>ページ全体と同じ白の背景色に設定しています。</li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>カバーブロックを「全幅」にした時</h2>
<!-- /wp:heading -->

<!-- wp:arkhe-blocks/notice {"className":"is-style-default"} -->
<div class="ark-block-notice -point is-style-default"><div class="ark-block-notice__head"><svg class="arkb-svg arkb-svg-point ark-block-notice__icon" viewbox="0 0 40 40" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg"><g><path d="M25.5,34.8h-11c-0.3,0-0.5-0.2-0.5-0.5v-1c0-0.3,0.2-0.5,0.5-0.5h11c0.3,0,0.5,0.2,0.5,0.5v1C26,34.6,25.8,34.8,25.5,34.8z"></path><path d="M23.5,37.8h-7c-0.6,0-1-0.4-1-1v-0.5c0-0.3,0.2-0.5,0.5-0.5h8c0.3,0,0.5,0.2,0.5,0.5v0.5C24.5,37.4,24.1,37.8,23.5,37.8z"></path><path d="M19.3,2.2C12.4,2.5,6.7,8,6.1,14.9c-0.5,6,2.8,11.3,7.7,13.8c0.2,0.1,0.3,0.3,0.3,0.4v2c0,0.3,0.2,0.5,0.5,0.5h11 c0.3,0,0.5-0.2,0.5-0.5v-2.1c0-0.2,0.1-0.4,0.3-0.4c4.6-2.3,7.7-7,7.7-12.5C34,8.2,27.4,1.8,19.3,2.2z M20.3,6.8 c-5.2,0-9.5,4.3-9.5,9.5c0,0.6-0.5,1.2-1.2,1.2S8.5,17,8.5,16.3c0-6.5,5.3-11.8,11.8-11.8c0.6,0,1.2,0.5,1.2,1.2 C21.5,6.3,21,6.8,20.3,6.8z"></path></g></svg><span class="ark-block-notice__title">Arkheの仕様</span></div><div class="ark-block-notice__body ark-keep-mt--s"><!-- wp:list -->
<ul><li>「背景色付きの全幅グループブロック」と同じ挙動です。<ul><li><strong>内部のコンテンツはページコンテンツの幅に収まります</strong>。</li><li>内部の余白が通常時より広めになります。</li></ul><ul><li><span style="background-color: initial; color: var(--arkb-notice_text); font-family: var(--ark-font_family); font-size: var(--ark-font_size,16px);">上下の padding が<code>4em</code></span>に、</li><li>左右の padding は<code>var(--ark-pad--container)</code>に。</li></ul></li><li>さらにその中で「全幅」コンテンツを配置した場合、内部幅いっぱいまでコンテンツが広がります。</li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:arkhe-blocks/notice -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:cover {"url":"https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1479981280584-037818c1297d.jpeg","id":15,"dimRatio":30,"overlayColor":"black","minHeight":80,"align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-30 has-black-background-color has-background-dim" style="background-image:url(https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1479981280584-037818c1297d.jpeg);min-height:80px"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">全幅のカバーブロック</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"vivid-cyan-blue"} -->
<p class="has-vivid-cyan-blue-background-color has-background">これは段落ブロックに背景色を付けたブロックです。</p>
<!-- /wp:paragraph -->

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"backgroundColor":"vivid-cyan-blue"} -->
<p class="has-vivid-cyan-blue-background-color has-background">内部にさらに配置した「全幅」グループブロックです。※ 段落に色を付けています。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>その他の「全幅」が使用できるブロックたち</h2>
<!-- /wp:heading -->

<!-- wp:arkhe-blocks/notice {"className":"is-style-simple"} -->
<div class="ark-block-notice -point is-style-simple"><div class="ark-block-notice__head"><svg class="arkb-svg arkb-svg-point ark-block-notice__icon" viewbox="0 0 40 40" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg"><g><path d="M25.5,34.8h-11c-0.3,0-0.5-0.2-0.5-0.5v-1c0-0.3,0.2-0.5,0.5-0.5h11c0.3,0,0.5,0.2,0.5,0.5v1C26,34.6,25.8,34.8,25.5,34.8z"></path><path d="M23.5,37.8h-7c-0.6,0-1-0.4-1-1v-0.5c0-0.3,0.2-0.5,0.5-0.5h8c0.3,0,0.5,0.2,0.5,0.5v0.5C24.5,37.4,24.1,37.8,23.5,37.8z"></path><path d="M19.3,2.2C12.4,2.5,6.7,8,6.1,14.9c-0.5,6,2.8,11.3,7.7,13.8c0.2,0.1,0.3,0.3,0.3,0.4v2c0,0.3,0.2,0.5,0.5,0.5h11 c0.3,0,0.5-0.2,0.5-0.5v-2.1c0-0.2,0.1-0.4,0.3-0.4c4.6-2.3,7.7-7,7.7-12.5C34,8.2,27.4,1.8,19.3,2.2z M20.3,6.8 c-5.2,0-9.5,4.3-9.5,9.5c0,0.6-0.5,1.2-1.2,1.2S8.5,17,8.5,16.3c0-6.5,5.3-11.8,11.8-11.8c0.6,0,1.2,0.5,1.2,1.2 C21.5,6.3,21,6.8,20.3,6.8z"></path></g></svg></div><div class="ark-block-notice__body ark-keep-mt--s"><!-- wp:paragraph -->
<p>特別な仕様は特になく、普通に全幅表示されます。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:arkhe-blocks/notice -->

<!-- wp:heading {"level":3} -->
<h3>「全幅」のメディアと文章ブロック</h3>
<!-- /wp:heading -->

<!-- wp:media-text {"align":"full","mediaId":10,"mediaLink":"https://arkhe-theme.com/ja/8wz1q4q_xag/","mediaType":"image","mediaSizeSlug":"large","imageFill":true} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(https://arkhe-theme.com/ja/wp-content/uploads/2020/09/8wz1Q4Q_XAg-1024x683.jpg);background-position:50% 50%"><img src="https://arkhe-theme.com/ja/wp-content/uploads/2020/09/8wz1Q4Q_XAg-1024x683.jpg" alt="" class="wp-image-10 size-large"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…","fontSize":"large"} -->
<p class="has-large-font-size">メディアと文章ブロック</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>全幅です。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaId":14,"mediaLink":"https://arkhe-theme.com/ja/photo-1459111701074-c0ee7842cccb/","mediaType":"image","mediaSizeSlug":"large","imageFill":true} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1459111701074-c0ee7842cccb-1024x683.jpeg);background-position:50% 50%"><img src="https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1459111701074-c0ee7842cccb-1024x683.jpeg" alt="" class="wp-image-14 size-large"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…","fontSize":"large"} -->
<p class="has-large-font-size">メディアと文章ブロック</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>全幅です。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3>「全幅」のカラムブロック</h3>
<!-- /wp:heading -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"backgroundColor":"light-green-cyan"} -->
<p class="has-light-green-cyan-background-color has-background">全幅のカラムブロック</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"light-green-cyan"} -->
<p class="has-light-green-cyan-background-color has-background">内部の段落ブロックに色をつけているよ</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"backgroundColor":"pale-cyan-blue"} -->
<p class="has-pale-cyan-blue-background-color has-background">内部の段落ブロック</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"pale-cyan-blue"} -->
<p class="has-pale-cyan-blue-background-color has-background">内部の段落ブロック</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:columns {"align":"full","gradient":"vivid-cyan-blue-to-vivid-purple"} -->
<div class="wp-block-columns alignfull has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"backgroundColor":"light-green-cyan"} -->
<p class="has-light-green-cyan-background-color has-background">全幅のカラムブロック（背景色あり）</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"light-green-cyan"} -->
<p class="has-light-green-cyan-background-color has-background">内部の段落ブロックに色をつけているよ</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"backgroundColor":"pale-cyan-blue"} -->
<p class="has-pale-cyan-blue-background-color has-background">内部の段落ブロック</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"pale-cyan-blue"} -->
<p class="has-pale-cyan-blue-background-color has-background">内部の段落ブロック</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3>「全幅」のテーブルブロック</h3>
<!-- /wp:heading -->

<!-- wp:table {"align":"full"} -->
<figure class="wp-block-table alignfull"><table><tbody><tr><td>テーブル</td><td>テーブル</td><td>テーブル</td></tr><tr><td>テーブル</td><td>テーブル</td><td>テーブル</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3>「全幅」のプルクォートブロック</h3>
<!-- /wp:heading -->

<!-- wp:pullquote {"align":"full"} -->
<figure class="wp-block-pullquote alignfull"><blockquote><p>プルクォートブロック</p><cite>引用元をここに表示</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3>「全幅」のYouTube埋め込み</h3>
<!-- /wp:heading -->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=Atw9wWXlRi0\u0026t","type":"video","providerNameSlug":"youtube","responsive":true,"align":"full","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed alignfull is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">

</div><figcaption>私の推し猫さまたちのYouTubeチャンネルです。</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->