SWELLレスポンシブ対応

2023.09.05

まずは以下の動画でレスポンシブ対応の書き方について確認してください。

メインビジュアルのスマホ対応

「外観」> 「カスタマイズ」> 「追加CSS」に以下のコードを貼り付けます。
文字サイズと表示位置を調整しています。

/* メインビジュアルSP */
@media (max-width:782px) {
	.p-mainVisual__textLayer {
  justify-content: flex-start;
	margin-top:48px;
  }
	.top-text {
	font-size:3rem;
  }
}

『ひなた鍼灸整骨院の特徴』部分に下線を引く

①「01 経験豊富な施術師」をクリックした状態で、「追加CSSクラス」欄に “feature-ttl”というクラスを追加してください。

「外観」> 「カスタマイズ」> 「追加CSS」に以下のコードを貼り付けます。

/* ひなた鍼灸整骨院の特徴 */
.feature-ttl {
	border-bottom:1px solid #000 !important;
}

『当院のサービス』部分の画像を100%表示にする

「外観」> 「カスタマイズ」> 「追加CSS」に以下のコードを貼り付けます。

/* 当院のサービス */
.service-list li {
		width: 48% !important;
    border: 1px solid #aaa;
    box-shadow: 0px 3px 3px #aaa;
}

.-type-card {
	gap:20px;
}

.p-postList__title {
	text-align:center;
}

.-type-card, .p-postList__item {
	padding:0 !important;
}

.p-postList__body {
	padding:1em !important;
}

.p-postList__thumb  {
	border-radius:0% !important;
}

以下はスマホ用のコードです。

/* 当院のサービスSP */
@media (max-width:782px) {
.service-list li {
		width: 100% !important;
    box-shadow: 0px 3px 3px #aaa;
    }
.-type-card {
	gap:0px;
  }
}
ホーム