MediaWiki:Common.css
提供: 3代目クッキー☆解説Wiki
注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。
- Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
- Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
- Microsoft Edge: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください。
/*
* 3代目クッキー☆解説Wiki カスタムCSS
* このページに記述した内容は、Wikiのすべてのページに適用されます。
*/
/* ===== 全体のコンテナ ===== */
.main-page-container {
/* 必要であればここにスタイルを追加 */
}
/* ===== お知らせセクション ===== */
.main-page-notice {
background-color: #f9f9f9; /* 背景を薄いグレーに */
border: 1px solid #ccc; /* 枠線を引く */
border-radius: 8px; /* 角を丸くする */
padding: 1em; /* 内側の余白 */
margin-bottom: 2em; /* 下側の余白 */
}
.main-page-notice p {
margin: 0; /* お知らせ内の段落の余白をなくす */
}
/* ===== このWikiについてセクション ===== */
.main-page-about {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 8px;
padding: 1em;
margin-bottom: 2em;
}
/* ===== 警告ボックス ===== */
.main-page-warning {
background-color: #fff0e6; /* 背景を薄いオレンジに */
border: 2px solid #ff4500; /* 枠線をオレンジ色に */
border-radius: 5px;
padding: 0.8em;
margin-top: 1em;
}
/* ===== クイックリンク セクション ===== */
.main-page-quick-links {
/* 必要であればここにスタイルを追加 */
}
/* クイックリンクのテーブル（グリッドレイアウト用） */
.quick-links-table {
width: 100%;
border-spacing: 15px; /* カード間の間隔 */
border-collapse: separate;
margin-top: 1em;
}
.quick-links-table td {
width: 50%; /* 横に2つ並べる */
vertical-align: top;
padding: 0;
}
/* ===== クイックリンク (最終版) ===== */
/* PC表示：2列のグリッドレイアウト */
.quick-links-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2つの列を均等に配置 */
gap: 15px; /* カード間の隙間 */
}
/* カード全体のスタイル */
.quick-link-card {
display: flex;
align-items: center;
background-color: #f5faff;
border: 1px solid #a3d1ff;
border-radius: 8px;
padding: 15px;
transition: background-color 0.2s, border-color 0.2s;
}
.quick-link-card:hover {
background-color: #eaf5ff;
border-color: #66b3ff;
}
/* アイコンのスタイル */
.quick-link-icon {
margin-right: 15px;
flex-shrink: 0;
}
/* テキスト部分のスタイル */
.quick-link-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 5px;
}
.quick-link-title a {
color: #0056b3;
text-decoration: none;
}
.quick-link-desc {
font-size: 0.9em;
line-height: 1.4;
}
/* --- スマホ表示用の設定 (画面幅が720px以下で適用) --- */
@media (max-width: 720px) {
/* クイックリンクを縦一列にする */
.quick-links-container {
grid-template-columns: 1fr; /* 1列表示に変更 */
}
}
/* ===== キャラクター情報ボックスのデザイン ===== */
.infobox-character {
width: 250px;
float: right;
margin-left: 1em;
margin-bottom: 1em;
border: 1px solid #ccc;
border-spacing: 3px;
background-color: #f9f9f9;
font-size: 90%;
}
.infobox-character th,
.infobox-character td {
text-align: left;
vertical-align: top;
}
.infobox-character th {
width: 30%;
font-weight: bold;
}
.infobox-character td {
width: 70%;
}
.infobox-character .infobox-character-name {
font-size: 125%;
font-weight: bold;
text-align: center;
background-color: #e6e6fa; /* ヘッダーの背景色 */
}
.infobox-character .infobox-character-image {
text-align: center;
}
/* 「特別:新しいページ」などをページに埋め込んだ際の、上部のオプションパネルを非表示にする */
.mw-specialpage-summary,
.mw-newpages-form,
.mw-rc-filters-hr,
.mw-rc-filters,
.mw-rc-legend {
display: none;
}
/* 「特別:新しいページ」などをページに埋め込んだ際の表示をシンプルにする */
.mw-specialpage-summary,
.mw-newpages-form,
.mw-rc-filters-hr,
.mw-rc-filters,
.mw-rc-legend,
.mw-changeslist-time,
.mw-changeslist-links,
.mw-usertoollinks,
.mw-newpages-length,
.mw-changeslist-comment { /* ← 編集の要約を非表示にする設定を追加 */
display: none;
}
/* リストの各項目の左側の余白を調整 */
.mw-specialpage-embedded .mw-changeslist-line-inner {
margin-left: -2em;
}
/* サイドバーの「このページを引用」を非表示にする */
#t-cite {
display: none;
}
/* =======================================
スマホ表示用の設定 (画面幅が720px以下で適用)
======================================= */
@media (max-width: 720px) {
/* --- キャラクターページのプロフィール表（情報ボックス）を回り込み解除 --- */
.infobox-character,
.wikitable[style*="float:right"],
.wikitable[style*="float: right"] {
float: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 1.5em !important;
}
/* --- トップページのクイックリンクを縦一列に並べる --- */
.quick-links-table,
.quick-links-table tr,
.quick-links-table td {
display: block;
width: 100%;
box-sizing: border-box;
}
.quick-links-table td {
padding-bottom: 15px;
}
.quick-links-table td:last-child {
padding-bottom: 0;
}
.quick-link-item {
flex-direction: column;
text-align: center;
}
.quick-link-icon {
margin-right: 0;
margin-bottom: 10px;
}
/* --- トップページのスポットライトコーナーを縦一列にする (最終調整版) --- */
/* テーブルのセルを強制的に回り込ませて縦並びにする */
.spotlight-table td {
float: left;
width: 100%;
box-sizing: border-box;
padding: 0 0 15px 0 !important; /* 下に隙間を空ける */
}
/* 最後の要素の下の隙間は消す */
.spotlight-table tr:last-child td:last-child,
.spotlight-table td:last-child {
padding-bottom: 0 !important;
}
/* 「注目のキャラクター」ボックス内で、画像の右寄せを解除して中央に配置 */
.spotlight-table .thumb.tright {
float: none;
display: block;
margin: 10px auto;
}
}
/* ===== 【スマホ表示 最終強制修正】 ===== */
@media (max-width: 720px) {
/* スポットライトの箱を強制的に縦積みにする */
.spotlight-container {
flex-direction: column !important;
}
/* キャラクター画像の回り込みを強制的に解除 */
.spotlight-item .thumb.tright {
float: none !important;
margin: 10px auto !important;
}
}
/* ===== トップページのお知らせ欄のデザイン ===== */
.main-page-notice {
background-color: #fdfaea; /* 薄い黄色の背景 */
border: 1px solid #f0e68c; /* 少し濃い黄色の枠線 */
border-left: 5px solid #f0e68c; /* 左側の線を少し太くしてアクセントに */
border-radius: 5px;
padding: 15px 20px;
margin: 1.5em 0;
}
.notice-title {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 0.5em;
padding-left: 28px;
position: relative;
}
/* お知らせアイコン (iマーク) をCSSで表示 */
.notice-title::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DAA520'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.notice-content {
line-height: 1.5;
}
