「MediaWiki:Common.css」の版間の差分

2026年2月18日 (水) 16:56時点における版

/* --- 1. Googleがロゴの前に割り込ませる「巨大な箱」を完全消去 --- */
.google-auto-placed, 
.vector-header-start > .google-auto-placed {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 2. PC版（1000px以上）のロゴサイズを200pxに固定 --- */
@media screen and (min-width: 1000px) {
    /* ロゴの外枠 */
    .vector-header-start {
        height: 200px !important; /* ここでヘッダーの高さを確保 */
    }

    .mw-logo, .vector-logo {
        width: 200px !important;
        height: 200px !important;
        max-width: 200px !important;
    }

    /* ロゴ画像そのもの */
    .mw-logo-icon, .mw-logo-wordmark, .mw-wiki-logo {
        width: 200px !important;
        height: 200px !important;
        max-width: 200px !important;
        background-size: contain !important;
    }
}

/* --- 3. モバイル版（999px以下）のロゴを100pxに固定 --- */
@media screen and (max-width: 999px) {
    .mw-logo, .vector-logo, .mw-logo-icon, .mw-logo-wordmark {
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
        background-size: contain !important;
    }
}

/* --- 4. 念のため広告が被らないようにヘッダーを最前面へ --- */
.vector-header-container {
    z-index: 1000 !important;
    background: white !important;
}

@@ 1行目: / 1行目: @@
-/* ==========================================
+/* --- 1. Googleがロゴの前に割り込ませる「巨大な箱」を完全消去 --- */
-. 全デバイス共通：ロゴの基本設定
+.google-auto-placed,
-   ========================================== */
+.vector-header-start > .google-auto-placed {
-#p-logo {
+     display: none !important;
-     display: flex !important;
+    height: 0 !important;
-     justify-content: center !important;
+     margin: 0 !important;
-     align-items: center !important;
+     padding: 0 !important;
 }
-#p-logo a {
+/* --- 2. PC版（1000px以上）のロゴサイズを200pxに固定 --- */
-    background-size: contain !important;
-    background-repeat: no-repeat !important;
-    background-position: center !important;
-    display: block !important;
-}
-/* ==========================================
-. PC用（1000px以上）：広告抹殺 ＆ ロゴ200px
-   ========================================== */
 @media screen and (min-width: 1000px) {
-     /* ページ上部の余白と広告を消す */
+     /* ロゴの外枠 */
-     html, body {
+     .vector-header-start {
-         margin-top: 0 !important;
+         height: 200px !important; /* ここでヘッダーの高さを確保 */
-        padding-top: 0 !important;
      }
-     #mw-head ins.adsbygoogle,
+     .mw-logo, .vector-logo {
-    #mw-navigation ins.adsbygoogle,
+         width: 200px !important;
-    #p-logo ins.adsbygoogle,
+         height: 200px !important;
-    #p-search ins.adsbygoogle,
+         max-width: 200px !important;
-    #p-personal ins.adsbygoogle,
-    .google-auto-placed,
-    div[class*="google-auto-placed"],
-    ins[data-vignette-loaded="true"] {
-         display: none !important;
-         height: 0 !important;
-         width: 0 !important;
-        overflow: hidden !important;
-        visibility: hidden !important;
-    }
-    /* ヘッダー要素を広告より前に出す */
-    #mw-head, #p-logo, #p-search, #p-personal {
-        position: relative !important;
-        z-index: 999999 !important;
-        background: white !important; /* 透け防止 */
      }
-     /* 【PC版ロゴ】枠ごとサイズを強制指定 */
+     /* ロゴ画像そのもの */
-     div#p-logo {
+     .mw-logo-icon, .mw-logo-wordmark, .mw-wiki-logo {
-        width: 200px !important;
-        height: 200px !important;
-        min-width: 200px !important;
-    }
-    div#p-logo a {
          width: 200px !important;
          height: 200px !important;
+        max-width: 200px !important;
+        background-size: contain !important;
      }
-    /* ロゴを小さくした分、コンテンツの左余白を調整（必要に応じて） */
-    #mw-panel { width: 200px !important; }
-    #content, #footer, #mw-head-base, #left-navigation { margin-left: 200px !important; }
 }
-/* ==========================================
+/* --- 3. モバイル版（999px以下）のロゴを100pxに固定 --- */
-. モバイル用（999px以下）：ロゴ100px
-   ========================================== */
 @media screen and (max-width: 999px) {
-     /* 【モバイル版ロゴ】 */
+     .mw-logo, .vector-logo, .mw-logo-icon, .mw-logo-wordmark {
-    #p-logo, #p-logo a {
          width: 100px !important;
          height: 100px !important;
-         min-width: 100px !important;
+         max-width: 100px !important;
+        background-size: contain !important;
      }
+}
+/* --- 4. 念のため広告が被らないようにヘッダーを最前面へ --- */
+.vector-header-container {
+    z-index: 1000 !important;
+    background: white !important;
 }