通知
すべてクリア
トピックスターター
XWRITE公式サイトのトップページで以下の箇所をどのように作成されているか教えて頂くことは可能でしょうか？
デザインが大変、見やすかったので、ぜひ参考にしたいと考えております。
①「エックスサーバー」のオリジナルWordPressテーマ
②誰でも簡単に使える理由
③XWRITEのブロック一覧
④XWRITEの機能・特長
Xwriteバージョン
3.0.10.1
WordPressバージョン
6.8.3
PHPバージョン
8.3
ガイドラインへの同意
「フォーラムガイドライン」に同意します。
個人情報の記載に関する確認
個人情報の記載がないことを確認しました。
投稿済 : 2025年11月21日 1:39 PM
kijitora_neko reacted
@spiceman さま
返答が遅くなり誠に申し訳ございません。
先日、公式サイトをリニューアルさせていただいたため、
ご質問時点（リニューアル前）のXwriteのトップページにつきまして
同じようなレイアウトのパターンをご用意しました。
以下の手順でご利用いただけますので、ぜひお試しください。
1.ソースコードをコピー
2.カスタムHTMLブロックを挿入
3.カスタムHTMLブロック内に1でコピーしたものをペースト
4.右上縦3点リーダー（︙）をクリックして「ブロックへ変換」を選択
あとは画像や文章部分についてはお好みで調整してください。
上記の操作後に添付画像の赤枠部分をクリックすると、ブロックの組み合わせを確認できます。
構造を見ていただくと、サイト作成の参考になるかと思います。
またリニューアルに伴い新たなブロックパターンも追加しましたので
そちらも参考にしていただければ幸いです。
ソースコードについて各項目ごとにこちらの後ろに添付いたします。
この投稿は2か月前ずつhamada(XWRITE開発)に変更されました
投稿済 : 2025年11月28日 7:44 PM
spiceman reacted
ソースコード
「エックスサーバー」のオリジナルWordPressテーマ(クリックでソースコードが表示されます)
<!-- wp:xwrite/section {"blockPadding":{"top":"4em","bottom":"5em"},"blockPaddingSp":{"top":"4em","bottom":"5em"},"overlayColor":"#4c93e3","metadata":{"name":"「エックスサーバー」のオリジナルWordPressテーマ"}} -->
<div class="wp-block-xwrite-section wp-block-xwrite xw-block-section alignfull section-min-height-auto" style="--section-padding-top:4em;--section-padding-bottom:5em;--section-padding-top-sp:4em;--section-padding-bottom-sp:5em;--section-background-color:#4c93e3;--text-color:#333333;--border-top-shape-color:var(--background-color);--border-bottom-shape-color:var(--background-color);--color-opacity:1"><span class="xw-block-section__overlay"></span><div class="xw-block-section__inner"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"section-mv-label","blockBottomMargin":"-3em","blockBottomMarginSp":"-2em"} -->
<p class="section-mv-label"><span style="--label-custom-color: #ffffff;" class="xwb-label-custom"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-xw-accent-blue-color">サンプルテキスト</mark></strong></span></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"40px"},"elements":{"link":{"color":{"text":"var:preset|color|xw-background-white"}}}},"textColor":"xw-background-white","blockDisplayDevice":["pc","tab"],"blockBottomMargin":"-0.5em"} -->
<p class="has-xw-background-white-color has-text-color has-link-color" style="font-size:40px"><strong><strong>Sample Page</strong> </strong><br><strong><strong>ここにタイトル</strong><strong>テキストが入ります</strong></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|xw-background-white"}}},"typography":{"fontSize":"28px"}},"textColor":"xw-background-white","blockDisplayDevice":["sp"],"blockBottomMarginSp":"-0.5em"} -->
<p class="has-xw-background-white-color has-text-color has-link-color" style="font-size:28px"><strong>Sample Page </strong><br><strong>ここにタイトルテキスト</strong></p>
<!-- /wp:paragraph -->
<!-- wp:image {"sizeSlug":"full","linkDestination":"none","blockBottomMarginSp":"2em","className":"is-style-normal"} -->
<figure class="wp-block-image size-full is-style-normal"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"28px"},"elements":{"link":{"color":{"text":"var:preset|color|xw-background-white"}}}},"textColor":"xw-background-white","blockBottomMargin":"-1em","blockBottomMarginSp":"-0.5em"} -->
<p class="has-text-align-center has-xw-background-white-color has-text-color has-link-color" style="font-size:28px"><strong>＼サンプルテキスト／</strong></p>
<!-- /wp:paragraph -->
<!-- wp:image {"sizeSlug":"full","linkDestination":"none","align":"center","className":"is-style-normal"} -->
<figure class="wp-block-image aligncenter size-full is-style-normal"><img alt=""/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|xw-background-white"}}}},"textColor":"xw-background-white","blockBottomMargin":"3em"} -->
<p class="has-xw-background-white-color has-text-color has-link-color">これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph -->
<!-- wp:xwrite/button {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-xwrite-button wp-block-xwrite"><!-- wp:xwrite/button-child {"iconType":"fas fa-shopping-cart","accentColor":"#333333","textColor":"#ffffff","borderRadius":"10","buttonPadding":{"top":"16px","right":"8px","bottom":"16px","left":"8px"},"isManual":true,"buttonSize":"220px","className":"xw-btn\u002d\u002dbuy-theme-mv"} -->
<div class="xw-block-button xw-block-button--normal hover_action xw-btn--buy-theme-mv" style="--border-radius:10px;--background-color:#333333;--accent-color:#333333;--text-color:#ffffff;--button-size:220px;--button-size-sp:100%;--button-pd-y:16px;--button-pd-x:8px" data-has-icon="true"><span class="xw-block-button__micro-copy"></span><a class="xw-block-button__link"><span class="xw-block-button__body"><i class="title-icon left fas fa-shopping-cart"></i><span class="xw-block-button__text has-text-align-center"><strong>ボタンのテキスト</strong></span></span></a></div>
<!-- /wp:xwrite/button-child -->
<!-- wp:xwrite/button-child {"iconType":"fas fa-shopping-cart","accentColor":"#f7ac50","textColor":"#ffffff","borderRadius":"10","buttonPadding":{"top":"16px","right":"8px","bottom":"16px","left":"8px"},"isManual":true,"buttonSize":"320px","className":"xw-btn\u002d\u002dbuy-theme-server-mv"} -->
<div class="xw-block-button xw-block-button--normal hover_action xw-btn--buy-theme-server-mv" style="--border-radius:10px;--background-color:#f7ac50;--accent-color:#f7ac50;--text-color:#ffffff;--button-size:320px;--button-size-sp:100%;--button-pd-y:16px;--button-pd-x:8px" data-has-icon="true"><span class="xw-block-button__micro-copy"></span><a class="xw-block-button__link"><span class="xw-block-button__body"><i class="title-icon left fas fa-shopping-cart"></i><span class="xw-block-button__text has-text-align-center"><strong>ボタンのテキスト</strong></span></span></a></div>
<!-- /wp:xwrite/button-child --></div>
<!-- /wp:xwrite/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:xwrite/section -->
誰でも簡単に使える理由(クリックでソースコードが表示されます)
<!-- wp:xwrite/section {"overlayColor":"#ffffff","gradientValue":"","metadata":{"name":"誰でも簡単に使える理由"}} -->
<div class="wp-block-xwrite-section wp-block-xwrite xw-block-section alignfull section-min-height-auto" style="--section-padding-top:5em;--section-padding-bottom:5em;--section-padding-top-sp:5em;--section-padding-bottom-sp:5em;--section-background-color:#ffffff;--text-color:#333333;--border-top-shape-color:var(--background-color);--border-bottom-shape-color:var(--background-color);--color-opacity:1"><span class="xw-block-section__overlay"></span><div class="xw-block-section__inner"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|xw-accent-blue"}}}},"textColor":"xw-accent-blue","fontSize":"medium","blockBottomMargin":"-1.5em","blockBottomMarginSp":"-1.5em"} -->
<p class="has-text-align-center has-xw-accent-blue-color has-text-color has-link-color has-medium-font-size">Sample Text</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"textAlign":"center","blockDisplayDevice":["pc","tab"],"blockBottomMargin":"1.5em","className":"is-style-normal","fontSize":"large"} -->
<h2 class="wp-block-heading has-text-align-center is-style-normal has-large-font-size">サンプルテキスト</h2>
<!-- /wp:heading -->
<!-- wp:heading {"textAlign":"center","blockDisplayDevice":["sp"],"blockBottomMarginSp":"1.5em","className":"is-style-normal","style":{"typography":{"fontSize":"28px"}}} -->
<h2 class="wp-block-heading has-text-align-center is-style-normal" style="font-size:28px">サンプルテキスト</h2>
<!-- /wp:heading -->
<!-- wp:columns {"blockBottomMargin":"5em"} -->
<div class="wp-block-columns"><!-- wp:column {"blockBottomMarginSp":"2em"} -->
<div class="wp-block-column"><!-- wp:group {"layout":{"type":"constrained"},"blockBottomMargin":"-2em","blockBottomMarginSp":"-2em"} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"full","linkDestination":"none","align":"center","className":"is-style-normal"} -->
<figure class="wp-block-image aligncenter size-full is-style-normal"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-normal","fontSize":"medium"} -->
<h3 class="wp-block-heading has-text-align-center is-style-normal has-medium-font-size">サンプルテキスト</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"blockBottomMarginSp":"2em"} -->
<div class="wp-block-column"><!-- wp:group {"layout":{"type":"constrained"},"blockBottomMargin":"-2em","blockBottomMarginSp":"-2em"} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"full","linkDestination":"none","align":"center","className":"is-style-normal"} -->
<figure class="wp-block-image aligncenter size-full is-style-normal"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-normal","fontSize":"medium"} -->
<h3 class="wp-block-heading has-text-align-center is-style-normal has-medium-font-size">サンプルテキスト</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"blockBottomMarginSp":"2em"} -->
<div class="wp-block-column"><!-- wp:group {"layout":{"type":"constrained"},"blockBottomMargin":"-2em","blockBottomMarginSp":"-2em"} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"full","linkDestination":"none","align":"center","className":"is-style-normal"} -->
<figure class="wp-block-image aligncenter size-full is-style-normal"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-normal","fontSize":"medium"} -->
<h3 class="wp-block-heading has-text-align-center is-style-normal has-medium-font-size">サンプルテキスト</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:paragraph {"align":"center","fontSize":"medium","blockDisplayDevice":["pc","tab"]} -->
<p class="has-text-align-center has-medium-font-size"><strong>サイトの魅力を伝えるための導入エリアです ここにはページの概要や、読者に最も伝えたい 核心的なメッセージを簡潔に記載します。</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"left","fontSize":"medium","blockDisplayDevice":["sp"]} -->
<p class="has-text-align-left has-medium-font-size"><strong>サイトの魅力を伝えるための導入エリアです ここにはページの概要や、読者に最も伝えたい 核心的なメッセージを簡潔に記載します。</strong></p>
<!-- /wp:paragraph -->
<!-- wp:xwrite/section {"blockAlign":"","blockPadding":{"top":"0em","bottom":"0em"},"blockPaddingSp":{"top":"0em","bottom":"0em"},"overlayColor":"","gradientValue":"","contentWidthType":"custom","customWidthValue":"800px","className":"xw-block-section-pd0"} -->
<div class="wp-block-xwrite-section wp-block-xwrite xw-block-section section-content-width-custom section-min-height-auto xw-block-section-pd0" style="--section-padding-top:0em;--section-padding-bottom:0em;--section-padding-top-sp:0em;--section-padding-bottom-sp:0em;--text-color:#333333;--border-top-shape-color:var(--background-color);--border-bottom-shape-color:var(--background-color);--color-opacity:1;--section-content-width:800px"><span class="xw-block-section__overlay"></span><div class="xw-block-section__inner"><!-- wp:group {"style":{"border":{"width":"2px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-width:2px"><!-- wp:video {"align":"center","style":{"spacing":{"padding":{"right":"0rem","left":"0rem","top":"0","bottom":"0"}}}} -->
<figure class="wp-block-video aligncenter" style="padding-top:0;padding-right:0rem;padding-bottom:0;padding-left:0rem"></figure>
<!-- /wp:video --></div>
<!-- /wp:group --></div></div>
<!-- /wp:xwrite/section -->
<!-- wp:xwrite/button {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-xwrite-button wp-block-xwrite"><!-- wp:xwrite/button-child {"iconType":"fas fa-arrow-right","iconPosition":"right-end","accentColor":"#333333","textColor":"#ffffff","borderRadius":"10","buttonPadding":{"top":"16px","right":"20px","bottom":"16px","left":"20px"},"isManual":true,"buttonSize":"440px","className":"xw-btn\u002d\u002dbuy-theme-mv"} -->
<div class="xw-block-button xw-block-button--normal hover_action xw-btn--buy-theme-mv" style="--border-radius:10px;--background-color:#333333;--accent-color:#333333;--text-color:#ffffff;--button-size:440px;--button-size-sp:100%;--button-pd-y:16px;--button-pd-x:20px" data-has-icon="true"><span class="xw-block-button__micro-copy"></span><a class="xw-block-button__link"><span class="xw-block-button__body xw-block-button__body--right-end"><i class="title-icon left fas fa-arrow-right"></i><span class="xw-block-button__text has-text-align-center"><strong>ボタンのテキスト</strong></span><i class="title-icon right fas fa-arrow-right"></i></span></a></div>
<!-- /wp:xwrite/button-child -->
<!-- wp:xwrite/button-child {"iconType":"fas fa-arrow-right","iconPosition":"right-end","accentColor":"#f7ac50","textColor":"#ffffff","borderRadius":"11","buttonPadding":{"top":"16px","right":"20px","bottom":"16px","left":"20px"},"isManual":true,"buttonSize":"440px","className":"xw-btn\u002d\u002dbuy-theme-server-mv"} -->
<div class="xw-block-button xw-block-button--normal hover_action xw-btn--buy-theme-server-mv" style="--border-radius:11px;--background-color:#f7ac50;--accent-color:#f7ac50;--text-color:#ffffff;--button-size:440px;--button-size-sp:100%;--button-pd-y:16px;--button-pd-x:20px" data-has-icon="true"><span class="xw-block-button__micro-copy"></span><a class="xw-block-button__link"><span class="xw-block-button__body xw-block-button__body--right-end"><i class="title-icon left fas fa-arrow-right"></i><span class="xw-block-button__text has-text-align-center"><strong>ボタンのテキスト</strong></span><i class="title-icon right fas fa-arrow-right"></i></span></a></div>
<!-- /wp:xwrite/button-child --></div>
<!-- /wp:xwrite/button --></div></div>
<!-- /wp:xwrite/section -->
XWRITEのブロック一覧(クリックでソースコードが表示されます)
<!-- wp:xwrite/section {"overlayColor":"#bae8f9","metadata":{"name":"XWRITEのブロック一覧"},"className":"section-gutenberg"} -->
<div class="wp-block-xwrite-section wp-block-xwrite xw-block-section alignfull section-min-height-auto section-gutenberg" style="--section-padding-top:5em;--section-padding-bottom:5em;--section-padding-top-sp:5em;--section-padding-bottom-sp:5em;--section-background-color:#bae8f9;--text-color:#333333;--border-top-shape-color:var(--background-color);--border-bottom-shape-color:var(--background-color);--color-opacity:1"><span class="xw-block-section__overlay"></span><div class="xw-block-section__inner"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|xw-link"}}}},"textColor":"xw-link","fontSize":"medium","blockBottomMargin":"-1.5em","blockBottomMarginSp":"-1.5em"} -->
<p class="has-text-align-center has-xw-link-color has-text-color has-link-color has-medium-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-xw-accent-blue-color">Sample Text</mark></p>
<!-- /wp:paragraph -->
<!-- wp:heading {"textAlign":"center","blockDisplayDevice":["pc","tab"],"className":"is-style-normal","fontSize":"large"} -->
<h2 class="wp-block-heading has-text-align-center is-style-normal has-large-font-size">サンプルテキスト</h2>
<!-- /wp:heading -->
<!-- wp:heading {"textAlign":"center","blockDisplayDevice":["sp"],"className":"is-style-normal","style":{"typography":{"fontSize":"28px"}}} -->
<h2 class="wp-block-heading has-text-align-center is-style-normal" style="font-size:28px">サンプルテキスト</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","blockDisplayDevice":["pc","tab"]} -->
<p class="has-text-align-center">これはレイアウト確認用のサンプルテキストです。 実際の内容に合わせて、自由に書き換えてご使用ください。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"left","blockDisplayDevice":["sp"]} -->
<p class="has-text-align-left">これはレイアウト確認用のサンプルテキストです。 実際の内容に合わせて、自由に書き換えてご使用ください。</p>
<!-- /wp:paragraph -->
<!-- wp:xwrite/section {"blockAlign":"","blockPadding":{"top":"0em","bottom":"0em"},"blockPaddingSp":{"top":"0em","bottom":"0em"},"overlayColor":"#bae8f9","contentWidthType":"custom","customWidthValue":"960px","className":"xw-block-section-pd0"} -->
<div class="wp-block-xwrite-section wp-block-xwrite xw-block-section section-content-width-custom section-min-height-auto xw-block-section-pd0" style="--section-padding-top:0em;--section-padding-bottom:0em;--section-padding-top-sp:0em;--section-padding-bottom-sp:0em;--section-background-color:#bae8f9;--text-color:#333333;--border-top-shape-color:var(--background-color);--border-bottom-shape-color:var(--background-color);--color-opacity:1;--section-content-width:960px"><span class="xw-block-section__overlay"></span><div class="xw-block-section__inner"><!-- wp:xwrite/boxmenu {"blockStyle":"xw-block-boxmenu\u002d\u002dfill","columnPC":5,"columnSP":3,"gap":"12px","iconSize":"2.5em","accentColor":"#ffffff","textColor":"#333333"} -->
<div class="wp-block-xwrite-boxmenu wp-block-xwrite xw-block-boxmenu xw-block-boxmenu--fill" style="--boxmenu-column-pc:5;--boxmenu-column-sp:3;--boxmenu-gap:12px;--boxmenu-icon-size:2.5em;--accent-color:#ffffff;--text-color:#333333;--border-radius:0px" data-gap="true" data-accent-gradient-color="false" data-flex-direction="column" data-text-position="corner"><div class="xw-block-boxmenu__body"><!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child -->
<!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child -->
<!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child -->
<!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child -->
<!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child -->
<!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child -->
<!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child -->
<!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child -->
<!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child -->
<!-- wp:xwrite/boxmenu-child {"accentColor":"","textColor":""} -->
<div class="xw-block-boxmenu__item" data-accent-gradient-color="false" data-url="false"><div class="xw-block-boxmenu__link"><div class="xw-block-boxmenu__figure"><i class="xw-block-boxmenu__icon fas fa-home"></i></div><span class="xw-block-boxmenu__text">サンプル</span></div></div>
<!-- /wp:xwrite/boxmenu-child --></div></div>
<!-- /wp:xwrite/boxmenu --></div></div>
<!-- /wp:xwrite/section -->
<!-- wp:xwrite/button {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-xwrite-button wp-block-xwrite"><!-- wp:xwrite/button-child {"iconPosition":"right-end","accentColor":"#f7ac50","textColor":"#ffffff","borderRadius":"10","buttonPadding":{"top":"16px","right":"20px","bottom":"16px","left":"20px"},"isManual":true,"buttonSize":"300px","className":"xw-btn\u002d\u002dbuy-theme-mv"} -->
<div class="xw-block-button xw-block-button--normal hover_action xw-btn--buy-theme-mv" style="--border-radius:10px;--background-color:#f7ac50;--accent-color:#f7ac50;--text-color:#ffffff;--button-size:300px;--button-size-sp:100%;--button-pd-y:16px;--button-pd-x:20px"><span class="xw-block-button__micro-copy"><span class="xwb-fs-18">＼ サンプルテキスト ／</span></span><a class="xw-block-button__link"><span class="xw-block-button__body"><span class="xw-block-button__text has-text-align-center"><strong><strong>ボタンのテキスト</strong></strong></span></span></a></div>
<!-- /wp:xwrite/button-child --></div>
<!-- /wp:xwrite/button --></div></div>
<!-- /wp:xwrite/section -->
XWRITEの機能・特長(クリックでソースコードが表示されます)
<!-- wp:xwrite/section {"overlayColor":"#ffffff","gradientValue":"","metadata":{"name":"XWRITEの機能・特長"}} -->
<div class="wp-block-xwrite-section wp-block-xwrite xw-block-section alignfull section-min-height-auto" style="--section-padding-top:5em;--section-padding-bottom:5em;--section-padding-top-sp:5em;--section-padding-bottom-sp:5em;--section-background-color:#ffffff;--text-color:#333333;--border-top-shape-color:var(--background-color);--border-bottom-shape-color:var(--background-color);--color-opacity:1"><span class="xw-block-section__overlay"></span><div class="xw-block-section__inner"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|xw-link"}}}},"textColor":"xw-link","fontSize":"medium","blockBottomMargin":"-1.5em","blockBottomMarginSp":"-1.5em"} -->
<p class="has-text-align-center has-xw-link-color has-text-color has-link-color has-medium-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-xw-accent-blue-color">Sample Text</mark></p>
<!-- /wp:paragraph -->
<!-- wp:heading {"textAlign":"center","blockDisplayDevice":["pc","tab"],"blockBottomMargin":"1.5em","className":"is-style-normal","fontSize":"large"} -->
<h2 class="wp-block-heading has-text-align-center is-style-normal has-large-font-size">サンプルテキスト</h2>
<!-- /wp:heading -->
<!-- wp:heading {"textAlign":"center","blockDisplayDevice":["sp"],"blockBottomMarginSp":"1.5em","className":"is-style-normal","style":{"typography":{"fontSize":"28px"}}} -->
<h2 class="wp-block-heading has-text-align-center is-style-normal" style="font-size:28px">サンプルテキスト</h2>
<!-- /wp:heading -->
<!-- wp:columns {"className":"type-panel-columns"} -->
<div class="wp-block-columns type-panel-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|70","right":"var:preset|spacing|70"}},"border":{"radius":"10px"},"color":{"background":"#eef3f8"}}} -->
<div class="wp-block-column has-background" style="border-radius:10px;background-color:#eef3f8;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--70)"><!-- wp:group {"layout":{"type":"constrained"},"blockBottomMargin":"-2em","blockBottomMarginSp":"-2.5em"} -->
<div class="wp-block-group"><!-- wp:image {"width":"80px","height":"70px","scale":"contain","sizeSlug":"full","linkDestination":"none","align":"center","className":"no-shadow"} -->
<figure class="wp-block-image aligncenter size-full is-resized no-shadow"><img alt="" style="object-fit:contain;width:80px;height:70px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-normal"} -->
<h3 class="wp-block-heading has-text-align-center is-style-normal">サンプルテキスト</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|70","right":"var:preset|spacing|70"}},"border":{"radius":"10px"},"color":{"background":"#eef3f8"}}} -->
<div class="wp-block-column is-vertically-aligned-top has-background" style="border-radius:10px;background-color:#eef3f8;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--70)"><!-- wp:group {"layout":{"type":"constrained"},"blockBottomMargin":"-2em","blockBottomMarginSp":"-2.5em"} -->
<div class="wp-block-group"><!-- wp:image {"width":"80px","height":"70px","scale":"contain","sizeSlug":"full","linkDestination":"none","align":"center","className":"no-shadow"} -->
<figure class="wp-block-image aligncenter size-full is-resized no-shadow"><img alt="" style="object-fit:contain;width:80px;height:70px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-normal"} -->
<h3 class="wp-block-heading has-text-align-center is-style-normal">サンプルテキスト</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"blockBottomMargin":"2em"} -->
<p>これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|70","right":"var:preset|spacing|70"}},"border":{"radius":"10px"},"color":{"background":"#eef3f8"}}} -->
<div class="wp-block-column has-background" style="border-radius:10px;background-color:#eef3f8;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--70)"><!-- wp:group {"layout":{"type":"constrained"},"blockBottomMargin":"-2em","blockBottomMarginSp":"-2.5em"} -->
<div class="wp-block-group"><!-- wp:image {"width":"80px","height":"70px","scale":"contain","sizeSlug":"full","linkDestination":"none","align":"center","className":"no-shadow"} -->
<figure class="wp-block-image aligncenter size-full is-resized no-shadow"><img alt="" style="object-fit:contain;width:80px;height:70px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-normal"} -->
<h3 class="wp-block-heading has-text-align-center is-style-normal">サンプルテキスト</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"className":"type-panel-columns"} -->
<div class="wp-block-columns type-panel-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|70","right":"var:preset|spacing|70"}},"border":{"radius":"10px"},"color":{"background":"#eef3f8"}}} -->
<div class="wp-block-column has-background" style="border-radius:10px;background-color:#eef3f8;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--70)"><!-- wp:group {"layout":{"type":"constrained"},"blockBottomMargin":"-2em","blockBottomMarginSp":"-2.5em"} -->
<div class="wp-block-group"><!-- wp:image {"width":"80px","height":"70px","scale":"contain","sizeSlug":"full","linkDestination":"none","align":"center","className":"no-shadow"} -->
<figure class="wp-block-image aligncenter size-full is-resized no-shadow"><img alt="" style="object-fit:contain;width:80px;height:70px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-normal"} -->
<h3 class="wp-block-heading has-text-align-center is-style-normal">サンプルテキスト</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|70","right":"var:preset|spacing|70"}},"border":{"radius":"10px"},"color":{"background":"#eef3f8"}}} -->
<div class="wp-block-column is-vertically-aligned-top has-background" style="border-radius:10px;background-color:#eef3f8;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--70)"><!-- wp:group {"layout":{"type":"constrained"},"blockBottomMargin":"-2em","blockBottomMarginSp":"-2.5em"} -->
<div class="wp-block-group"><!-- wp:image {"width":"80px","height":"70px","scale":"contain","sizeSlug":"full","linkDestination":"none","align":"center","className":"no-shadow"} -->
<figure class="wp-block-image aligncenter size-full is-resized no-shadow"><img alt="" style="object-fit:contain;width:80px;height:70px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-normal"} -->
<h3 class="wp-block-heading has-text-align-center is-style-normal">サンプルテキスト</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|70","right":"var:preset|spacing|70"}},"border":{"radius":"10px"},"color":{"background":"#eef3f8"}}} -->
<div class="wp-block-column has-background" style="border-radius:10px;background-color:#eef3f8;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--70)"><!-- wp:group {"layout":{"type":"constrained"},"blockBottomMargin":"-2em","blockBottomMarginSp":"-2.5em"} -->
<div class="wp-block-group"><!-- wp:image {"width":"80px","height":"70px","scale":"contain","sizeSlug":"full","linkDestination":"none","align":"center","className":"no-shadow"} -->
<figure class="wp-block-image aligncenter size-full is-resized no-shadow"><img alt="" style="object-fit:contain;width:80px;height:70px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-normal"} -->
<h3 class="wp-block-heading has-text-align-center is-style-normal">サンプルテキスト</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>これは文章の表示テストを行うためのサンプルテキストです。 ここには実際の内容に即した文章が入ります。 フォントのサイズや行間、文字の太さなどを確認するために 仮の文章を配置しています。 全体のバランスを確認し、必要に応じて修正を加えてください。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:xwrite/button {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-xwrite-button wp-block-xwrite"><!-- wp:xwrite/button-child {"iconType":"fas fa-arrow-right","iconPosition":"right-end","accentColor":"#f7ac50","textColor":"#ffffff","borderRadius":"10","buttonPadding":{"top":"16px","right":"20px","bottom":"16px","left":"20px"},"isManual":true,"buttonSize":"300px","className":"xw-btn\u002d\u002dbuy-theme-mv"} -->
<div class="xw-block-button xw-block-button--normal hover_action xw-btn--buy-theme-mv" style="--border-radius:10px;--background-color:#f7ac50;--accent-color:#f7ac50;--text-color:#ffffff;--button-size:300px;--button-size-sp:100%;--button-pd-y:16px;--button-pd-x:20px" data-has-icon="true"><span class="xw-block-button__micro-copy"></span><a class="xw-block-button__link" href="https://xwrite.jp/category/editor/"><span class="xw-block-button__body xw-block-button__body--right-end"><i class="title-icon left fas fa-arrow-right"></i><span class="xw-block-button__text has-text-align-center"><strong>ボタンのテキスト</strong></span><i class="title-icon right fas fa-arrow-right"></i></span></a></div>
<!-- /wp:xwrite/button-child --></div>
<!-- /wp:xwrite/button --></div></div>
<!-- /wp:xwrite/section -->
投稿済 : 2025年11月28日 8:10 PM
spiceman reacted
トピックスターター
@hamada 様
レイアウトパターンを用意して頂き、ありがとうございます。
問題なくブロックに変換することができました。
また、リニューアルに伴い新しいブロックパターンのご案内ありがとうございます。
こちらも参考にさせて頂きます。
投稿済 : 2025年11月30日 5:40 PM