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

フォーラム

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

[解決済] サイト幅を指定幅より超えた時の背景色に関して

1 投稿
1 ユーザー
1 Likes
427 表示
Futoshi
(@futoshi)
投稿: 8
メンバー
Topic starter
 

質問失礼致します。

現在Webページ作成中なのですが、クライアントからの要望で

両サイドに白い余白が欲しいとの事で色々試してみたのですが

メインビジュアルは以下コードで出来ましたが、

@media print, screen and (min-width: 600px) {
.p-mainVisual {
 width: 980px;
 margin: auto;
}

その他のセクション背景色指定した場合背景色が横幅いっぱいになってしまいます。

以下の様な見た目は可能でしょうか?

例>サイト幅(980px)の背景はピンク980px以上より大きくなる時は、

越えた部分の左右両サイド背景色は白になる様なデザイン。

そもそもswellの基本設定で上記デザインは出来ますでしょうか?

 

ここ数日cssを色々試してみたのですが、上手くいかず質問です。

 

cssのカスタマイズ等はサポート外になると思うのですが、

もしデフォルトで出来る。であったり、cssでこの様に記述すれば出来るのであればご教示いただけると幸いです。

.swell-block-fullWide {
 width: 980px;
 margin: 0 auto;
}

ちなみに上記記述は試してみてみましたがmargin autoが効かず左寄せになります。

-------------------------------------------------------------------

【追記】

希望に近い設定があったので、記載しておきます。

カスタマイズ>サイト全体設定>基本デザイン>コンテンツの背景を白にするをオン

上記で解決しそうなので試してみようと思うのですが、

サイト幅を超える左右両サイド背景色を白になる様なデザインを作る際は、

上記方法でしょうか?それとも上記方法は何か別の用途に使うのでしょうか?

回答いただけると幸いです。

 

 

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました, プラグインを停止しても同じことが起こることを確認しました, デフォルトテーマ等、他のテーマでも同じことが起こることを確認しました, 自分で追加したコードに問題がないかチェック済みです, サポート範囲外だということを理解しているが助けが欲しい(有料サポートしてくれる方を探したい)
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.7.2.1
利用中のPHPバージョン
8.1.14
OS
windows10
利用中のWordPressバージョン
6.1.1
利用中のサーバー会社
ロリポップ
ブラウザ
chrome
利用中のプラグイン一覧

Adminimize (v.1.11.9)
Combine Social Photos | Still BE (v.0.11.3)
Contact Form 7 (v.5.7.2)
Contact Form 7 Multi-Step Forms (v.4.1.92)
Copy & Delete Posts (v.1.3.7)
Custom Login Page Customizer (v.2.1.9)
EWWW Image Optimizer (v.6.9.3)
Flexible Table Block (v.2.8.0)
SEO SIMPLE PACK (v.3.1.2)
Site Kit by Google (v.1.90.1)
Smash Balloon Instagram Feed (v.6.1)
Snow Monkey Editor (v.9.1.0)
SVG Support (v.2.5.5)
WP Multibyte Patch (v.2.9)
WP Sitemap Page (v.1.9.2)
XML Sitemap & Google News (v.5.3.3)
XO Slider (v.3.4.1)
zipaddr-jp (v.1.35)

This topic was modified 2年前 by Futoshi
 
投稿済 : 07/01/2023 5:35 pm
mitsushige reacted
共有: