MediaWiki:Common.css
提供：きまぐれ手記 Kimagurenote
注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。
- Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
- Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
- Internet Explorer / Microsoft Edge: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください
- Opera: Ctrl-F5を押してください
1 /* ここに記述したCSSはすべての外装に反映されます */
2 /* Common CSS for all skins */
3
4 /*<source lang="css">*/
5
6
7 /* さくらのレンタルサーバ Webフォント
8 * https://help.sakura.ad.jp/206134982/
9 * https://www.sakura.ne.jp/function/webfont/
10 */
11 body {
12 counter-reset: annotated annotate;
13 font-family: "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
14 scroll-behavior: unset;
15 color: #111;
16 }
17 b {
18 font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", Arial, "UD新ゴ コンデンス90 M", "UD Shin Go Conde90 M";
19 }
20 dt {
21 font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", Arial, "じゅん 201", "Jun 201";
22 margin-top: 0.25em;
23 }
24 h1 {
25 font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ W4 JIS2004", "Hiragino Maru Gothic W4 JIS2004", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", Arial;
26 }
27 h2 {
28 clear: both;
29 }
30 h2, h3, h4, h5, h6 {
31 margin-top: 0.4em;
32 margin-bottom: 0.2em;
33 font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", Arial;
34 }
35 DIV.yjshopping P.yjshoppingname A {
36 font-family: Arial, "丸フォーク M", "Maru Folk Medium", "ヒラギノ丸ゴ Pro";
37 }
38
39 /* 均等割り付け */
40 p, dd {
41 text-align: justify;
42 }
43
44 /* リンク下線無し */
45 a {
46 text-decoration: none;
47 }
48 a:hover {
49 text-decoration: underline;
50 }
51
52 /* TOC (Tweeki) */
53 @media screen .toc, #toc, .toclevel-2 {
54 display: block;
55 }
56 /*
57 #tweekiTOC #toc ul > li > ul {
58 display: block;
59 }
60 */
61 @media screen #tweekiTOC #toc ul > li a {
62 color: #555;
63 }
64 #tweekiTOC #toctitle h2, #tweekiTOC .toctitle h2 {
65 margin-top: 0;
66 }
67
68 /* Google Searchbox */
69 .gsc-control-cse {
70 background-color: transparent;
71 }
72
73 /* ページ見出し */
74 h1.firstHeading {
75 line-height: 1.2;
76 }
77
78 /* Extension: SubTranslate */
79 H1 SPAN.targetlang {
80 font-size: smaller;
81 }
82
83 h2 {
84 border-bottom: 1px solid #888;
85 }
86
87 h3::before {
88 color: #666;
89 content: "▶ ";
90 }
91 /* h3::after {
92 color: #666;
93 content: " ◀";
94 } */
95
96 h4 {
97 margin-top: 0.8em;
98 font-weight: bold;
99 }
100 h4::before {
101 color: #777;
102 content: "◤ ";
103 }
104 h4::after {
105 color: #777;
106 content: " ◢";
107 }
108
109 /* ruby */
110 rt {
111 line-height: 8px;
112 margin-bottom: -0.5em;
113 // transform: translateY(0.5em);
114 }
115
116 /* annotation */
117 SPAN.annotated {
118 white-space: nowrap;
119 }
120 SPAN.annotated-repeat {
121 counter-increment: annotated -1;
122 }
123 SPAN.annotated::after {
124 counter-increment: annotated;
125 content: counter(annotated);
126 }
127 DIV.annotate {
128 font-size: smaller;
129 margin: 0.5em 0.5em 0.5em 2em;
130 text-indent: -2em;
131 }
132 DIV.annotate:last-of-type {
133 margin: 0.5em 0.5em 1em 2em;
134 }
135 DIV.annotate::before {
136 counter-increment: annotate;
137 content: "※" counter(annotate) " ";
138 }
139
140 /* reflinks */
141 DIV.reflinks, DIV.mw-references-wrap {
142 font-size: smaller;
143 }
144
145 /* 装飾 */
146 .underline-yellow {
147 background: linear-gradient(transparent 80%, #ff0 0);
148 background-size: auto 1.1em;
149 }
150
151 /* リストの最後に行間を空ける */
152 .mw-content-ltr ul, .mw-content-ltr ol, .mw-content-ltr dl {
153 margin-bottom: 0.7em;
154 }
155
156 /* （Q&A用）DDの最初の行に ⇒ を付ける */
157 .mw-content-ltr dl dd {
158 margin-left: 0em;
159 padding-left: 2em;
160 }
161 .mw-content-ltr dl dt+dd {
162 text-indent: -1em;
163 }
164 .mw-content-ltr dl dt+dd::before {
165 color: #444;
166 content: "⇒";
167 }
168
169 /* wikitable/prettytable class for skinning normal tables */
170 table.wikitable,
171 table.prettytable {
172 margin: 1em 1em 1em 0;
173 background: #f9f9f9;
174 border: 1px #aaa solid;
175 border-collapse: collapse;
176 }
177
178 table.wikitable th, table.wikitable td,
179 table.prettytable th, table.prettytable td {
180 border: 1px #aaa solid;
181 padding: 0.2em;
182 }
183
184 table.wikitable th,
185 table.prettytable th {
186 background: #f2f2f2;
187 text-align: center;
188 }
189
190 table.wikitable caption,
191 table.prettytable caption {
192 margin-left: inherit;
193 margin-right: inherit;
194 }
195
196 /* Infobox */
197 .infobox {
198 border: 1px solid #a2a9b1;
199 background-color: #f8f9fa;
200 color: black;
201 margin: 0 0 0.5em 1em;
202 padding: 0.2em;
203 float: right;
204 clear: right;
205 text-align: left;
206 font-size: 88%;
207 line-height: 1.5em;
208 }
209 .infobox caption {
210 margin-top: 0;
211 padding: 0.5em;
212 font-size: 125%;
213 font-weight: bold;
214 text-align: center;
215 color: #000;
216 caption-side: top;
217 }
218 .infobox td,
219 .infobox th {
220 padding: 0.2em 0.5em 0.2em 0.5em;
221 vertical-align: top;
222 }
223 .infobox.bordered {
224 border-collapse: collapse;
225 }
226 .infobox.bordered td,
227 .infobox.bordered th {
228 border: 1px solid #a2a9b1;
229 }
230 .infobox.bordered .borderless td,
231 .infobox.bordered .borderless th {
232 border: 0;
233 }
234
235 .infobox.sisterproject {
236 width: 20em;
237 font-size: 90%;
238 }
239
240 /* styles for bordered infobox with merged rows */
241 .infobox.bordered .mergedtoprow td,
242 .infobox.bordered .mergedtoprow th {
243 border: 0;
244 border-top: 1px solid #a2a9b1;
245 /* @noflip */
246 border-right: 1px solid #a2a9b1;
247 }
248
249 .infobox.bordered .mergedrow td,
250 .infobox.bordered .mergedrow th {
251 border: 0;
252 /* @noflip */
253 border-right: 1px solid #a2a9b1;
254 }
255
256 /* Template:Tag */
257 .mw-highlight .nt {
258 color: #008000;
259 font-weight: bold;
260 }
261 code, .mw-code {
262 color: #000000;
263 }
264
265 /* Console */
266 PRE.console {
267 border: none;
268 padding: 0.5em;
269 margin-left: 1em;
270 background-color: #000;
271 line-height: 110%;
272 color: #fff;
273 overflow: scroll;
274 }
275
276 /* code */
277 PRE.code {
278 border: thin dashed #aa0;
279 padding: 0.5em;
280 margin-left: 1em;
281 background-color: #ffd;
282 line-height: 110%;
283 color: #000;
284 overflow: scroll;
285 }
286
287 /* Category for Tweeki skin */
288 #catlinks { display: block; }
289
290 /* Content body */
291 #mw-content-text {
292 font-size: 120%;
293 }
294
295 /* [[w:MediaWiki:Common.css]] 2018年8月25日 (土) 14:38 (UTC) より一部転記 */
296 /* for message boxes */
297 table.mbox {
298 margin: 3px 10%;
299 border-collapse: collapse;
300 border: 1px solid #aaa;
301 background: #DFE8FF; /* Default "notice" blue */
302 }
303 th.mbox-text, td.mbox-text { /* The message body cell(s) */
304 border: none;
305 padding: 0.25em 0.9em; /* 0.9em left/right */
306 width: 100%; /* Make all mboxes the same width regardless of text length */
307 font-size: 90%;
308 }
309 td.mbox-icon { /* The left image cell */
310 border: none;
311 padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
312 text-align: center;
313 font-size: 64px;
314 }
315 td.mbox-imageright { /* The right image cell */
316 border: none;
317 padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
318 text-align: center;
319 font-size: 64px;
320 }
321 td.mbox-empty-cell { /* An empty narrow cell */
322 border: none;
323 padding: 0px;
324 width: 1px;
325 }
326
327 /* rounded icon for Template:Sidebox */
328 .mbox-image IMG {
329 border-radius: 8px;
330 }
331
332 /* These mbox-small classes must be placed after all other
333 ambox/tmbox/ombox etc classes. "body.mediawiki" is so
334 they override "table.ambox + table.ambox" above. */
335 body.mediawiki table.mbox-small { /* For the "small=yes" option. */
336 clear: right;
337 float: right;
338 margin: 4px 0 4px 1em;
339 width: 238px;
340 font-size: 88%;
341 line-height: 1.25em;
342 }
343 body.mediawiki table.mbox-small-left { /* For the "small=left" option. */
344 margin: 4px 1em 4px 0;
345 width: 238px;
346 border-collapse: collapse;
347 font-size: 88%;
348 line-height: 1.25em;
349 }
350 th.mbox-text, td.mbox-text { /* The message body cell(s) */
351 border: none;
352 padding: 0.5em 1em; /* 1em left/right */
353 width: 100%; /* Make all mboxes the same width regardless of text length */
354 font-size: 90%;
355 }
356 td.mbox-image { /* The left image cell */
357 border: none;
358 padding: 2px 0 2px 1em; /* 0.9em left, 0px right */
359 text-align: center;
360 }
361 td.mbox-imageright { /* The right image cell */
362 border: none;
363 padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
364 text-align: center;
365 }
366 td.mbox-empty-cell { /* An empty narrow cell */
367 border: none;
368 padding: 0px;
369 width: 1px;
370 }
371
372 /* 本文の字下げ（最初の行を除く） */
373 DIV.mw-content-ltr P {
374 text-indent: 1em;
375 }
376 DIV.mw-content-ltr P:first-of-type {
377 text-indent: 0;
378 }
379 /* Font Awesome への干渉を防ぐ */
380 I.fa, I.fab, I.fad, I.fal, I.far, I.fas {
381 text-indent: 0;
382 }
383
384 /* httpsの外部リンクアイコンを錠ではなく通常のものに変更する */
385 /* #content a.external[href^="https://"], .link-https {
386 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=") center right no-repeat;
387 background: url("/resources/src/mediawiki.skinning/images/external-ltr.png") center right no-repeat!ie;
388 padding-right: 13px;
389 } */
390 /* 外部リンクアイコンを画像ではなく文字に変更する */
391 #content a.external::after, .link-http::after, .link-https::after {
392 color: #44f;
393 font-size: 80%;
394 content: "🔗";
395 }
396 #content a.external, #content a.external[href^="https://"], .link-http, .link-https {
397 background: none;
398 padding-right: 0;
399 }
400
401 /* Extension:CloudImage */
402 IMG.cimg {
403 max-width: 100%;
404 height: auto;
405 }
406 FIGURE.cimg {
407 clear: both;
408 margin: 2px;
409 border: 1px solid #c8ccd1;
410 background-color: #f8f9fa;
411 font-size: 94%;
412 text-indent: 0;
413 }
414 FIGCAPTION.cimgcaption {
415 padding: 2px;
416 text-align: left;
417 white-space: pre-wrap;
418 }
419 DIV.mw-content-ltr P IFRAME.cimg {
420 margin-left: -1em;
421 }
422
423 /* Extension:ClipBox */
424 .clipbox {
425 font-size: 16px;
426 color: #333;
427 margin-bottom: 0.5em;
428 // display: flex;
429 gap: 5px;
430 align-items: center;
431 }
432
433 .clipbox input {
434 padding: 7px 0;
435 text-align: center;
436 border-radius: 5px;
437 font-size:14px;
438 letter-spacing:1px;
439 }
440
441 .clipbox button {
442 font-size: 16px;
443 padding: 9px;
444 border-radius: 5px;
445 color:#444;
446 }
447
448 .clipbox button:hover {
449 opacity: 0.8;
450 }
451
452 /* for IPv6 Ready */
453 DIV#ipv6ready {
454 margin-bottom: 1em;
455 text-align: center;
456 width: 100%;
457 font-size: 75%;
458 white-space: nowrap;
459 line-height: 100%;
460 color: #444;
461 }
462
463 DIV#ipv6ready SPAN#ready {
464 background-color: #5af;
465 opacity: 0.8;
466 border-radius: 2px;
467 padding: 4px;
468 margin: 0;
469 color: #fff;
470 }
471
472 DIV#ipv6ready SPAN#ip {
473 background-color: #eee;
474 opacity: 0.8;
475 border: 1px solid #666;
476 border-radius: 2px;
477 padding: 3px;
478 margin: 0;
479 color: #333;
480 font-weight: bold;
481 }
482
483 DIV#ipv6ready A {
484 color: #000;
485 text-decoration: none;
486 }
487
488 /* Extension:YJShopping */
489 DIV.yjshopping {
490 clear: both;
491 width: 100%;
492 min-height: 200px;
493 margin: 0 0 0.5em 0;
494 padding: 0.5em;
495 border: 1px solid #444;
496 overflow: hidden;
497 }
498 DIV.yjshopping IMG.yjshoppingimg {
499 float: left;
500 margin: 0.1em 1em 0.1em 0.1em;
501 }
502 DIV.yjshopping P.yjshoppingname {
503 margin: 0;
504 font-size: 90%;
505 text-indent: 0;
506 }
507 DIV.yjshopping P.yjshoppingstore::before {
508 background-color: #bbb;
509 border-radius: 10%;
510 color: #fff;
511 padding: 0 0.5em 0 0.5em;
512 margin-right: 0.5em;
513 content: "広告";
514 }
515 DIV.yjshopping P.yjshoppingstore {
516 margin: 0;
517 font-size: 80%;
518 text-indent: 0;
519 }
520 DIV.yjshopping UL {
521 margin: 0;
522 }
523 DIV.yjshopping UL LI {
524 display: inline-block;
525 text-align: center;
526 list-style: none;
527 font-size: 85%;
528 width: 10em;
529 margin: 0.2em;
530 padding: 0.2em 0.5em 0.2em 0.5em;
531 border-radius: 0.5em;
532 white-space: nowrap;
533 }
534 DIV.yjshopping UL LI A {
535 color: #fff;
536 }
537 DIV.yjshopping UL LI.shoplinkyahoo {
538 background-color: #f55;
539 }
540 DIV.yjshopping UL LI.shoplinkpaypaymall {
541 background-color: #982;
542 }
543 DIV.yjshopping UL LI.shoplinkamazon {
544 background-color: #f90;
545 }
546 DIV.yjshopping UL LI.shoplinkrakuten {
547 background-color: #c00;
548 }
549 DIV.yjshopping UL LI.shoplinkbiccamera {
550 background-color: #e01;
551 }
552 DIV.yjshopping UL LI.shoplinksofmap {
553 background-color: #16f;
554 }
555 DIV.yjshopping UL LI.shoplinksofmapused {
556 background-color: #3ba;
557 }
558 DIV.yjshopping UL LI.shoplinknaturum {
559 background-color: #084;
560 }
561 DIV.yjshopping UL LI.shoplinkhonto {
562 background-color: #4af;
563 }
564 DIV.yjshopping UL LI.shoplinkebookjapan {
565 background-color: #f46;
566 }
567 DIV.yjshopping UL LI.shoplink7net {
568 background-color: #153;
569 }
570 DIV.yjshopping UL LI.shoplinkiyec {
571 background-color: #153;
572 }
573 DIV.yjshopping UL LI.shoplinkwowma {
574 background-color: #f71;
575 }
576 DIV.yjshopping UL LI.shoplinknttxstore {
577 background-color: #06a;
578 }
579 DIV.yjshopping UL LI.shoplinkhikaritv {
580 background-color: #e70;
581 }
582 DIV.yjshopping UL LI.shoplinkqoo10 {
583 background-color: #5af;
584 }
585 DIV.yjshopping UL LI.shoplinkanker {
586 background-color: #2ae;
587 }
588 DIV.yjshopping UL LI.shoplinkmercari {
589 background-color: #f00;
590 }
591 DIV.yjshopping UL LI.shoplinkkakakucom {
592 background-color: #02d;
593 }
594
595 /* Extension:AmazonSearch */
596 DIV.amazonsearch {
597 clear: both;
598 width: 100%;
599 min-height: 180px;
600 margin: 0 0 0.5em 0;
601 padding: 0.5em;
602 border: 1px solid #444;
603 overflow: hidden;
604 }
605 DIV.amazonsearch IMG.amazonsearchimg {
606 float: left;
607 margin: 0.1em 1em 0.1em 0.1em;
608 }
609 DIV.amazonsearch P.amazonsearchname {
610 margin: 0;
611 font-size: 90%;
612 text-indent: 0;
613 }
614 DIV.amazonsearch P.amazonsearchauthor::before {
615 background-color: #bbb;
616 border-radius: 10%;
617 color: #fff;
618 padding: 0 0.5em 0 0.5em;
619 margin-right: 0.5em;
620 content: "広告";
621 }
622 DIV.amazonsearch P.amazonsearchauthor {
623 margin: 0;
624 font-size: 80%;
625 text-indent: 0;
626 }
627 DIV.amazonsearch UL {
628 margin: 0;
629 }
630 DIV.amazonsearch UL LI {
631 display: inline-block;
632 text-align: center;
633 list-style: none;
634 font-size: 90%;
635 width: 12em;
636 margin: 0.2em;
637 padding: 0.2em 0.5em 0.2em 0.5em;
638 border-radius: 0.5em;
639 white-space: nowrap;
640 }
641 DIV.amazonsearch UL LI A {
642 color: #fff;
643 }
644 DIV.amazonsearch UL LI.shoplinkamazon {
645 background-color: #f90;
646 }
647
648 /* Extension:Yado */
649 DIV.yado {
650 clear: both;
651 width: 100%;
652 margin: 0 0 0.5em 0;
653 padding: 0.5em;
654 border: 1px solid #666;
655 }
656 DIV.yado P {
657 text-indent: 0;
658 }
659 DIV.yado IMG.yadoimg {
660 margin: 0.1em 0.5em 0.1em 0.1em;
661 width: 180px;
662 }
663 DIV.yado P.yadoname {
664 margin: 0;
665 font-size: 90%;
666 }
667 DIV.yado P.yadospecial {
668 margin: 0.2em 0 0 1em;
669 font-size: 72%;
670 }
671 DIV.yado-rate {
672 display: inline;
673 margin: 0;
674 text-align: center;
675 white-space: nowrap;
676 }
677 PRE.yado-rate-mark {
678 display: inline-block;
679 white-space: nowrap;
680 overflow: hidden;
681 margin: 0.5em auto;
682 line-height: 20px;
683 width: 80px;
684 font-size: 16px;
685 background: none;
686 border: none;
687 }
688 PRE.yado-rate-mark SPAN.yado-rate-mark-back {
689 display: inline-block;
690 position: absolute;
691 }
692 PRE.yado-rate-mark SPAN.yado-rate-mark-back::after {
693 content: '★★★★★';
694 color: #ddd;
695 }
696 PRE.yado-rate-mark SPAN.yado-rate-mark-front {
697 display: inline-block;
698 position: relative;
699 }
700 PRE.yado-rate-mark SPAN.yado-rate-mark-front::after {
701 content: '★★★★★';
702 overflow: hidden;
703 display: inline-block;
704 color: orange;
705 }
706 P.yado-rate-score {
707 display: inline;
708 line-height: 18px;
709 font-size: 16px;
710 white-space: nowrap;
711 }
712 DIV.yado P.yadostation {
713 display: inline;
714 margin: 0.5em 0 0 1.5em;
715 font-size: 16px;
716 }
717
718 /* Google Adsense 広告領域の確保（CLS対策） */
719 DIV#adunit {
720 min-height: 320px;
721 }