/* CLS改善用CSS - モバイル向け最適化 */ /* 作成日: 2025-01-23 */ /* =================================== 1. ビデオコンテナのアスペクト比固定 =================================== */ #video-box { position: relative; width: 100%; /* 16:9のアスペクト比を維持 */ aspect-ratio: 16 / 9; background-color: #000; /* ビデオ読み込み前の背景色 */ } #video-box > .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* =================================== 2. 画像コンテナのアスペクト比予約 =================================== */ /* サンプル画像用（4:3比率） */ .sample-image-container { position: relative; width: 120px; aspect-ratio: 4 / 3; background-color: #f0f0f0; display: inline-block; } /* パッケージ画像用（800:538比率） */ .package-image-container { position: relative; width: 100%; max-width: 800px; aspect-ratio: 800 / 538; background-color: #f0f0f0; } /* 女優画像用（正方形） */ .actress-image-container { position: relative; width: 125px; aspect-ratio: 1 / 1; background-color: #f0f0f0; display: inline-block; } /* =================================== 3. 広告スペースの事前確保 =================================== */ /* モバイル広告コンテナ */ .mobile-ad-container { min-height: 250px; /* 一般的な広告サイズ */ width: 100%; background-color: #f9f9f9; text-align: center; position: relative; } /* PC広告コンテナ（DTI広告用） */ .pc-ad-container { min-height: 90px; width: 100%; text-align: center; position: relative; } /* =================================== 4. Font Awesome星評価の事前スタイル =================================== */ .star-rating { display: inline-block; min-width: 120px; /* 星5つ分の最小幅を確保 */ height: 1.2em; line-height: 1.2em; /* 親要素の行の高さを明示 */ white-space: nowrap; vertical-align: middle; /* 「レビュー：」テキストとの縦位置を揃える */ } .star-rating i { /* アイコンフォント読み込み前のフォールバック */ display: inline-block; width: 1em; height: 1em; margin-right: 2px; background-color: #ddd; vertical-align: middle; } /* Font Awesome読み込み後 */ .star-rating i.fas, .star-rating i.far { background-color: transparent; vertical-align: middle !important; line-height: 1 !important; } /* =================================== 5. レイアウトシフト防止用の汎用クラス =================================== */ /* 画像の最小高さを保証 */ img.cls-fix { min-height: 50px; background-color: #f0f0f0; } /* 遅延読み込み要素用プレースホルダー */ .lazy-placeholder { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* =================================== 6. モバイル専用の最適化 =================================== */ @media screen and (max-width: 480px) { /* モバイルでのビデオサイズ調整 */ #video-box { aspect-ratio: 16 / 9; max-height: 50vh; /* ビューポートの50%まで */ } /* モバイル広告の固定高さ */ .mobile-ad-container { min-height: 250px; margin: 10px 0; } /* サンプル画像のグリッド表示 */ .sample-images-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .sample-image-item { width: 100%; height: 100px; /* 固定高さで揃える */ overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f5f5f5; } .sample-image-item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .sample-images-grid img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } } /* =================================== 7. Critical CSS - インライン化推奨 =================================== */ /* 以下のCSSは内にインライン化することを推奨 */ /* */ /* =================================== 8. スマホ版Q&A余白調整 =================================== */ @media screen and (max-width: 480px) { /* Q&Aボックスの下部余白を縮小 */ section > div > div[style*="background: white"] { padding-bottom: 1px !important; margin-bottom: 7px !important; /* Q&Aボックス間の余白を半分に（15px→7px） */ } /* A部分の下部余白を縮小 */ section > div > div[style*="background: white"] > div[style*="padding-left"] { padding-bottom: 2px !important; } } /* =================================== 9. モバイル広告（adnico）のCLS対策 =================================== */ @media screen and (max-width: 480px) { /* * 重要: test.cssでは.mb_ad01にmin-height: 680pxが設定されているが、 * これはPC用DTI広告のサイズ。モバイルではadnico広告（300x250）を * 使用するため、モバイル専用の高さ指定で上書きする。 * * CLS計算: 250px / 667px (iPhone 8 viewport) ≈ 0.37 * この設定により、広告読み込み前にスペースを確保し、 * レイアウトシフトを防ぐ。 */ .mb_ad01 { min-height: 250px !important; } /* 広告コンテナ内部のdivにも高さを明示的に指定 */ .mb_ad01 > div { min-height: 250px; display: block; } } /* =================================== 10. フッター関連のCLS対策 =================================== */ /* スマホでもフッタークレジットを表示 */ @media screen and (max-width:900px) { #footermenu { display: block !important; } } /* スマホでフッター前の余白を最適化（広告削除後の調整） */ @media screen and (max-width:480px) { /* bodyの下部余白を削除してfooterで制御 */ body { padding-bottom: 0 !important; } /* footer自体に上部マージンを設定してスペースを確保 */ footer { margin-top: 20px !important; } /* フッタークレジット画像のCLS対策 */ #footermenu img { width: 135px; height: auto; display: inline-block; vertical-align: middle; } } /* =================================== 11. /list/index.php用のモバイル最適化 =================================== */ /* モバイル版フッター位置調整 */ @media screen and (max-width: 480px) { /* 広告削除後の余分なpadding-bottomを削除 */ body { padding-bottom: 0 !important; } /* コンテンツの最小高さを確保してフッターを下部に */ #contents { min-height: calc(100vh - 50px - 100px); /* 100vh - header高さ - footer概算高さ */ padding-bottom: 0 !important; } /* submenuクラスのmargin-bottomを削除 */ #sub .submenu, #side .submenu { margin-bottom: 0 !important; } /* バストサイズから探すセクションの後の隙間を削除 */ nav .submenu:last-child { margin-bottom: 0 !important; } /* navとfooter間の余分なマージンを削除 */ nav { margin-bottom: 0 !important; } #sub nav, #side nav { margin-bottom: 0 !important; } /* #subの下部余白も削除 */ #sub { margin-bottom: 0 !important; padding-bottom: 0 !important; } } @media screen and (max-width: 900px) { /* 不要な余白を削除 */ #sub { padding-bottom: 0; } }