MediaWiki:Vector-2022.css - 版の履歴

2026年10月19日 (月) 09:13にHiratatomotakaによる

2026-10-19T09:13:43Z

← 古い版		2026年10月19日 (月) 18:13時点における版
2行目:		2行目:
	.skin-vector-2022 {		.skin-vector-2022 {
	/* 広い画面での幅：0.8＝80%、1＝100%、0.65＝65% */		/* 広い画面での幅：0.8＝80%、1＝100%、0.65＝65% */
	--wn-logo-scale: ~~0.8~~;		--wn-logo-scale: 1;

	/* スマホのロゴサイズ */		/* スマホのロゴサイズ */

2026年10月19日 (月) 09:13にHiratatomotakaによる

2026-10-19T09:13:05Z

← 古い版		2026年10月19日 (月) 18:13時点における版
2行目:		2行目:
	.skin-vector-2022 {		.skin-vector-2022 {
	/* 広い画面での幅：0.8＝80%、1＝100%、0.65＝65% */		/* 広い画面での幅：0.8＝80%、1＝100%、0.65＝65% */
	--wn-logo-scale: 1;		--wn-logo-scale: 0.8;

			/* スマホのロゴサイズ */
			--wn-logo-mobile-size: 60px;

			/* 中くらいの画面のロゴサイズ */
			--wn-logo-tablet-size: 135px;

			/* 画面端の内余白：メニューのはみ出しを防ぐ */
			--wn-page-padding: 24px;
	}		}

15行目:		24行目:
	.skin-vector-2022 .mw-logo-icon {		.skin-vector-2022 .mw-logo-icon {
	display: block;		display: block;
	width: ~~135px~~;		width: var(--wn-logo-tablet-size);
	height: ~~135px~~;		height: var(--wn-logo-tablet-size);
	flex-shrink: 0;		flex-shrink: 0;
	object-fit: contain;		object-fit: contain;
46行目:		55行目:
	@media screen and (max-width: 767px) {		@media screen and (max-width: 767px) {
	.skin-vector-2022 .mw-logo-icon {		.skin-vector-2022 .mw-logo-icon {
	width: ~~60px~~;		width: var(--wn-logo-mobile-size);
	height: ~~60px~~;		height: var(--wn-logo-mobile-size);
	}		}
	}		}
58行目:		67行目:
	var(--wn-menu-width) * var(--wn-logo-scale)		var(--wn-menu-width) * var(--wn-logo-scale)
	);		);
			}

			/* ページとヘッダーを、画面の横幅いっぱいに広げる */
			.skin-vector-2022 .mw-page-container,
			.skin-vector-2022 .vector-header-container {
			width: 100%;
			max-width: none;
			box-sizing: border-box;
			padding-left: var(--wn-page-padding);
			padding-right: var(--wn-page-padding);
			}

			/* 左右のメニューを保ち、本文の幅上限も解除 */
			.skin-vector-2022 .mw-content-container {
			min-width: 0;
			max-width: none;
			}

			.skin-vector-2022 .mw-body {
			grid-template-columns: minmax(0, 1fr) min-content;
	}		}

2026年10月19日 (月) 08:59にHiratatomotakaによる

2026-10-19T08:59:57Z

← 古い版		2026年10月19日 (月) 17:59時点における版
2行目:		2行目:
	.skin-vector-2022 {		.skin-vector-2022 {
	/* 広い画面での幅：0.8＝80%、1＝100%、0.65＝65% */		/* 広い画面での幅：0.8＝80%、1＝100%、0.65＝65% */
	--wn-logo-scale: ~~0.8~~;		--wn-logo-scale: 1;
	}		}

2026年10月19日 (月) 05:12にHiratatomotakaによる

2026-10-19T05:12:25Z

← 古い版		2026年10月19日 (月) 14:12時点における版
78行目:		78行目:
	}		}

	/* ~~説明文をロゴの下に置き、字間を広げて幅を揃える~~ */		/* 全角9文字の文字サイズを、ロゴ幅から計算 */
	.skin-vector-2022 .mw-logo::after {		.skin-vector-2022 .mw-logo::after {
	width: 100%;		width: 100%;
	max-width: none;		max-width: none;
	font-size: ~~min(16px,~~ calc(var(--wn-logo-size) / ~~10)~~);		font-size: calc(var(--wn-logo-size) / 9);
	line-height: ~~24px~~;		line-height: 1.5;
	~~text~~-~~align~~: ~~justify~~;		letter-spacing: 0;
	~~text~~-~~align~~-~~last~~: ~~justify~~;		font-kerning: none;
	text-~~justify~~: ~~inter~~-~~character~~;		font-variant-east-asian: full-width;
			text-align: center;
			white-space: nowrap;
	}		}

	/* ~~ロゴと説明文の高さに合わせ、左メニューだけ下げる~~ */		/* 説明文の高さ＝ロゴ幅÷9×1.5＝ロゴ幅÷6 */
	.skin-vector-2022 .vector-main-menu-container {		.skin-vector-2022 .vector-main-menu-container {
	padding-top: max(		padding-top: max(
	0px,		0px,
	calc(var(--wn-logo-size) - 50px + ~~32px~~)		calc(
			var(--wn-logo-size) - 50px
			+ 8px + var(--wn-logo-size) / 6
			)
	);		);
	}		}
	}		}

2026年10月19日 (月) 05:10にHiratatomotakaによる

2026-10-19T05:10:13Z

差分を表示

2026年10月19日 (月) 04:58にHiratatomotakaによる

2026-10-19T04:58:48Z

@@ 50行目: / 50行目: @@
      .skin-vector-2022 .vector-main-menu-container {
          padding-top: calc(var(--wn-logo-size) - 50px);
+     }
+}

2026年10月19日 (月) 04:55にHiratatomotakaによる

2026-10-19T04:55:36Z

← 古い版		2026年10月19日 (月) 13:55時点における版
26行目:		26行目:
	}		}

	~~/* 広い画面では、大きなロゴでヘッダーを押し広げない */~~
	@media screen and (min-width: 1200px) {		@media screen and (min-width: 1200px) {
			.skin-vector-2022 {
			/* 現在の左メニューの幅に合わせる */
			--wn-logo-size: calc(15.5em + 14px);
			}

	.skin-vector-2022 .mw-header .mw-logo {		.skin-vector-2022 .mw-header .mw-logo {
			width: var(--wn-logo-size);
			min-width: 0;
	height: 50px;		height: 50px;
			flex-shrink: 0;
	align-items: flex-start;		align-items: flex-start;
			margin-left: -14px;
			}

			.skin-vector-2022 .mw-logo-icon {
			width: var(--wn-logo-size);
			height: var(--wn-logo-size);
			flex-shrink: 0;
	}		}

	/* ~~ロゴと重ならないよう、左メニューだけ下げる~~ */		/* 大きくなったロゴの下に左メニューを配置 */
	.skin-vector-2022 .vector-main-menu-container {		.skin-vector-2022 .vector-main-menu-container {
	padding-top: ~~85px~~;		padding-top: calc(var(--wn-logo-size) - 50px);
	}		}
	}		}

2026年10月19日 (月) 04:52にHiratatomotakaによる

2026-10-19T04:52:39Z

@@ 23行目: / 23行目: @@
          width: 60px;
          height: 60px;
+     }
+}

2026年10月19日 (月) 04:46にHiratatomotakaによる

2026-10-19T04:46:59Z

← 古い版		2026年10月19日 (月) 13:46時点における版
2行目:		2行目:
	.skin-vector-2022 .mw-logo-icon {		.skin-vector-2022 .mw-logo-icon {
	display: block;		display: block;
	width: ~~100px~~;		width: 135px;
	height: ~~100px~~;		height: 135px;
	object-fit: contain;		object-fit: contain;
	margin-right: 0;		margin-right: 0;

Hiratatomotaka: ページの作成:「/* 画像全体を表示 / .skin-vector-2022 .mw-logo-icon { display: block; width: 100px; height: 100px; object-fit: contain; margin-right: 0; } / 横のサイト名・説明文は読み上げ用に残して隠す / .skin-vector-2022 .mw-logo-container { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } / スマホでは小さく表示 */ @media (max-width:…」

2026-10-19T04:44:26Z

ページの作成:「画像全体を表示: .skin-vector-2022 .mw-logo-icon { display: block; width: 100px; height: 100px; object-fit: contain; margin-right: 0; } 横のサイト名・説明文は読み上げ用に残して隠す: .skin-vector-2022 .mw-logo-container { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } スマホでは小さく表示: @media (max-width:…」

新規ページ

/* 画像全体を表示 */
.skin-vector-2022 .mw-logo-icon {
display: block;
width: 100px;
height: 100px;
object-fit: contain;
margin-right: 0;
}

/* 横のサイト名・説明文は読み上げ用に残して隠す */
.skin-vector-2022 .mw-logo-container {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}

/* スマホでは小さく表示 */
@media (max-width: 767px) {
.skin-vector-2022 .mw-logo-icon {
width: 60px;
height: 60px;
}
}