Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
swellのフルワイドについての質問
 
通知
すべてクリア

[解決済] swellのフルワイドについての質問

4 投稿
2 ユーザー
0 Likes
297 表示
syokotan
(@syokotan)
投稿: 3
メンバー
Topic starter
 
スクリーンショット 2024 07 04 17.08.30

フルワイドブロックについての質問です。

写真1枚目のオレンジとグレーの背景のところをフルワイドブロックを使用しています。

編集画面だとかなりいい感じなのですがプレビューにしたらフルワイドブロックがそのままフルワイドになってしまいます。

グーグル検索、その他ボーダーで1枚目の編集画面のようにならないか試してみたのですが、なかなかうまくいかず質問させていただきました。

オレンジとグレーのボックスを画像を埋め込む以外で作成する方法、もしくはフルワイドをカラム内に収める方法等ありましたらご教授願いたいです。

お手数おかけいたしますがよろしくお願いいたします。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, Googleなどでも検索してみました
利用中のSWELL本体のバージョン
2.10.0
利用中のWordPressバージョン
6.5.5
利用中のサーバー会社
xサーバー
利用中のプラグイン一覧

Public Post Preview
SEO SIMPLE PACK
WPForms Lite
XML Sitemap Generator for Google

 
投稿済 : 04/07/2024 5:28 pm
トピックタグ
syokotan
(@syokotan)
投稿: 3
メンバー
Topic starter
 

投稿主です写真が1枚しか投稿されていませんでしたので追加で写真を添付します。

こちらの写真が本文中に1枚目と表記している写真になります。

どうぞよろしくお願いいたします。

スクリーンショット 2024 07 04 17.08.11

 

 
投稿済 : 04/07/2024 5:36 pm
かんた
(@swell_mania)
投稿: 683
Https://webrent.xsrv.jp/
 

 

これでどうでしょう?

コードをコードエディター上にコピペしてみてください。

 

<!-- wp:loos/columns {"className":"is-style-clmn-shadow"} -->
<div class="swell-block-columns is-style-clmn-shadow"><div class="swell-block-columns__inner"><!-- wp:loos/column {"useCustomPadding":true,"padding":{"top":"0rem","left":"0rem","right":"0rem","bottom":"0rem"}} -->
<div class="swell-block-column swl-has-mb--s" style="--swl-clmn-pddng:0rem 0rem 0rem 0rem"><!-- wp:cover {"customOverlayColor":"#f97336","isUserOverlayColor":true,"minHeight":100,"isDark":false,"className":"u-mb-ctrl u-mb-0","layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light u-mb-ctrl u-mb-0" style="min-height:100px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#f97336"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"large"} -->
<p class="has-text-align-center has-white-color has-text-color has-link-color has-large-font-size">タイトル</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"overlayColor":"swl-gray","isUserOverlayColor":true,"minHeight":200,"className":"u-mb-ctrl u-mb-0","layout":{"type":"constrained"}} -->
<div class="wp-block-cover u-mb-ctrl u-mb-0" style="min-height:200px"><span aria-hidden="true" class="wp-block-cover__background has-swl-gray-background-color has-background-dim-100 has-background-dim"></span><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 {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|black"}}}},"textColor":"black"} -->
<p class="has-text-align-center has-black-color has-text-color has-link-color">ああああああああああああああああああああああああああああ</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column {"useCustomPadding":true,"padding":{"top":"0rem","left":"0rem","right":"0rem","bottom":"0rem"}} -->
<div class="swell-block-column swl-has-mb--s" style="--swl-clmn-pddng:0rem 0rem 0rem 0rem"><!-- wp:cover {"customOverlayColor":"#f97336","isUserOverlayColor":true,"minHeight":100,"isDark":false,"className":"u-mb-ctrl u-mb-0","layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light u-mb-ctrl u-mb-0" style="min-height:100px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#f97336"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"large"} -->
<p class="has-text-align-center has-white-color has-text-color has-link-color has-large-font-size">タイトル</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"overlayColor":"swl-gray","isUserOverlayColor":true,"minHeight":200,"className":"u-mb-ctrl u-mb-0","layout":{"type":"constrained"}} -->
<div class="wp-block-cover u-mb-ctrl u-mb-0" style="min-height:200px"><span aria-hidden="true" class="wp-block-cover__background has-swl-gray-background-color has-background-dim-100 has-background-dim"></span><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 {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|black"}}}},"textColor":"black"} -->
<p class="has-text-align-center has-black-color has-text-color has-link-color">ああああああああああああああああああああああああああああ</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:loos/column --></div></div>
<!-- /wp:loos/columns -->

一般ユーザー
SWELL初心者のために、ブロックパターンライブラリーを運営しています。

 
投稿済 : 04/07/2024 7:45 pm
syokotan
(@syokotan)
投稿: 3
メンバー
Topic starter
 

@swell_mania 

おはようございます。

早速試してみたところ自分の想像通りになりました。

お忙しい中大変助かりました。ありがとうございました!

 
投稿済 : 05/07/2024 10:14 am
共有: