/* * archive-video_content.css * archive-video_content.php (カスタム投稿タイプアーカイブ/日付フィルターページ) 専用のスタイル * taxonomy-maker.php と同じメインタイトル・作品数表示のスタイルを適用します。 */ /* ---------------------------------------------------- * ★★ メインタイトル (h1) のサイズ調整 ★★ * ---------------------------------------------------- */ .site-main h1.archive-main-title { font-size: 1.6em; /* 💡 修正点: taxonomy-maker.phpと統一 */ margin-top: 0; margin-bottom: 5px; } /* ---------------------------------------------------- * ★★ 作品数表示のスタイル (taxonomy-maker.php と統一) ★★ * ---------------------------------------------------- */ .archive-post-count { /* archive-video_content.php の作品数表示クラス */ margin-top: 5px; 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 に設定 */ /* archive-video_content.php の出力順序: 1.タイトル, 2.女優, 3.メーカー, 4.ID, 5.リリース日 */ .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; } /* 💡 修正点: 作品数のモバイル中央寄せ */ .archive-post-count { text-align: center; } /* 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; } /* ---------------------------------------------------- * ★★ ページネーションのスマホ向けサイズ調整 (特化) ★★ * ---------------------------------------------------- */ /* ページネーション全体をさらに小さく */ .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; } }