通知
すべてクリア
トピックスターター
メインビジュアルを固定ページのセクション（背景）として設定する場合
Xwriteでは強制的に中央に段落や見出しとして差し込む形（添付画像の左下）でしょうか。
メインビジュアルの画像によっては左上や左下にスペースがあるものが多く、視認性を高めるためにも文字の配置が自由にできたら嬉しいです。
参考画像のように左下等にXwriteでも設定する方法があれば知りたいです。
なければ改善要望としてお願いいたします。
Xwriteバージョン
3.0.10.1
WordPressバージョン
6.8.3
PHPバージョン
8.3
ガイドラインへの同意
「フォーラムガイドライン」に同意します。
個人情報の記載に関する確認
個人情報の記載がないことを確認しました。
投稿済 : 2025年11月6日 1:39 PM
@mail_info さま
いつもお世話になっております。
ご質問いただきましてありがとうございます。
返信が遅くなり申し訳ございません。
1. コードを書かずにブロックだけで調整する方法
2. CSSを使った調整方法
について以下で解説させていただきます。
投稿済 : 2025年11月14日 8:36 PM
Mail_Info reacted
1.コードを書かずにブロックだけで調整する方法
1.ソースコードをコピー
2.追加したい場所に「カスタムHTML」ブロックを挿入し、コピーした内容を張り付け、ブロックに変換
3.「段落ブロック」部分を調整し、お好みに応じて周りのブロックを調整
4.高さの調整には「スペーサー」ブロックを追加してお好みに応じて高さを変更してください。
5.セクションブロック内部の横幅の調整についてはセクションブロックのコンテンツ幅の「カスタム」で調整することができます。お好みに応じて変更してください。
サンプルソースコード
<!-- wp:xwrite/section {"blockPadding":{"top":"0em","bottom":"0em"},"blockPaddingSp":{"top":"0em","bottom":"0em"},"overlayColor":"#333333","contentWidthType":"custom","customWidthValue":"1500px","sectionMinHeightType":"max"} -->
<div class="wp-block-xwrite-section wp-block-xwrite xw-block-section alignfull section-content-width-custom section-min-height-max" style="--section-padding-top:0em;--section-padding-bottom:0em;--section-padding-top-sp:0em;--section-padding-bottom-sp:0em;--section-background-color:#333333;--text-color:#333333;--border-top-shape-color:var(--background-color);--border-bottom-shape-color:var(--background-color);--color-opacity:1;--section-content-width:1500px"><span class="xw-block-section__overlay"></span><div class="xw-block-section__inner"><!-- wp:group {"layout":{"type":"grid","columnCount":3,"minimumColumnWidth":null}} -->
<div class="wp-block-group"><!-- wp:paragraph {"backgroundColor":"xw-background-red"} -->
<p class="has-xw-background-red-background-color has-background">サンプルのテキストです</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"backgroundColor":"xw-background-white"} -->
<p class="has-xw-background-white-background-color has-background">サンプルのテキストです</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"backgroundColor":"xw-background-white"} -->
<p class="has-xw-background-white-background-color has-background">サンプルのテキストです</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"layout":{"type":"grid","columnCount":3,"minimumColumnWidth":null}} -->
<div class="wp-block-group"><!-- wp:paragraph {"backgroundColor":"xw-background-white"} -->
<p class="has-xw-background-white-background-color has-background">サンプルのテキストです</p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"backgroundColor":"xw-background-white"} -->
<p class="has-xw-background-white-background-color has-background">サンプルのテキストです</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"layout":{"type":"grid","columnCount":3,"minimumColumnWidth":null}} -->
<div class="wp-block-group"><!-- wp:paragraph {"backgroundColor":"xw-background-white"} -->
<p class="has-xw-background-white-background-color has-background">サンプルのテキストです</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"backgroundColor":"xw-background-white"} -->
<p class="has-xw-background-white-background-color has-background">サンプルのテキストです</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"backgroundColor":"xw-background-white"} -->
<p class="has-xw-background-white-background-color has-background">サンプルのテキストです</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:xwrite/section -->
この投稿は2か月前 3回ずつhamada(XWRITE開発)に変更されました
投稿済 : 2025年11月14日 8:40 PM
Mail_Info reacted
2.CSSを使った調整方法
1.セクションブロックに「高度な設定」の追加クラスを設定する（下記ソースコードのサンプルでは「block-edit」とします）
2.下記CSSを「インラインCSS」に追加(例では「左下」に配置)
.block-edit .xw-block-section__inner {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: flex-end; /* 上下の位置を決める */
align-items: flex-start; /* 左右左右の位置を決める */
}
位置調整について下記で設定できます。
・上下の位置を決める設定値について
上：flex-start
上下中央：center
下：flex-end
・左右の位置を決める設定値について
左：flex-start
左右中央：center
右：flex-end
3.必要に応じてスペーサーブロックを使って高さを調整
サンプルコード
<!-- wp:xwrite/section {"blockPadding":{"top":"0em","bottom":"0em"},"blockPaddingSp":{"top":"0em","bottom":"0em"},"blockMinHight":"600px","blockMinHightSp":"600px","overlayColor":"#333333","customWidthValue":"1500px","sectionMinHeightType":"max","className":"block-edit"} -->
<div class="wp-block-xwrite-section wp-block-xwrite xw-block-section alignfull section-min-height-max block-edit" style="--section-padding-top:0em;--section-padding-bottom:0em;--section-padding-top-sp:0em;--section-padding-bottom-sp:0em;--section-background-color:#333333;--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 {"className":"block-edit","backgroundColor":"xw-background-white"} -->
<p class="block-edit has-xw-background-white-background-color has-background">サンプルのテキストです</p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:xwrite/section -->
以上の手順でインナーボックス内でお好みの位置に配置することができます。
お好みに応じて調整いただけますと幸いです。
この投稿は2か月前 3回ずつhamada(XWRITE開発)に変更されました
投稿済 : 2025年11月14日 8:47 PM
Mail_Info reacted
トピックスターター
お返事ありがとうございます。
なるほど、色々な実現方法があるのですね。
スマホでの表示がどうなるかも気になるので両パターン試してみようと思います。
いつも迅速な対応に感謝します。
投稿済 : 2025年11月17日 6:36 PM