greenvista-fse


/* 投稿IDが 123 のページにのみ適用するCSSの例 */
.post-3857 {
/* 画面からはみ出す要素の最大幅を強制的に画面幅に合わせる */
max-width: 100% !important;
overflow-x: hidden !important;
}

.post-3857 img, .post-3857 table {
max-width: 100% !important;
height: auto !important;
}

/* 非常に大きな要素(例:強制的に幅が設定されたdiv)がある場合 */
.post-3857 * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* モバイルデバイスに適用するメディアクエリ */
@media (max-width: 768px) {
/* 1. H1、H2などの見出しをモバイル向けに縮小 */
h1[style*=”font-size: 2.2rem”],
div[style*=”font-size: 2.2rem”] {
font-size: 1.5rem !important; /* PCの2.2remをモバイルでは1.5remに */
/* !importantはインラインCSSを上書きするために使用。極力使わない方が良いがここでは便宜的に使用 */
}

h2[style*=”font-size: 1.6rem”],
div[style*=”font-size: 1.6rem”] {
font-size: 1.2rem !important; /* PCの1.6remをモバイルでは1.2remに */
}

/* 2. Pタグやボタンのフォントサイズを縮小 */
p[style*=”font-size: 1.1rem”] {
font-size: 1rem !important;
}

.cta-button {
font-size: 1.2rem !important; /* ボタンも小さく */
padding: 10px 25px !important;
}

/* 3. モバイルでのpaddingを調整(コンテンツが狭くなりすぎないように) */
div[style*=”padding: 20px”] {
padding: 10px !important;
}
div[style*=”padding: 25px”] {
padding: 15px !important;
}
}
/* 投稿IDが 123 のページ全体に対して強制的に適用するCSS */
/* 投稿IDはあなたのページに合わせて変更してください */
.post-3857 {
/* 1. ページ全体が横スクロールしないように強制的に制限 */
max-width: 100vw !important; /* ビューポート幅を超えるのを禁止 */
overflow-x: hidden !important; /* 横方向のスクロールバーを非表示 */
}

/* 2. 投稿内のすべての要素に対して、画面幅を超えることを禁止 */
/* これは非常に強力な措置で、意図しない影響が出る可能性もありますが、
固定幅が原因の問題を強制的に解決します。 */
.post-3857 * {
max-width: 100% !important;
box-sizing: border-box !important; /* パディングやボーダーが幅に含まれるように設定 */
}

/* 3. 画像や動画などのメディア要素の修正 */
.post-3857 img,
.post-3857 video,
.post-3857 iframe {
max-width: 100% !important;
height: auto !important; /* 縦横比を維持 */
}