コピペで使える「フルワイドページ」のサンプルコード

こちらのページ内のコードはブロックパターンにて使えるようになりました。（v1.6.5〜）

→ アップデートに関する記事はこちら

バージョン1.3〜追加された「フルワイド」固定ページテンプレートで使うことができるサンプルコードを紹介します。

ページのサンプルはこちらのページにて公開しております。

いずれはブロックエディタ側から選択できるようにしたいと思います。

フルワイド固定ページの使い方

フルワイド固定ページテンプレートを利用するには以下の手順で利用可能です。

固定ページを新規作成
ページ属性を「フルワイド」に変更

1 サンプルコードの使い方
- 1.1 サンプルの状態から色を変更するには？
2 サンプルブロック一覧

サンプルコードの使い方

このページでコピーしたサンプルコードは以下の手順で反映することができます。

設置したいコンテンツのサンプルコードをコピーする
固定ページ編集画面（ブロックエディター）の【ブロックの追加 > フォーマット】から「カスタムHTML」を追加してサンプルコードを貼り付ける
ブロックツールの【詳細設定 > ブロックへ変換】を実行する

コピーしたサンプルコードをそのまま貼り付けると「整形済みテキスト」として表示される場合があります。

サンプルの状態から色を変更するには？

グループ内の背景色や文字色は設定パネルの「色設定」から変更することができます。

トップツールバー左上の「**グループナビゲーション**」からグループを選択できます。

サンプルブロック一覧

サンプルブロック：カバー

サンプルコード

<!-- wp:cover {"url":"https://i.gyazo.com/22844181c359526ff7a4e349990b73e2.jpg","id":9,"dimRatio":80,"focalPoint":{"x":"0.22","y":"0.98"},"minHeight":700,"customGradient":"linear-gradient(300deg,rgb(156,236,242) 0%,rgb(30,71,100) 99%)","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-80 has-background-dim has-background-gradient" style="background-image:url(https://i.gyazo.com/22844181c359526ff7a4e349990b73e2.jpg);background-position:22% 98%;min-height:700px"><span aria-hidden="true" class="wp-block-cover__gradient-background" style="background:linear-gradient(300deg,rgb(156,236,242) 0%,rgb(30,71,100) 99%)"></span><div class="wp-block-cover__inner-container">

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:heading {"align":"center","level":1,"className":"is-style-stylenone"} -->
<h1 class="has-text-align-center is-style-stylenone"><span class="span-stk-fs-l">見出し(h1)</span></h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"is-style-default"} -->
<p class="has-text-align-center is-style-default">段落ブロックのテキストです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

<!-- wp:buttons {"align":"center","className":"is-style-default"} -->
<div class="wp-block-buttons aligncenter is-style-default"><!-- wp:button {"customGradient":"linear-gradient(135deg,rgb(245,94,94) 0%,rgb(255,186,186) 100%)","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-background" style="background:linear-gradient(135deg,rgb(245,94,94) 0%,rgb(255,186,186) 100%)">[icon class="fas fa-arrow-circle-right"] ボタン</a></div>
<!-- /wp:button -->

<!-- wp:button {"customTextColor":"#f55e5e","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#f55e5e"><strong>[icon class="fas fa-arrow-circle-right"]</strong> ボタン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->

サンプルブロック：2カラム

サンプルコード

<!-- wp:group {"customBackgroundColor":"#f0f9ff","customTextColor":"#2e6889","align":"full"} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#f0f9ff;color:#2e6889"><div class="wp-block-group__inner-container"><!-- wp:heading {"className":"is-style-stylenone"} -->
<h2 class="is-style-stylenone">見出し2(H2)</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>左カラム：段落ブロックのテキストです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>カラム内で複数の段落ブロックを作成できます。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>右カラム：段落ブロックのテキストです。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

サンプルブロック：メディアと文章（タイプ1）

サンプルコード

<!-- wp:group {"customBackgroundColor":"#ffffff","align":"full"} -->
<div class="wp-block-group alignfull has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container">

<!-- wp:heading {"className":"is-style-stylenone"} -->
<h2 class="is-style-stylenone">見出し2(H2)</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"align":"","mediaId":5289,"mediaType":"image","verticalAlignment":"top"} -->
<div class="wp-block-media-text is-stacked-on-mobile is-vertically-aligned-top"><figure class="wp-block-media-text__media"><img src="https://i.gyazo.com/473b3f3bf10d43a852c81d7f36c199cd.jpg" alt="" class="wp-image-5289"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…"} -->
<p>画像とテキストの組み合わせです。画像が空の場合は「置換」で新しい画像を設定してください。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>段落ブロックのテキストです。</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>番号付きリスト</li><li>番号付きリスト</li><li>番号付きリスト</li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:media-text --></div></div>
<!-- /wp:group -->

サンプルブロック：メディアと文章（タイプ2）

サンプルコード

<!-- wp:group {"customBackgroundColor":"#fff0f0","customTextColor":"#8a2e2f","align":"full"} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#fff0f0;color:#8a2e2f"><div class="wp-block-group__inner-container"><!-- wp:media-text {"align":"","mediaPosition":"right","mediaId":3484,"mediaType":"image"} -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://i.gyazo.com/5922c6ab82d24185d79ea3f3ed502917.jpg" alt="" class="wp-image-3484"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"className":"is-style-stylenone"} -->
<h2 class="is-style-stylenone">見出し2(H2)</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"placeholder":"コンテンツ…"} -->
<p>画像とテキストの組み合わせです。画像が空の場合は「置換」で新しい画像を設定してください。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>段落ブロックのテキストです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text --></div></div>
<!-- /wp:group -->

サンプルブロック：複数カラム

サンプルコード

<!-- wp:group {"customBackgroundColor":"#fcfcfc","align":"full"} -->
<div class="wp-block-group alignfull has-background" style="background-color:#fcfcfc"><div class="wp-block-group__inner-container"><!-- wp:heading {"align":"center","className":"is-style-stylenone"} -->
<h2 class="has-text-align-center is-style-stylenone">見出し2(H2)</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3,"className":"is-style-normal"} -->
<h3 class="is-style-normal">見出し3(H3)</h3>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":2345,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://i.gyazo.com/fa6580de96e10f554fd577bebef713a2.jpg" alt="" class="wp-image-2345"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4,"className":"is-style-stylenone"} -->
<h4 class="is-style-stylenone">見出し4(H4)</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>段落ブロックのテキストです。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":2344,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://i.gyazo.com/55a0dd4c64cd2188987da0c31c7743d1.jpg" alt="" class="wp-image-2344"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4,"className":"is-style-stylenone"} -->
<h4 class="is-style-stylenone">見出し4(H4)</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>段落ブロックのテキストです。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":2343,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://i.gyazo.com/b0a89a55af60a20c1d78bd789cccd76b.jpg" alt="" class="wp-image-2343"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4,"className":"is-style-stylenone"} -->
<h4 class="is-style-stylenone">見出し4(H4)</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>段落ブロックのテキストです。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:heading {"level":3,"className":"is-style-normal"} -->
<h3 class="is-style-normal">見出し3(H3)</h3>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":2345,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://i.gyazo.com/fbd6a5d751ef36f21a5ea8221a49df24.jpg" alt="" class="wp-image-2345"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4,"className":"is-style-stylenone"} -->
<h4 class="is-style-stylenone">見出し4(H4)</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>段落ブロックのテキストです。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":2344,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://i.gyazo.com/b785290a890995cc94511ed92318bde0.jpg" alt="" class="wp-image-2344"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4,"className":"is-style-stylenone"} -->
<h4 class="is-style-stylenone">見出し4(H4)</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>段落ブロックのテキストです。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

サンプルブロック：吹き出し

サンプルコード

<!-- wp:group {"customBackgroundColor":"#57bdcf","textColor":"very-light-gray","align":"full"} -->
<div class="wp-block-group alignfull has-very-light-gray-color has-text-color has-background" style="background-color:#57bdcf"><div class="wp-block-group__inner-container"><!-- wp:heading {"align":"center","className":"is-style-stylenone"} -->
<h2 class="has-text-align-center is-style-stylenone">見出し2(H2)</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>段落ブロックのテキストです。</p>
<!-- /wp:paragraph -->

<!-- wp:stk-plugin/voicecomment {"avatarUrl":"https://i.gyazo.com/a201c22483bc7a5f3bdc4ae2af8a586d.jpg","avatarId":5114} -->
<div class="wp-block-stk-plugin-voicecomment voice default l icon_default"><figure class="icon"><img class="voice_icon__img" src="https://i.gyazo.com/a201c22483bc7a5f3bdc4ae2af8a586d.jpg"/></figure><div class="voicecomment"><!-- wp:paragraph -->
<p>吹き出しブロックのテキストです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:stk-plugin/voicecomment -->

<!-- wp:stk-plugin/voicecomment {"avatarUrl":"https://i.gyazo.com/2dc486635413f7ead26c961c2626645a.jpg","avatarId":5114,"alignment":"r"} -->
<div class="wp-block-stk-plugin-voicecomment voice default r icon_default"><figure class="icon"><img class="voice_icon__img" src="https://i.gyazo.com/2dc486635413f7ead26c961c2626645a.jpg"/></figure><div class="voicecomment"><!-- wp:paragraph -->
<p>吹き出しブロックのテキストです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:stk-plugin/voicecomment --></div></div>
<!-- /wp:group -->

サンプルブロック：新着記事

サンプルコード

<!-- wp:group {"align":"full","style":{"color":{"background":"#ffffff"}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"align":"center","className":"is-style-stylenone"} -->
<h2 class="has-text-align-center is-style-stylenone">見出し2(H2)</h2>
<!-- /wp:heading -->
<!-- wp:stk-plugin/postlistnew /--></div></div>
<!-- /wp:group -->

サンプルブロック：CTA

サンプルコード

<!-- wp:group {"customBackgroundColor":"#ff8383","textColor":"very-light-gray","align":"full"} -->
<div class="wp-block-group alignfull has-very-light-gray-color has-text-color has-background" style="background-color:#ff8383"><div class="wp-block-group__inner-container"><!-- wp:heading {"align":"center","className":"is-style-stylenone"} -->
<h2 class="has-text-align-center is-style-stylenone">見出し2(H2)</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>段落ブロックのテキストです。</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"align":"center","className":"is-style-big"} -->
<div class="wp-block-buttons aligncenter is-style-big"><!-- wp:button {"textColor":"very-light-gray","gradient":"light-green-cyan-to-vivid-green-cyan","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-very-light-gray-color has-background has-light-green-cyan-to-vivid-green-cyan-gradient-background">ボタン <strong>[icon class="fas fa-chevron-circle-right"]</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"gradient":"blush-light-purple","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-background has-blush-light-purple-gradient-background">ボタン [icon class="fas fa-chevron-circle-right"]</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group -->