「MediaWiki:Common.css」の版間の差分
編集の要約なし |
編集の要約なし |
||
| 2,342行目: | 2,342行目: | ||
top: 113px !important; | top: 113px !important; | ||
} | } | ||
} | |||
/* ========================================================= | |||
Infobox 外部画像スライダー | |||
========================================================= */ | |||
.ts-infobox-slider { | |||
position: relative !important; | |||
display: block !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
box-sizing: border-box !important; | |||
overflow: hidden !important; | |||
} | |||
/* ========================================================= | |||
スライド領域 | |||
========================================================= */ | |||
.ts-infobox-slider__track { | |||
display: flex !important; | |||
flex-direction: row !important; | |||
flex-wrap: nowrap !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
overflow-x: auto !important; | |||
overflow-y: hidden !important; | |||
box-sizing: border-box !important; | |||
scroll-snap-type: x mandatory; | |||
scroll-behavior: smooth; | |||
-webkit-overflow-scrolling: touch; | |||
overscroll-behavior-x: contain; | |||
/* スクロールバーは非表示 */ | |||
scrollbar-width: none; | |||
} | |||
.ts-infobox-slider__track::-webkit-scrollbar { | |||
display: none; | |||
} | |||
/* ========================================================= | |||
1枚のスライド | |||
========================================================= */ | |||
.ts-infobox-slider__slide { | |||
position: relative !important; | |||
display: block !important; | |||
flex: 0 0 100% !important; | |||
width: 100% !important; | |||
min-width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
box-sizing: border-box !important; | |||
scroll-snap-align: start; | |||
scroll-snap-stop: always; | |||
background: #fff; | |||
} | |||
/* ========================================================= | |||
画像表示領域 | |||
========================================================= */ | |||
.ts-infobox-slider__imagebox { | |||
display: flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
width: 100% !important; | |||
/* | |||
* Infobox内なのでギャラリーより少しコンパクト | |||
*/ | |||
height: 300px !important; | |||
min-height: 300px !important; | |||
max-height: 300px !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
background: #f8f9fa !important; | |||
overflow: hidden !important; | |||
box-sizing: border-box !important; | |||
line-height: 0 !important; | |||
font-size: 0 !important; | |||
} | |||
/* ========================================================= | |||
MediaWikiによるラッパー対策 | |||
========================================================= */ | |||
.ts-infobox-slider__imagebox p, | |||
.ts-infobox-slider__imagebox a, | |||
.ts-infobox-slider__imagebox span { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
/* ========================================================= | |||
画像本体 | |||
絶対にトリミングしない | |||
========================================================= */ | |||
.ts-infobox-slider__imagebox img { | |||
display: block !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
max-width: 100% !important; | |||
max-height: 100% !important; | |||
min-width: 0 !important; | |||
min-height: 0 !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
/* | |||
* 元画像全体を表示する。 | |||
* cover は使用しない。 | |||
*/ | |||
object-fit: contain !important; | |||
object-position: center center !important; | |||
background: transparent !important; | |||
box-sizing: border-box !important; | |||
} | |||
/* ========================================================= | |||
各画像の説明 | |||
========================================================= */ | |||
.ts-infobox-slider__caption { | |||
display: block !important; | |||
width: 100% !important; | |||
margin: 0 !important; | |||
padding: 7px 8px 9px !important; | |||
background: #fff; | |||
color: #202122; | |||
font-size: 11px !important; | |||
line-height: 1.5 !important; | |||
text-align: left; | |||
box-sizing: border-box !important; | |||
overflow-wrap: anywhere; | |||
} | |||
.ts-infobox-slider__source { | |||
color: #54595d; | |||
font-size: 10px; | |||
line-height: 1.45; | |||
} | |||
/* ========================================================= | |||
左右ボタン | |||
========================================================= */ | |||
.ts-infobox-slider__nav { | |||
position: absolute !important; | |||
/* | |||
* 300pxの画像枠中央 | |||
*/ | |||
top: 150px !important; | |||
z-index: 20 !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
width: 32px !important; | |||
height: 32px !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 1px solid rgba(84, 89, 93, 0.35) !important; | |||
border-radius: 50% !important; | |||
background: rgba(255, 255, 255, 0.88) !important; | |||
color: #54595d !important; | |||
font-family: Arial, sans-serif; | |||
font-size: 22px !important; | |||
font-weight: normal; | |||
line-height: 1 !important; | |||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); | |||
cursor: pointer; | |||
transform: translateY(-50%); | |||
} | |||
.ts-infobox-slider__prev { | |||
left: 5px !important; | |||
} | |||
.ts-infobox-slider__next { | |||
right: 5px !important; | |||
} | |||
.ts-infobox-slider__nav:hover { | |||
background: #fff !important; | |||
color: #202122 !important; | |||
} | |||
.ts-infobox-slider__nav:disabled { | |||
opacity: 0.25 !important; | |||
cursor: default; | |||
} | |||
/* 1枚しかない場合はナビ不要 */ | |||
.ts-infobox-slider--single .ts-infobox-slider__nav { | |||
display: none !important; | |||
} | |||
/* ========================================================= | |||
スマートフォン | |||
========================================================= */ | |||
@media screen and (max-width: 720px) { | |||
.ts-infobox-slider__imagebox { | |||
height: 280px !important; | |||
min-height: 280px !important; | |||
max-height: 280px !important; | |||
} | |||
.ts-infobox-slider__nav { | |||
top: 140px !important; | |||
} | |||
} | } | ||
2026年9月2日 (水) 10:16時点における版
/* ここに記述したCSSはすべての外装に反映されます */
/**
* Styling for links generated by [[MediaWiki:Edittools]] in WikimediaUI inspired theme.
* @source https://www.mediawiki.org/wiki/Extension:CharInsert#Styling
* @updated 2020-03-17
*/
.mw-charinsert-buttons {
margin-top: 8px;
border: 1px solid #c8ccd1;
padding: 2px 4px 4px;
font-size: 1.1em;
text-align: center;
}
.mw-charinsert-buttons a {
background-color: #f8f9fa !important;
color: #202122;
border: thin #36c outset;
padding: 0 1px 2px;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
}
.mw-charinsert-buttons a:hover {
background-color: #fff;
color: #404244;
}
.mw-charinsert-buttons a:active {
background-color: #c8ccd1;
border-style: inset;
}
.client-js .mw-edittools-section {
display: inline;
}
.client-js .mw-edittools-section input[type="button"] {
background-color: #f8f9fa;
color: #202122;
margin-left: 1px;
border-radius: 2px;
padding: 1px 6px;
font-size: 0.9em;
/* Apply pointer cursor to all interactive elements. */
cursor: pointer;
}
.client-js .mw-edittools-section input[type="button"]:hover {
background-color: #fff;
color: #404244;
}
.client-js .mw-edittools-section input[type="button"]:active {
background-color: #c8ccd1;
color: #000;
}
.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 1px #afeeee;
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 135%;
background: #FFF;
color: #000;
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
}
/* 線形グラデーション(左右) */
.mainpage {
width: 50%;
background-color: #f0ffff;
background: linear-gradient(to right, #d6eaff, #f9fcff);
background: -moz-linear-gradient(left, #d6eaff, #f9fcff);
background: -webkit-linear-gradient(left, #d6eaff, #f9fcff);
border-radius: 10px;
}
/*---- DPL Forum ----*/
/* Forumheader style */
.forum-header {
border: 1px solid #aaa;
background-color: #cedff2;
margin: 0 0 1em;
padding: 0 0.5em;
}
/* Forum table outside border */
table.forum-table {
border: 1px solid lightgrey;
}
/* Forum table cell padding and borders for all table body cells */
table.forum-table > tbody > tr > td {
border-top: 1px solid lightgrey;
padding: 8px;
}
/* Forum table background color (show on odd rows) */
table.forum-table > tbody > tr {
background-color:#fff;
}
/* Forum table background color (shows on even rows) */
table.forum-table > tbody > tr:nth-child(even) {
background-color:#f5faff;
}
/* Forum table header row background, style and padding */
table.forum-table > tbody > tr > th {
background-color:#cedff2;
font-weight:bold;
padding: 8px;
}
/*-- InputBox --*/
.inputbox-sidebar {
width: 300px;
border: 1px solid lightgrey;
clear: right;
float: right;
margin: 3px;
padding:10px;
margin-left: 2em;
}
/* 以下の内容はhttps://creativecommons.org/licenses/by-sa/3.0/ (クリエイティブ・コモンズ・表示・継承ライセンス3.0) のもとで公表されたウィキペディアの項目https://ja.wikipedia.org/wiki/MediaWiki:Common.css「MediaWiki:Common.css」を複製しています。
以下の内容はhttps://creativecommons.org/licenses/by-sa/3.0/ (クリエイティブ・コモンズ・表示・継承ライセンス3.0)の下で利用可能です。
変更履歴 → https:/ja.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=history */
/* フォント・ファミリの設定 */
/* [[MediaWiki‐ノート:Common.css#特定テンプレート用のCSSをTemplateStylesに移行する提案(1回目)]]により非推奨化([[Template:Unicode]]への移行推奨) */
.Unicode {
font-family: 'TITUS Cyberbit Basic', 'Code2000', 'Chrysanthi Unicode', 'Doulos SIL', 'Bitstream Cyberbit', 'Bitstream CyberBase', 'Bitstream Vera', 'Thryomanes', 'Gentium', 'GentiumAlt', 'Visual Geez Unicode', 'Lucida Grande', 'Arial Unicode MS', 'Microsoft Sans Serif', 'Lucida Sans Unicode', sans-serif;
}
.IPA {
font-family: 'Charis SIL', 'Doulos SIL', 'DejaVu Sans', 'Code2000', 'Hiragino Kaku Gothic Pro', 'Matrix Unicode', 'Tahoma', 'Microsoft Sans Serif', sans-serif;
}
/* make the list of references look smaller */
ol.references,
div.reflist {
font-size: 90%; /* Default font-size */
}
div.reflist ol.references {
font-size: 100%; /* Reset font-size when nested in div.reflist */
list-style-type: inherit; /* Enable custom list style types */
}
/* Default style for navigation boxes */
.navbox { /* Navbox container style */
box-sizing: border-box;
border: 1px solid #a2a9b1;
width: 100%;
margin: auto;
clear: both;
font-size: 88%;
text-align: center;
padding: 1px;
}
.navbox + .navbox {
margin-top: -1px; /* Single pixel border between adjacent navboxes */
}
.navbox-inner,
.navbox-subgroup {
width: 100%;
}
.navbox-title,
.navbox-abovebelow,
.navbox th {
text-align: center; /* Title, group and above/below styles */
padding-left: 1em;
padding-right: 1em;
}
th.navbox-group { /* Group style */
white-space: nowrap;
/* @noflip */
text-align: right;
}
.navbox,
.navbox-subgroup {
background-color: #fdfdfd; /* Background color */
}
.navbox-list {
border-color: #fdfdfd; /* Must match background color */
}
/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list { /* Borders above 2nd, 3rd, etc. rows */
border-top: 2px solid #fdfdfd; /* Must match background color */
}
.navbox th,
.navbox-title {
background-color: #ccccff; /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
background-color: #ddddff; /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background-color: #e6e6ff; /* Level 3 color */
}
.navbox-even {
background-color: #f7f7f7; /* Even row striping */
}
.navbox-odd {
background-color: transparent; /* Odd row striping */
}
/* [[MediaWiki:Common.js]] にある createCollapseButtons 関数を参照。 */
.collapseButton {
float: right;
font-weight: normal;
text-align: right;
width: auto;
}
/* Styling for jQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
font-weight: normal;
/* @noflip */
text-align: right;
padding-right: 0.2em;
padding-left: 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
/* @noflip */
float: left;
/* @noflip */
text-align: left;
}
/* 表組みを折り畳んだ場合、横幅が極端に狭くなることを強引に修正 */
table.mw-collapsed > caption {
white-space: nowrap;
}
/* Style for horizontal lists (separator following item).
@source mediawiki.org/wiki/Snippets/Horizontal_lists
@revision 9 (2016-08-10)
@author [[User:Edokter]]
*/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
margin: 0;
display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li,
.hlist .mw-empty-elt {
display: none;
}
/* Generate interpuncts */
.hlist dt:after {
content: ": ";
}
.hlist dd:after,
.hlist li:after {
content: " · ";
font-weight: bold;
}
/* 日本語版の独自仕様。-pipe、-hyphen、-comma、-slash */
.hlist-pipe dd:after,
.hlist-pipe li:after {
content: " | ";
font-weight: normal;
}
.hlist-hyphen dd:after,
.hlist-hyphen li:after {
content: " - ";
font-weight: normal;
}
.hlist-comma dd:after,
.hlist-comma li:after {
content: "、 ";
font-weight: normal;
}
.hlist-slash dd:after,
.hlist-slash li:after {
content: " / ";
font-weight: normal;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
content: " (";
font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
content: ")";
font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
.hlist ol > li {
counter-increment: listitem;
}
.hlist ol > li:before {
content: " " counter(listitem) ".\a0";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
content: " (" counter(listitem) "\a0";
}
/* Avoid elements from breaking between columns */
li, dd {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
dt {
-webkit-column-break-after: avoid;
page-break-after: avoid;
break-after: avoid-column;
}
dd {
-webkit-column-break-before: avoid;
page-break-before: avoid;
break-before: avoid-column;
}
/* Merge template style */
.messagebox {
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
width: 80%;
margin: 0 auto 1em auto;
padding: 0.2em;
text-align: justify;
}
.infobox {
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
color: black;
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
float: right;
clear: right;
text-align: left;
font-size: 88%;
line-height: 1.5em;
}
.infobox caption {
margin-top: 0.5em;
font-size: 125%;
font-weight: bold;
}
.infobox td,
.infobox th {
vertical-align: top;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #a2a9b1;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border: 0;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
/* Styles for geography infoboxes, eg countries,
country subdivisions, cities, etc. */
.infobox.geography {
border-collapse: collapse;
line-height: 1.6em;
font-size: 88%;
}
.infobox.geography td,
.infobox.geography th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
border: 0;
padding: 0 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
border-top: 0;
border-bottom: 1px solid #a2a9b1;
padding: 0 0.6em 0.4em 0.6em;
}
.infobox.geography .maptable td,
.infobox.geography .maptable th {
border: 0;
padding: 0;
}
/* NavFrame関係。[[MediaWiki:Monobook.css]]も参照 */
div.NavFrame {
margin: 0px;
padding: 2px;
border: 1px solid #a2a9b1;
text-align: center;
border-collapse: collapse;
font-size: 95%;
}
div.NavFrame div.NavHead {
height: 1.6em;
font-weight: bold;
font-size: 100%;
background-color: #efefef;
position: relative;
text-align: center;
}
div.NavFrame p {
font-size: 100%;
}
div.NavFrame div.NavContent {
font-size: 100%;
}
div.NavFrame div.NavContent p {
font-size: 100%;
}
a.NavToggle {
position: absolute;
top: 0px;
right: 3px;
font-weight: normal;
}
/* System messages styled similarly to fmbox */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
clear: both;
margin: 0.2em 0;
border: 1px solid #bb7070;
background-color: #ffdbdb;
padding: 0.25em 0.9em;
box-sizing: border-box;
}
/* 脚注ジャンプ先強調 */
.citation:target {
background-color: #eaf3ff;
}
/* 特定場所での改行を防ぐ:
1) 個別に指定した場所
2) リンク途中
3) グループ名付きの ref タグ <ref group="注"> --> "[注 1]" */
.nowrap,
.nowraplinks a,
sup.reference a {
white-space: nowrap;
}
/* 以下のクラスを指定した場所では解除する: */
.wrap,
.wraplinks a {
white-space: normal;
}
/*
* カテゴリページのリスト部にフロート指定のブロックを入れない。
* 2009-01-24 by [[User:mizusumashi]]
*/
#mw-subcategories, #mw-pages, #mw-category-media {
clear: both;
}
/* Don't display page title on the main page */
.page-メインページ #deleteconfirm,
.page-メインページ #t-cite,
.page-メインページ #footer-info-lastmod,
.action-view.page-メインページ #siteSub,
.action-view.page-メインページ .subtitle,
.action-view.page-メインページ .firstHeading,
.action-view.page-メインページ #contentSub,
.action-view.page-メインページ #contentSub2 {
display: none;
}
/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
line-height: inherit;
list-style: none;
margin: 0;
}
.plainlist ol li,
.plainlist ul li {
margin-bottom: 0;
}
/* [[Template:Math]]用のtexhtmlクラス。(2021-05-24更新)
texhtml class for inline math (based on generic times-serif class) */
span.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 108%;
line-height: 1;
white-space: nowrap;
/* Force tabular and lining display for texhtml */
-webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
font-feature-settings: "lnum", "tnum", "kern" 0;
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}
span.texhtml span.texhtml {
font-size: 100%;
}
span.mwe-math-mathml-inline {
font-size: 108%;
}
/* Make <math display="block"> be left aligned with one space indent for
* compatibility with style conventions
*/
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
margin-left: 1.6em !important;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
.mwe-math-mathml-display math {
display: inline;
}
/* 日本語版追加分 */
span.texhtml sup {
vertical-align: 1.0ex;
font-size: 75%;
}
span.texhtml sub {
vertical-align: -0.5ex;
font-size: 75%;
}
/* MediaWiki:Common.js - modifyEditsection
拡張節編集リンク内の分割線をビジュアルエディター無効でも表示する */
.ve-not-available .editsection-extensions .mw-editsection-divider {
display: inline;
}
/* 履歴や本文で長い文字列を折り返せない問題の解消 */
#bodyContent {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Hide broken download box on [[Special:Book]] pending [[phab:T285400]] */
.mw-special-Book #coll-downloadbox {
display: none;
}
/* T156351: Support for Parsoid's Cite implementation */
span[rel="mw:referencedBy"]::before {
content: "^ ";
}
a[rel="mw:referencedBy"]::before {
font-weight: bold;
content: "^";
}
span[ rel="mw:referencedBy" ] {
counter-reset: mw-ref-linkback 0;
}
span[ rel="mw:referencedBy" ] > a::before {
font-weight: bold;
font-style: italic;
content: counter( mw-ref-linkback, lower-alpha );
}
.mw-ref > a[data-mw-group=lower-roman]::after {
content: '[' counter( mw-Ref, lower-roman ) ']';
}
.mw-ref > a[data-mw-group=upper-roman]::after {
content: '[' counter( mw-Ref, upper-roman ) ']';
}
.mw-ref > a[data-mw-group=decimal]::after {
content: '[' counter( mw-Ref, decimal ) ']';
}
.mw-ref > a[data-mw-group=lower-greek]::after {
content: '[' counter( mw-Ref, lower-greek ) ']';
}
.mw-ref > a[data-mw-group=upper-alpha]::after {
content: '[' counter( mw-Ref, upper-alpha ) ']';
}
.mw-ref > a[data-mw-group=lower-alpha]::after {
content: '[' counter( mw-Ref, lower-alpha ) ']';
}
/* =========================================================
転スラWiki メインページ
========================================================= */
.ts-main {
--ts-blue: #36c;
--ts-blue-dark: #2a4b8d;
--ts-blue-light: #f4f7fc;
--ts-border: #c8ccd1;
--ts-border-light: #eaecf0;
--ts-text: #202122;
--ts-subtext: #54595d;
--ts-muted: #72777d;
width: 100%;
max-width: 1220px;
margin: 0 auto;
color: var(--ts-text);
box-sizing: border-box;
}
/*
MediaWikiが空行から生成するp/brが
Gridのセルとして扱われるのを防ぐ
*/
.ts-main > p,
.ts-main-section > p,
.ts-portal-grid > p,
.ts-grid-4 > p,
.ts-grid-2 > p,
.ts-main > br,
.ts-main-section > br,
.ts-portal-grid > br,
.ts-grid-4 > br,
.ts-grid-2 > br {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
Welcome
========================================================= */
.ts-welcome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin: 0 0 20px;
padding: 15px 18px;
border: 1px solid var(--ts-border);
border-radius: 5px;
background: #fff;
}
.ts-welcome-title {
margin: 0 0 5px;
color: #202122;
font-size: 1.45rem;
font-weight: 700;
line-height: 1.35;
}
.ts-welcome-desc {
color: var(--ts-subtext);
font-size: .92rem;
line-height: 1.65;
}
.ts-welcome-count {
flex-shrink: 0;
padding-left: 20px;
border-left: 1px solid var(--ts-border-light);
color: var(--ts-muted);
font-size: .87rem;
white-space: nowrap;
}
.ts-welcome-count strong {
color: var(--ts-blue-dark);
font-size: 1.1rem;
}
/* =========================================================
Section
========================================================= */
.ts-main-section {
margin: 18px 0 !important;
padding: 0 !important;
}
.ts-main-heading {
margin: 0 0 10px !important;
padding: 4px 0 7px 10px !important;
border: 0 !important;
border-left: 4px solid var(--ts-blue) !important;
border-bottom: 1px solid var(--ts-border-light) !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.ts-main-heading::after {
display: none !important;
}
/* =========================================================
6 portal links
========================================================= */
.ts-portal-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 !important;
width: 100%;
overflow: hidden;
border: 1px solid var(--ts-border);
border-radius: 5px;
background: #fff;
}
.ts-portal-card {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr);
align-items: start;
gap: 13px;
min-width: 0;
min-height: 118px;
margin: 0 !important;
padding: 17px 18px !important;
border-right: 1px solid var(--ts-border-light);
border-bottom: 1px solid var(--ts-border-light);
background: #fff;
box-sizing: border-box;
}
.ts-portal-card:nth-of-type(3n) {
border-right: 0;
}
.ts-portal-card:nth-last-of-type(-n+3) {
border-bottom: 0;
}
.ts-portal-card:hover {
background: #f8faff;
}
.ts-portal-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid #a7b9d8;
border-radius: 5px;
background: #f8faff;
color: var(--ts-blue-dark);
font-size: 1rem;
font-weight: 700;
}
.ts-portal-title {
margin: 1px 0 4px;
font-size: 1.02rem;
font-weight: 700;
}
.ts-portal-title a {
color: var(--ts-blue-dark);
}
.ts-portal-description {
margin: 0 0 7px;
color: var(--ts-subtext);
font-size: .86rem;
line-height: 1.55;
}
.ts-portal-more {
font-size: .84rem;
}
/* =========================================================
General panels
========================================================= */
.ts-grid-4,
.ts-grid-2 {
display: grid !important;
gap: 0 !important;
width: 100%;
overflow: hidden;
border: 1px solid var(--ts-border);
border-radius: 5px;
background: #fff;
}
.ts-grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.ts-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ts-panel {
min-width: 0;
margin: 0 !important;
padding: 15px 17px !important;
border-right: 1px solid var(--ts-border-light);
background: #fff;
box-sizing: border-box;
}
.ts-grid-4 > .ts-panel:last-of-type,
.ts-grid-2 > .ts-panel:last-of-type {
border-right: none;
}
.ts-panel-heading {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 10px !important;
padding: 0 0 7px !important;
border-bottom: 1px solid var(--ts-border-light);
color: var(--ts-blue-dark);
font-size: 1rem;
font-weight: 700;
}
.ts-panel-symbol {
color: var(--ts-blue);
font-weight: 700;
}
.ts-panel-content {
margin: 0 !important;
padding: 0 !important;
font-size: .88rem;
line-height: 1.65;
}
.ts-panel-content > p:first-child {
margin-top: 0;
}
.ts-panel-content ul {
margin: 0 0 0 1.3em !important;
padding: 0 !important;
}
.ts-panel-content li {
margin: 4px 0;
}
/* =========================================================
Pickup
========================================================= */
.ts-pickup-label {
display: inline-block;
margin: 0 0 7px;
padding: 2px 7px;
border-radius: 3px;
background: #eef3fb;
color: var(--ts-blue-dark);
font-size: .72rem;
font-weight: 700;
}
.ts-pickup-title {
margin: 0 0 6px;
font-size: 1.08rem;
font-weight: 700;
}
.ts-pickup-text {
margin: 0;
color: var(--ts-subtext);
line-height: 1.6;
}
.ts-panel-footer {
margin-top: 10px;
text-align: right;
font-size: .83rem;
}
/* =========================================================
Ranking
========================================================= */
.ts-ranking {
width: 100%;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse;
background: transparent !important;
font-size: .88rem;
}
.ts-ranking tr,
.ts-ranking td {
background: transparent !important;
}
.ts-ranking td {
padding: 4px 3px !important;
border: 0 !important;
}
.ts-ranking-num {
width: 26px;
color: var(--ts-muted);
text-align: center;
}
.ts-ranking-value {
width: 70px;
color: var(--ts-muted);
text-align: right;
white-space: nowrap;
}
.ts-up {
color: #14866d;
font-weight: 700;
}
/* =========================================================
DPL
========================================================= */
.ts-dpl ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.ts-dpl li {
margin: 0 !important;
padding: 5px 0 !important;
border-bottom: 1px dotted #d8dfe8;
}
.ts-dpl li:last-child {
border-bottom: none;
}
/* =========================================================
Edit
========================================================= */
.ts-edit-list {
margin: 0 !important;
padding-left: 1.25em !important;
}
.ts-edit-list li {
margin: 4px 0;
}
.ts-beginner-box {
margin-top: 12px;
padding: 11px 12px;
border-left: 3px solid var(--ts-blue);
background: #f4f7fc;
font-size: .86rem;
}
.ts-beginner-title {
margin-bottom: 3px;
font-weight: 700;
}
/* =========================================================
About
========================================================= */
.ts-about {
margin: 0;
padding: 16px 18px;
border: 1px solid var(--ts-border);
border-radius: 5px;
background: #f8f9fa;
font-size: .9rem;
line-height: 1.7;
}
.ts-about-title {
margin-bottom: 5px;
color: #202122;
font-size: 1.03rem;
font-weight: 700;
}
/* =========================================================
Bottom nav
========================================================= */
.ts-subnav {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 18px 0 0;
padding: 10px 0;
border-top: 1px solid var(--ts-border-light);
border-bottom: 1px solid var(--ts-border-light);
font-size: .82rem;
}
.ts-subnav a {
margin: 2px 0;
padding: 0 11px;
border-right: 1px solid var(--ts-border);
}
.ts-subnav a:last-child {
border-right: none;
}
/* =========================================================
Mobile / tablet
========================================================= */
@media screen and (max-width: 1000px) {
.ts-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ts-grid-4 .ts-panel:nth-of-type(2n) {
border-right: 0;
}
.ts-grid-4 .ts-panel:nth-of-type(-n+2) {
border-bottom: 1px solid var(--ts-border-light);
}
}
@media screen and (max-width: 800px) {
.ts-portal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ts-portal-card:nth-of-type(3n) {
border-right: 1px solid var(--ts-border-light);
}
.ts-portal-card:nth-of-type(2n) {
border-right: 0;
}
.ts-portal-card:nth-last-of-type(-n+3) {
border-bottom: 1px solid var(--ts-border-light);
}
.ts-portal-card:nth-last-of-type(-n+2) {
border-bottom: 0;
}
.ts-grid-2 {
grid-template-columns: 1fr !important;
}
.ts-grid-2 .ts-panel {
border-right: 0;
border-bottom: 1px solid var(--ts-border-light);
}
.ts-grid-2 .ts-panel:last-of-type {
border-bottom: 0;
}
.ts-welcome {
display: block;
}
.ts-welcome-count {
margin-top: 10px;
padding: 8px 0 0;
border-top: 1px solid var(--ts-border-light);
border-left: 0;
}
}
@media screen and (max-width: 520px) {
.ts-portal-grid,
.ts-grid-4 {
grid-template-columns: 1fr !important;
}
.ts-portal-card,
.ts-portal-card:nth-of-type(2n),
.ts-portal-card:nth-of-type(3n) {
border-right: 0;
border-bottom: 1px solid var(--ts-border-light);
}
.ts-portal-card:last-of-type {
border-bottom: 0;
}
.ts-grid-4 .ts-panel,
.ts-grid-4 .ts-panel:nth-of-type(2n) {
border-right: 0;
border-bottom: 1px solid var(--ts-border-light);
}
.ts-grid-4 .ts-panel:last-of-type {
border-bottom: 0;
}
}
.ts-spoiler-note {
color: var(--ts-muted);
font-size: .82rem;
}
.ts-ranking-value {
color: var(--ts-muted);
font-size: .82rem;
}
/* =========================================================
転スラ年表・転スラ全史
共通デザイン
========================================================= */
/* =========================================================
0. 基本
========================================================= */
.ts-chronology,
.ts-fullchronology {
width: 100%;
max-width: none;
box-sizing: border-box;
}
/* 年表内でMediaWiki側が生成する段落余白を抑える */
.ts-chronology p,
.ts-fullchronology p,
.ts-chron-entry p,
.ts-fullchron-entry p {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
1. ページ上部
========================================================= */
.ts-chron-header,
.ts-fullchron-header {
width: 100%;
margin: 0 0 20px;
padding: 0;
}
/* ---------- 導入文 ---------- */
.ts-chron-lead,
.ts-fullchron-lead {
margin: 0 0 12px;
padding: 0;
font-size: 1rem;
line-height: 1.85;
}
/* ---------- 注意書き ---------- */
.ts-chron-notice,
.ts-fullchron-notice {
margin: 14px 0;
padding: 10px 14px;
background: #f8f9fa;
border: 1px solid #c8ccd1;
border-left: 3px solid #36c;
border-radius: 2px;
font-size: .94rem;
line-height: 1.75;
box-sizing: border-box;
}
.ts-chron-notice p,
.ts-fullchron-notice p {
margin: 0 !important;
}
.ts-chron-notice p + p,
.ts-fullchron-notice p + p {
margin-top: 5px !important;
}
/* ---------- 年表内ナビ ---------- */
.ts-chron-nav,
.ts-fullchron-nav {
margin: 14px 0 18px;
padding: 7px 0;
border-top: 1px solid #c8ccd1;
border-bottom: 1px solid #c8ccd1;
font-size: .94rem;
line-height: 1.8;
}
.ts-chron-nav a,
.ts-fullchron-nav a {
white-space: nowrap;
}
/* ---------- 他方の年表へのリンクなど ---------- */
.ts-chron-more,
.ts-fullchron-more {
margin: 8px 0 0;
padding: 0;
font-size: .94rem;
line-height: 1.6;
}
/* =========================================================
2. 時代セクション
========================================================= */
.ts-chron-section,
.ts-fullchron-section {
width: 100%;
margin: 20px 0 26px !important;
padding: 0 !important;
box-sizing: border-box;
}
/* 年表と全史の見出しを完全に同じデザインにする */
h2.ts-chron-section-title,
h2.ts-fullchron-section-title,
.ts-chron-section-title,
.ts-fullchron-section-title {
margin: 0 0 8px !important;
padding: 5px 10px !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid #c8ccd1 !important;
border-left: 4px solid #36c !important;
background: transparent !important;
font-size: 1.18rem !important;
font-weight: 600 !important;
line-height: 1.5 !important;
box-sizing: border-box;
}
/* =========================================================
3. タイムライン本体
========================================================= */
.ts-chron-list,
.ts-fullchron-list {
position: relative;
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
box-sizing: border-box;
}
/* ---------- 縦線 ---------- */
.ts-chron-list::before,
.ts-fullchron-list::before {
content: "";
position: absolute;
left: 145px;
top: 0;
bottom: 0;
width: 1px;
background: #a7c1ee;
z-index: 0;
}
/* =========================================================
4. 1件の出来事
========================================================= */
.ts-chron-entry,
.ts-fullchron-entry {
position: relative;
display: grid !important;
grid-template-columns: 130px minmax(0, 1fr) !important;
column-gap: 30px !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
/*
* 以前よりかなりコンパクト。
* これ以上狭くすると逆に詰まりすぎるため
* まずは7px / 9pxを標準とする。
*/
padding: 7px 0 9px !important;
border-bottom: 1px solid #eaecf0;
box-sizing: border-box;
}
/* 最終項目 */
.ts-chron-entry:last-child,
.ts-fullchron-entry:last-child {
border-bottom: 0;
}
/* ---------- タイムライン上の丸 ---------- */
.ts-chron-entry::before,
.ts-fullchron-entry::before {
content: "";
position: absolute;
left: 140px;
top: 12px;
width: 11px;
height: 11px;
background: #fff;
border: 2px solid #36c;
border-radius: 50%;
box-sizing: border-box;
z-index: 2;
}
/* =========================================================
5. 年代
========================================================= */
.ts-chron-date,
.ts-fullchron-date {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: right;
color: #2457a6;
font-size: .94rem;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
box-sizing: border-box;
}
/* =========================================================
6. 本文エリア
========================================================= */
.ts-chron-body,
.ts-fullchron-main {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
/* =========================================================
7. 出来事名
========================================================= */
.ts-chron-event,
.ts-fullchron-event {
width: 100%;
margin: 0 0 2px !important;
padding: 0 !important;
font-size: 1rem;
font-weight: 700;
line-height: 1.55;
box-sizing: border-box;
}
/* =========================================================
8. 概要
========================================================= */
.ts-chron-summary,
.ts-fullchron-summary {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
font-size: .96rem;
line-height: 1.65;
box-sizing: border-box;
}
/* =========================================================
9. 全史のみ:人物・国家・組織・出典
========================================================= */
.ts-fullchron-meta {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 5px 0 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
/* ---------- 1行 ---------- */
.ts-fullchron-meta-row {
position: static !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 1px 0 !important;
padding: 0 !important;
gap: 8px;
line-height: 1.55;
box-sizing: border-box;
}
/* ---------- 人物・国家・組織・出典ラベル ---------- */
.ts-fullchron-meta-label {
display: block !important;
flex: 0 0 3.5em !important;
width: 3.5em !important;
min-width: 3.5em !important;
max-width: 3.5em !important;
margin: 0 !important;
padding: 0 !important;
color: #54595d;
font-size: .9rem;
font-weight: 600;
line-height: 1.55;
white-space: nowrap !important;
box-sizing: border-box;
}
/* ---------- 実際の値 ---------- */
.ts-fullchron-meta-value {
display: block !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
font-size: .9rem;
line-height: 1.55;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere;
box-sizing: border-box;
}
/* =========================================================
10. 年代・前後関係に関する注記
========================================================= */
.ts-order-note {
width: 100%;
margin: 3px 0 0 !important;
padding: 0 !important;
color: #72777d;
font-size: .78rem;
line-height: 1.5;
}
/* =========================================================
11. 詳細を見る
========================================================= */
.ts-chron-detail,
.ts-fullchron-detail {
width: 100%;
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: .9rem;
line-height: 1.5;
}
/* =========================================================
12. リンク
========================================================= */
.ts-chronology a,
.ts-fullchronology a {
text-decoration: none;
}
.ts-chronology a:hover,
.ts-fullchronology a:hover {
text-decoration: underline;
}
/* =========================================================
13. タブレット
========================================================= */
@media screen and (max-width: 900px) {
.ts-chron-list::before,
.ts-fullchron-list::before {
left: 125px;
}
.ts-chron-entry,
.ts-fullchron-entry {
grid-template-columns: 110px minmax(0, 1fr) !important;
column-gap: 30px !important;
}
.ts-chron-entry::before,
.ts-fullchron-entry::before {
left: 120px;
}
}
/* =========================================================
14. スマートフォン
========================================================= */
@media screen and (max-width: 720px) {
/* ---------- ページ上部 ---------- */
.ts-chron-header,
.ts-fullchron-header {
margin-bottom: 14px;
}
.ts-chron-lead,
.ts-fullchron-lead {
font-size: .95rem;
line-height: 1.75;
}
.ts-chron-notice,
.ts-fullchron-notice {
margin: 10px 0;
padding: 9px 11px;
font-size: .88rem;
line-height: 1.7;
}
/* ナビは横スクロール可能にする */
.ts-chron-nav,
.ts-fullchron-nav {
margin: 10px 0 14px;
padding: 6px 0;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
font-size: .88rem;
-webkit-overflow-scrolling: touch;
}
/* ---------- セクション ---------- */
.ts-chron-section,
.ts-fullchron-section {
margin: 16px 0 22px !important;
}
h2.ts-chron-section-title,
h2.ts-fullchron-section-title,
.ts-chron-section-title,
.ts-fullchron-section-title {
margin-bottom: 6px !important;
padding: 5px 8px !important;
font-size: 1.08rem !important;
}
/* ---------- 縦線 ---------- */
.ts-chron-list::before,
.ts-fullchron-list::before {
left: 8px;
}
/* ---------- 1件 ---------- */
.ts-chron-entry,
.ts-fullchron-entry {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding:
7px
0
8px
27px !important;
}
/* 丸 */
.ts-chron-entry::before,
.ts-fullchron-entry::before {
left: 3px;
top: 12px;
width: 11px;
height: 11px;
}
/* ---------- 年代 ---------- */
.ts-chron-date,
.ts-fullchron-date {
margin: 0 0 2px !important;
text-align: left;
font-size: .84rem;
line-height: 1.45;
}
/* ---------- 出来事 ---------- */
.ts-chron-event,
.ts-fullchron-event {
margin-bottom: 2px !important;
font-size: .96rem;
line-height: 1.5;
}
/* ---------- 概要 ---------- */
.ts-chron-summary,
.ts-fullchron-summary {
font-size: .9rem;
line-height: 1.6;
}
/* ---------- 全史メタ情報 ---------- */
.ts-fullchron-meta {
margin-top: 4px !important;
}
.ts-fullchron-meta-row {
gap: 5px;
margin: 1px 0 !important;
line-height: 1.5;
}
.ts-fullchron-meta-label {
flex-basis: 3.2em !important;
width: 3.2em !important;
min-width: 3.2em !important;
max-width: 3.2em !important;
font-size: .82rem;
}
.ts-fullchron-meta-value {
font-size: .82rem;
line-height: 1.5;
}
/* ---------- 注記 ---------- */
.ts-order-note {
margin-top: 3px !important;
font-size: .74rem;
}
/* ---------- 詳細 ---------- */
.ts-chron-detail,
.ts-fullchron-detail {
margin-top: 3px !important;
font-size: .84rem;
}
}
/* ResourceLoader cache refresh 2026-08-28 */
/* 案内・お知らせボックス */
.ts-notice-box {
display: flex;
align-items: center;
gap: 12px;
margin: 12px 0 20px;
padding: 12px 16px;
background: #f5f9ff;
border: 1px solid #a2a9b1;
border-left: 5px solid #36c;
border-radius: 2px;
box-sizing: border-box;
}
.ts-notice-icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
border: 2px solid #36c;
border-radius: 50%;
color: #36c;
font-size: 18px;
font-weight: bold;
line-height: 24px;
text-align: center;
}
.ts-notice-content {
flex: 1;
line-height: 1.6;
}
@media screen and (max-width: 600px) {
.ts-notice-box {
align-items: flex-start;
padding: 10px 12px;
}
}
/* =========================================================
転スラWiki 外部画像スライドギャラリー 完全版
・画像を切り抜かない
・高さを統一
・PCでは横並び+左右ボタン
・スマホでは横スワイプ
========================================================= */
.mw-parser-output .ts-gallery {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0.8em 0 1.5em !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
横スクロール領域
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 100% !important;
gap: 12px !important;
margin: 0 !important;
padding: 4px 44px 10px 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
box-sizing: border-box !important;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #a2a9b1 transparent;
}
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar {
height: 6px;
}
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-track {
background: transparent;
}
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-thumb {
background: #a2a9b1;
border-radius: 999px;
}
/* =========================================================
カード
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__item {
position: relative !important;
display: block !important;
flex: 0 0 360px !important;
width: 360px !important;
min-width: 360px !important;
max-width: 360px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #a2a9b1 !important;
border-radius: 5px !important;
background: #fff !important;
overflow: hidden !important;
box-sizing: border-box !important;
scroll-snap-align: start;
}
/* =========================================================
画像表示領域
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 !important;
padding: 0 !important;
background: #f8f9fa !important;
overflow: hidden !important;
box-sizing: border-box !important;
/* 余計なベースライン隙間防止 */
line-height: 0 !important;
font-size: 0 !important;
}
/* =========================================================
MediaWikiが挿入する可能性があるラッパーを全部無害化
ここが超重要
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > span,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > span > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p > span,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* pタグが入っても余白を出さない */
.mw-parser-output .ts-gallery .ts-gallery__imagebox p {
margin: 0 !important;
}
/* =========================================================
画像本体
画像全体を必ず表示(切り抜かない)
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__imagebox img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
box-sizing: border-box !important;
vertical-align: top !important;
}
/* =========================================================
キャプション
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__caption {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 12px 12px !important;
background: #fff !important;
color: #202122 !important;
font-size: 12px !important;
line-height: 1.6 !important;
box-sizing: border-box !important;
overflow-wrap: anywhere;
}
.mw-parser-output .ts-gallery .ts-gallery__source {
color: #54595d !important;
font-size: 11px !important;
line-height: 1.55 !important;
}
/* =========================================================
左右ボタン
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__nav {
position: absolute !important;
top: 154px !important;
z-index: 20 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #a2a9b1 !important;
border-radius: 50% !important;
background: rgba(255,255,255,.92) !important;
color: #202122 !important;
font-size: 26px !important;
line-height: 1 !important;
box-shadow: 0 1px 5px rgba(0,0,0,.2) !important;
cursor: pointer !important;
transform: translateY(-50%);
}
.mw-parser-output .ts-gallery .ts-gallery__prev {
left: 8px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__next {
right: 8px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__nav:disabled {
opacity: .25 !important;
}
.mw-parser-output .ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav {
display: none !important;
}
/* =========================================================
スマホ
========================================================= */
@media screen and (max-width: 720px) {
.mw-parser-output .ts-gallery {
margin: 0.6em 0 1.2em !important;
}
.mw-parser-output .ts-gallery .ts-gallery__track {
gap: 9px !important;
padding: 3px 28px 8px 0 !important;
scrollbar-width: none;
}
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar {
display: none;
}
.mw-parser-output .ts-gallery .ts-gallery__item {
flex: 0 0 calc(100% - 28px) !important;
width: calc(100% - 28px) !important;
min-width: calc(100% - 28px) !important;
max-width: calc(100% - 28px) !important;
}
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__nav {
top: 128px !important;
width: 34px !important;
height: 34px !important;
font-size: 23px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__prev {
left: 5px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__next {
right: 5px !important;
}
}
@media screen and (max-width: 380px) {
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
height: 220px !important;
min-height: 220px !important;
max-height: 220px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__nav {
top: 113px !important;
}
}
/* =========================================================
Infobox 外部画像スライダー
========================================================= */
.ts-infobox-slider {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* =========================================================
スライド領域
========================================================= */
.ts-infobox-slider__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
box-sizing: border-box !important;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
/* スクロールバーは非表示 */
scrollbar-width: none;
}
.ts-infobox-slider__track::-webkit-scrollbar {
display: none;
}
/* =========================================================
1枚のスライド
========================================================= */
.ts-infobox-slider__slide {
position: relative !important;
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
scroll-snap-align: start;
scroll-snap-stop: always;
background: #fff;
}
/* =========================================================
画像表示領域
========================================================= */
.ts-infobox-slider__imagebox {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
/*
* Infobox内なのでギャラリーより少しコンパクト
*/
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 !important;
padding: 0 !important;
background: #f8f9fa !important;
overflow: hidden !important;
box-sizing: border-box !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* =========================================================
MediaWikiによるラッパー対策
========================================================= */
.ts-infobox-slider__imagebox p,
.ts-infobox-slider__imagebox a,
.ts-infobox-slider__imagebox span {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
画像本体
絶対にトリミングしない
========================================================= */
.ts-infobox-slider__imagebox img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
/*
* 元画像全体を表示する。
* cover は使用しない。
*/
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
box-sizing: border-box !important;
}
/* =========================================================
各画像の説明
========================================================= */
.ts-infobox-slider__caption {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 7px 8px 9px !important;
background: #fff;
color: #202122;
font-size: 11px !important;
line-height: 1.5 !important;
text-align: left;
box-sizing: border-box !important;
overflow-wrap: anywhere;
}
.ts-infobox-slider__source {
color: #54595d;
font-size: 10px;
line-height: 1.45;
}
/* =========================================================
左右ボタン
========================================================= */
.ts-infobox-slider__nav {
position: absolute !important;
/*
* 300pxの画像枠中央
*/
top: 150px !important;
z-index: 20 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(84, 89, 93, 0.35) !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.88) !important;
color: #54595d !important;
font-family: Arial, sans-serif;
font-size: 22px !important;
font-weight: normal;
line-height: 1 !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
cursor: pointer;
transform: translateY(-50%);
}
.ts-infobox-slider__prev {
left: 5px !important;
}
.ts-infobox-slider__next {
right: 5px !important;
}
.ts-infobox-slider__nav:hover {
background: #fff !important;
color: #202122 !important;
}
.ts-infobox-slider__nav:disabled {
opacity: 0.25 !important;
cursor: default;
}
/* 1枚しかない場合はナビ不要 */
.ts-infobox-slider--single .ts-infobox-slider__nav {
display: none !important;
}
/* =========================================================
スマートフォン
========================================================= */
@media screen and (max-width: 720px) {
.ts-infobox-slider__imagebox {
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
}
.ts-infobox-slider__nav {
top: 140px !important;
}
}