/* * taxonomy-slabel.css * taxonomy-slabel.php (タームアーカイブページ) 専用のスタイル * taxonomy-video-names.css と同じレイアウト（動画リストとページネーション）を適用します */ /* ---------------------------------------------------- * ★★ メインタイトル (h1) のサイズ調整 (追加/修正) ★★ * ---------------------------------------------------- */ .site-main h1 { font-size: 1.6em; /* 💡 サイズを小さく (1.6em) */ margin-top: 0; margin-bottom: 5px; /* 作品数表示との間隔を調整 */ } /* ---------------------------------------------------- * ★★ 作品数表示のスタイル (追加) ★★ * ---------------------------------------------------- */ .slabel-post-count { /* taxonomy-slabel.php で使用するクラス名 */ margin-top: 5px; /* h1との間隔を調整 */ margin-bottom: 20px; font-size: 1.1em; /* 大きめに設定 */ color: #333; /* 濃い色に設定 */ text-align: left; font-weight: normal; /* 💡 太字を解除 */ } /* 各動画アイテムのレイアウト設定 */ .latest-videos-list article { /* 記事ごとに下線と余白を追加して区切りを明確に */ border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 15px; /* PC/デフォルト: 横並び */ display: flex; flex-direction: row; gap: 15px; align-items: flex-start; } /* サムネイルを囲む要素 (左側 150px) */ .latest-videos-list article .video-item-meta { flex-shrink: 0; width: 150px; } /* テキストコンテンツを囲む要素 (右側 残りの幅) */ .latest-videos-list article .video-item-content { flex-grow: 1; } /* 投稿タイトル (1行目) のスタイルを調整 */ .video-item-content .video-custom-info p:first-child { font-weight: bold; font-size: 1.1em; margin-top: 0; margin-bottom: 5px; } /* ID、女優、メーカー、公開日などのメタ情報の行間を調整 */ .video-item-content p { margin: 0 0 3px 0; line-height: 1.4; } /* ---------------------------------------------------- * ★★ 文字色とホバー効果の設定 ★★ * ---------------------------------------------------- */ /* 女優名 (2行目)、メーカー/レーベル名 (3行目)、公開日 (5行目) のデフォルト文字色を青 #0073aa に設定 */ .video-custom-info p:nth-child(2), .video-custom-info p:nth-child(3), .video-custom-info p:nth-child(5) { color: #0073aa; } /* リンク要素の下線をデフォルトで非表示に */ .latest-videos-list a { text-decoration: none; color: inherit; } /* タイトルリンクの色をデフォルトの黒に戻す (非ホバー時) */ .video-info-title a { color: #333; } /* タイトル、女優、メーカーのリンクにホバーした時の共通効果 */ .latest-videos-list a:hover { text-decoration: underline; } /* タイトルリンクにホバーした時の色を青 (#0073aa) に変更 */ .video-info-title a:hover { color: #0073aa; } /* 女優名とメーカー名、リリース日の中の aタグ（リンク）の文字色を青 (#0073aa) に設定 */ .video-custom-info p:nth-child(2) a, /* 女優リンク */ .video-custom-info p:nth-child(3) a, /* メーカー/レーベルリンク */ .video-custom-info p:nth-child(5) a { /* リリース日リンク */ color: #0073aa; } /* ---------------------------------------------------- * ★★ ページネーションのサイズ調整と中央寄せ (メイン設定) ★★ * ---------------------------------------------------- */ /* ページネーション全体 (nav.pagination) のスタイル */ .site-main > nav.pagination { /* 動画アイテムの区切り線と同じ色と太さを適用 */ border-bottom: 1px solid #ddd; /* 動画リストとの間に余白を持たせる */ padding-bottom: 15px; margin-bottom: 20px; /* サイズ調整: 全体のフォントサイズ (PC/タブレット) */ font-size: 0.85em; line-height: 1.2; } /* ページネーションの数字やテキストのリンク（/）のスタイルを調整 */ /* nav-links内のすべてのページ番号（と）に適用 */ .site-main > nav.pagination .nav-links .page-numbers { /* 💡 中央寄せと正方形化を強制 */ /* 中央寄せを強制 */ display: inline-flex !important; justify-content: center !important; align-items: center !important; /* サイズ固定で正方形 */ width: 30px; height: 30px; /* line-heightをリセットして垂直中央寄せを確保 */ line-height: 1 !important; /* パディングをゼロに設定（width/heightを優先）*/ padding: 0 !important; /* マージンは安全な1pxを維持 */ margin: 0 1px; /* ボーダーを追加して枠を明確にする */ border: 1px solid #ccc; border-radius: 2px; /* 角丸の調整 */ } /* 現在のページを示す数字（.current）のスタイルも統一 */ .site-main > nav.pagination .nav-links .current { /* 💡 中央寄せを強制 */ display: inline-flex !important; justify-content: center !important; align-items: center !important; /* line-heightをリセット */ line-height: 1 !important; /* サイズ固定で正方形 */ width: 30px; height: 30px; padding: 0 !important; /* paddingをリセット */ /* 色設定 */ border: 1px solid #0073aa; background-color: #e5f5ff; } /* ---------------------------------------------------- * ★★ レスポンシブ対応 (スマホレイアウトと画像サイズ最適化) ★★ * ---------------------------------------------------- */ @media (max-width: 767px) { /* 1. レイアウトを縦並び（上から下）に変更 */ .latest-videos-list article { flex-direction: column; gap: 5px; align-items: stretch; } /* 2. サムネイルエリア (上部) の幅を親要素に合わせる */ .latest-videos-list article .video-item-meta { width: 100%; margin-bottom: 5px; } /* 3. 画像全体を囲む タグをブロック要素にし、幅100%にする */ .latest-videos-list article .video-item-meta > a { display: block; width: 100%; max-width: 100%; margin: 0 auto; } /* 4. アスペクト比 3:2 のコンテナ設定 (Padding Hack) */ .thumbnail-aspect-ratio-box { position: relative; /* 子要素の絶対配置の基準 */ width: 100%; padding-top: 66.66%; /* (2 / 3) * 100 = 66.66...% で 3:2 を表現 */ overflow: hidden; /* 余白の色を白に変更 */ background-color: #fff; } /* 5. サムネイル画像自体を比率コンテナ内に収める */ /* タグと タグの両方にスタイルを適用 */ .thumbnail-aspect-ratio-box picture, .thumbnail-aspect-ratio-box img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; /* 比率を維持し、余白（左右の隙間）を作って収める */ object-fit: contain !important; /* その他のプロパティを念のため上書き */ max-width: 100% !important; display: block !important; } /* 6. テキストコンテンツ (下部) の幅は自動調整 */ .latest-videos-list article .video-item-content { flex-grow: 1; /* テキストを中央揃えにする */ text-align: center; } /* 投稿タイトルの上部のマージンを少し開ける（縦並びになったため） */ .video-item-content .video-custom-info p:first-child { margin-top: 5px; } /* 💡 作品数のモバイル中央寄せ (追加) */ .slabel-post-count { text-align: center; } /* ---------------------------------------------------- * ★★ ページネーションのスマホ向けサイズ調整 (特化) ★★ * ---------------------------------------------------- */ /* ページネーション全体をさらに小さく */ .site-main > nav.pagination { font-size: 0.7em; margin-bottom: 15px; /* 1行に収めるための調整 */ text-align: left; /* 左寄せ */ /* コンテナの幅を強制的に広げ、要素の隙間を吸収 */ margin-left: -5px; margin-right: -5px; } /* 💡 スマホでのページネーションサイズを拡大 (30px) */ .site-main > nav.pagination .nav-links .page-numbers { /* 中央寄せを強制 */ line-height: 1 !important; /* 垂直中央寄せを確保 */ /* サイズを 30px に統一 */ width: 30px; height: 30px; border-radius: 2px; } .site-main > nav.pagination .nav-links .current { /* 中央寄せを強制 */ line-height: 1 !important; /* 垂直中央寄せを確保 */ /* サイズを 30px に統一 */ width: 30px; height: 30px; } }