アットウィキロゴ

編集ガイド(色・装飾のつけ方)

このwikiは見た目を揃えるため、色やデザインは管理者のCSSでまとめて管理しています。
編集者のみなさんは「色コードを書く」のではなく「決められた印(クラス)を付ける」だけでOKです。

現在のCSS(AIに装飾を頼むとき用)

AIに編集・装飾を頼むときは、下のCSSを丸ごと渡して「このクラスを使って atwiki 記法で装飾して」と依頼すると早いです。
解説を読まなくても、使える印(クラス)と色がこの中に全部入っています。
※これは管理者がCSS編集に入れている現行CSSの写しです。

+ ▼ 現在のCSS全文(クリックで展開)
/* =============================================================
   LWF Wiki ダークテーマ  (atwiki グローバルCSSへ貼り付け)
   方針: ダーク基調(calc/ゲーム準拠)+見出しのみゲームフォント
   配置: 管理メニュー →「スタイルシート(CSS)編集」に丸ごと貼る
   注意:
     - HTMLタグは本文に書かない。装飾は #divclass / &spanclass で当てる。
     - !important は使わない(このCSSは既定スキンの後に読まれ、後勝ちで効く)。
     - 悪魔セルの色は各md側が直接ダーク色(BGCOLOR)を持つ(CSSでの上書きはしない)。
   ============================================================= */

/* --- ゲームフォント(見出し用のみ)---------------------------
   M PLUS 1 = ゲームの日本語フォント(見出しに使用)
   Limelight = ラテン専用の装飾フォント(wikiタイトル h1 のロゴ体に使用)   */
@import url('https://fonts.googleapis.com/css2?family=Limelight&family=M+PLUS+1:wght@700;800&display=swap');

:root{
  --bg:#1a1a1e; --panel:#26262c; --panel2:#2f2f37; --line:#3a3a44;
  --text:#e8e8ec; --sub:#9b9ba6; --accent:#7c9cff; --accent-bg:#2a3354;
  --good:#5ec98a; --bad:#e0728a; --warn:#e0a85e;
  --head:"M PLUS 1","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --body:system-ui,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

/* --- 全体ベース --------------------------------------------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
}
/* 本文コンテナ(atwikiのスキンにより id/class が異なる場合あり。
   効かない時は実ページの本文要素に合わせてセレクタを追記すること) */
#wikibody, #content, .wikibody, .main, #container{
  background:var(--bg);
  color:var(--text);
}

/* --- 本文タイポグラフィ(可読性)--------------------------------
   既定スキンは本文が小さめ&行が詰まりがち。#wikibody/#content にだけ効かせ、
   メニュー・人気カード・サイトタイトルのサイズには影響させない。 */
#wikibody, #content{ font-size:15px; line-height:1.85; }
#wikibody p, #content p{ margin:.7em 0; }
/* 本文リスト:行間を空け、マーカーをアクセント色に(詰まって見えるのを解消) */
#wikibody ul, #wikibody ol, #content ul, #content ol{ margin:.6em 0 1em; padding-left:1.5em; }
#wikibody li, #content li{ margin:.5em 0; }
#wikibody ul li::marker, #content ul li::marker{ color:var(--accent); }

/* --- リンク(全領域:本文・メニュー・サイドバー含む)-------- */
a{ color:var(--accent); text-decoration:none; }
a:visited{ color:#b9a0e8; }
a:hover{ color:#a9c0ff; text-decoration:underline; }
/* 悪魔色セルの上のリンク(pacts上部ナビ等)は背景と被らないよう白+下線 */
#wikibody td:has(> .cellLucifer) a,   #wikibody td:has(> .cellLeviathan) a,
#wikibody td:has(> .cellSatan) a,     #wikibody td:has(> .cellMammon) a,
#wikibody td:has(> .cellBelphegor) a, #wikibody td:has(> .cellGehenna) a{
  color:#fff; text-decoration:underline;
}

/* --- メニュー/サイドバー等の領域をダーク化 ------------------
   atwikiスキンの主要コンテナを広めにカバー(存在しないidは無害)。
   実機で白いまま残る領域があれば、その要素の id/class を追記する。 */
#menu, #menubar, #menubar1, #menubar2, #submenu, #rightmenu, #leftmenu, #sidebar,
#side1, #side2, #side, .menu, .menubar, .side, .sidebar,
#contents, #content-wrapper, #main, #wrapper, #container{
  background-color:var(--bg); color:var(--text);
}
#menu a, #menubar a, #menubar1 a, #menubar2 a, #submenu a, #sidebar a, .menu a, .menubar a{
  color:#aebbf0; font-size:14px;   /* メニューリンクを大きめ・明るめに */
}
/* メニュー項目の上下間隔(右の人気カード #menubar2 は除外) */
#menu li, #menubar li, #menubar1 li, #submenu li, #sidebar li, .menu li{ margin:5px 0; }
#menu h2, #menu h3, #menubar h2, #menubar h3,
.menu h2, .menu h3{ color:var(--text); border-color:var(--line); }

/* --- 人気ページ等のリスト(#menubar2 > .plugin_popular)-----
   ただの箇条書きを順位付きカード風に。上位3件はメダルカラー。
   #menubar2 でスコープしてスキン既定のリスト装飾より詳細度を上げる。 */
#menubar2 .plugin_popular ul{ list-style:none; margin:0; padding:0; counter-reset:pop; }
#menubar2 .plugin_popular li{ margin:0 0 6px; counter-increment:pop; }
#menubar2 .plugin_popular li a{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:6px;
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  color:var(--text); text-decoration:none; font-size:13px;   /* 人気カードは現状サイズ維持 */
}
#menubar2 .plugin_popular li a::before{
  content:counter(pop);
  flex:0 0 1.5em; height:1.5em; line-height:1.5em; text-align:center;
  font-family:var(--head); font-weight:800; font-size:.8em;
  color:var(--accent); background:var(--accent-bg); border-radius:4px;
}
#menubar2 .plugin_popular li a:hover{ background:var(--panel2); border-color:var(--accent); }
#menubar2 .plugin_popular li:nth-child(1) a::before{ color:#1a1a1e; background:#e0c060; } /* 金 */
#menubar2 .plugin_popular li:nth-child(2) a::before{ color:#1a1a1e; background:#c4c8d0; } /* 銀 */
#menubar2 .plugin_popular li:nth-child(3) a::before{ color:#1a1a1e; background:#cf8a5e; } /* 銅 */

/* --- サイトタイトル(h1) / ページタイトル(h2) ----------------
   ヘッダ領域は #wikibody の外なのでグローバルに指定。 */
/* wikiタイトル(h1)はLatinロゴ体(Limelight)を先頭に、日本語はM PLUS 1へフォールバック。
   タイトルはスキン生成の #header h1 なので本文クラス(旧.lwfLogo)は当てられず、ここで直接指定する。 */
h1, #header h1, #wikiTitle, #wikiname, .wikiname{
  font-family:"Limelight",var(--head); font-weight:800; color:var(--text);
  letter-spacing:.06em;
}
h1 a, #header h1 a, .wikiname a{ color:var(--text); font-family:inherit; }   /* タイトルリンクは白系・フォント継承 */
h1 a:hover, #header h1 a:hover{ color:var(--accent); }
h2, #wikibody h2, #content h2, #pageTitle, .pagetitle, #pagename, .pagename{
  font-family:var(--head); font-weight:800; color:var(--text);
  border-bottom:2px solid var(--accent); padding-bottom:.2em;
}
h2 a, #wikibody h2 a, #content h2 a, #pageTitle a, .pagetitle a{ color:var(--text); }
/* ヘッダ内のページ名(#header > h2 > a 例:「トップページ」)は
   スキンが詳細度高めで暗色指定 → 直接上書き。小さいので下線・太装飾は外す。 */
#header h2{ border-bottom:none; padding-bottom:0; font-weight:600; }
#header h2, #header h2 a{ color:var(--accent); }
#header h2 a:hover{ color:#a9c0ff; }

/* --- 見出し(* / ** / *** → h3 / h4 / h5)------------------- */
#wikibody h3, #wikibody h4, #wikibody h5,
#content h3, #content h4{
  font-family:var(--head); font-weight:800; color:var(--text);
  border:none; letter-spacing:.02em;
}
/* 最上位見出し(*)に左アクセント帯 */
#wikibody h3, #content h3{
  border-left:4px solid var(--accent);
  padding-left:.5em; margin-top:1.8em; font-size:1.45em;
}
#wikibody h4, #content h4{ color:var(--sub); margin-top:1.35em; font-size:1.15em; }

/* --- 区切り線 ----------------------------------------------- */
#wikibody hr, #content hr{ border:none; border-top:1px solid var(--line); }

/* --- テーブル ----------------------------------------------- */
#wikibody table, #content table{
  border-collapse:collapse; background:var(--panel);
  border:1px solid var(--line);
}
#wikibody td, #wikibody th, #content td, #content th{
  border:1px solid var(--line); color:var(--text); padding:4px 8px;
  height:32px; vertical-align:middle;   /* 全行の縦幅を揃える(縦結合セルの画像で行が潰れないように) */
}
/* セル内インラインアイコン(&ref(...,inline))と文字の間隔・上下位置 */
#wikibody td img, #content td img{ margin-right:4px; vertical-align:middle; }
/* 見出しセル(|~…| → th)。md側でBGCOLOR指定がある悪魔ヘッダ等は
   そのインライン色が優先される(!important不要)。
   悪魔/使い魔セルの中央寄せは md 側の CENTER: で行う(CSSでは一律中央化しない)。 */
#wikibody th, #content th,
#wikibody td.style_th, #content td.style_th{
  background:var(--panel2); color:var(--text); font-weight:700;
}
/* 見出しは折り返さない。buff.md の入手経路列(初期/注文/電話…)のように
   セルの中身が ● と - だけの細い列だと、2文字の見出しが縦に割れて読めなくなるため。 */
#wikibody th, #content th{ white-space:nowrap; }

/* --- #region 折りたたみ(atwiki_plugin_region)--------------------
   #region は <table class="atwiki_plugin_region"> で描画される“レイアウト用”
   テーブル。上の汎用 table/td 装飾(枠線・背景・padding・height:32px・
   vertical-align:middle)がこのテーブルにも当たると、本体セル(td:3番目)の
   高さが32pxに固定+中央寄せされ、中の <pre>(CSS全文)がはみ出して後続
   セクションと重なる。データ表ではないので装飾を解除し、本体を自然な高さ・
   上寄せにする(これで折りたたみ開閉が正常にレイアウトされる)。 */
#wikibody table.atwiki_plugin_region,
#content  table.atwiki_plugin_region{
  background:transparent; border:none; width:auto;
}
#wikibody table.atwiki_plugin_region > tbody > tr > td,
#content  table.atwiki_plugin_region > tbody > tr > td{
  border:none; background:transparent; padding:0;
  height:auto; vertical-align:top;
}
#wikibody table.atwiki_plugin_region pre,
#content  table.atwiki_plugin_region pre{
  margin:0; white-space:pre; overflow:auto;   /* 長い行は折返さずスクロール */
}

/* --- 悪魔バンド(行全体塗り)-------------------------------
   md側の &spanclass(悪魔名){…} マーカーを :has() で拾い、その行の
   全セル(td/th)を悪魔色で塗る。#wikibody 配下にスコープして
   既定の th ルールより詳細度を上げている(!important 不要)。
   :has() 非対応ブラウザでは塗られず素のダークになる(許容)。
   重要: マーカーは「行の直下セルの直下」にある場合だけ効かせる
   (tr:has(> セル > .クラス))。単なる tr:has(.クラス) だと、
   #region のラッパー<tr>(中身全体を含む)までマッチし、折りたたみ内の
   全セルが後勝ちの1色で塗り潰される(2026-07-24 portal.mdで実証)。 */
#wikibody tr:has(> :is(td,th) > .lucifer)   :is(td,th),
#content  tr:has(> :is(td,th) > .lucifer)   :is(td,th){ background:#233a23; }
#wikibody tr:has(> :is(td,th) > .leviathan) :is(td,th),
#content  tr:has(> :is(td,th) > .leviathan) :is(td,th){ background:#3a3520; }
#wikibody tr:has(> :is(td,th) > .satan)     :is(td,th),
#content  tr:has(> :is(td,th) > .satan)     :is(td,th){ background:#3a2326; }
#wikibody tr:has(> :is(td,th) > .mammon)    :is(td,th),
#content  tr:has(> :is(td,th) > .mammon)    :is(td,th){ background:#2f2340; }
#wikibody tr:has(> :is(td,th) > .belphegor) :is(td,th),
#content  tr:has(> :is(td,th) > .belphegor) :is(td,th){ background:#1f2f3a; }
#wikibody tr:has(> :is(td,th) > .gehenna)   :is(td,th),
#content  tr:has(> :is(td,th) > .gehenna)   :is(td,th){ background:#3a2530; }

/* --- 悪魔セル単体の色(pacts.md 上部のキャラナビ等)---------
   行ではなく個々のセルを悪魔色に塗る。セルに &spanclass(cell悪魔名){…}
   を入れ、:has() でそのセルだけ塗る(td/thどちらでも可。見出しセル
   |~…| に空マーカーを入れる使い方はvote.mdのポータル名列など)。
   行バンド用クラス(.lucifer等)とは別名なので、6悪魔が並ぶナビ行でも
   競合しない。 */
/* 悪魔バンド(tr:has(...) :is(td,th))より詳細度を上げるため table tr を挟む。
   挟まないと、バンドの効いた行の中で個別セル色が負けて塗られない(2026-08-24 headless で判明)。 */
#wikibody table tr :is(td,th):has(> .cellLucifer),   #content table tr :is(td,th):has(> .cellLucifer)  { background:#233a23; }
#wikibody table tr :is(td,th):has(> .cellLeviathan), #content table tr :is(td,th):has(> .cellLeviathan){ background:#3a3520; }
#wikibody table tr :is(td,th):has(> .cellSatan),     #content table tr :is(td,th):has(> .cellSatan)    { background:#3a2326; }
#wikibody table tr :is(td,th):has(> .cellMammon),    #content table tr :is(td,th):has(> .cellMammon)   { background:#2f2340; }
#wikibody table tr :is(td,th):has(> .cellBelphegor), #content table tr :is(td,th):has(> .cellBelphegor){ background:#1f2f3a; }
#wikibody table tr :is(td,th):has(> .cellGehenna),   #content table tr :is(td,th):has(> .cellGehenna)  { background:#3a2530; }

/* --- バンドを打ち消す中立セル(cellPlain)-------------------
   rowspan で複数行にまたがる見出しセル(recipe.md の使い魔列など)は
   HTML上は「先頭行の<tr>」に属する。その行に悪魔マーカーがあると
   バンド規則が使い魔セルまで塗ってしまい、行ごとに解放元が違うのに
   1つの悪魔色が付いて誤解を招く(2026-08-21 headless Edge で再現)。
   セルの先頭に空マーカー &spanclass(cellPlain){} を置いて既定色へ戻す。
   バンド規則と詳細度を揃えてある(ともに 1id+1class+3type)ので、
   必ずこのブロックをバンド規則より後ろに置いて後勝ちさせること。 */
#wikibody table tr :is(td,th):has(> .cellPlain),
#content  table tr :is(td,th):has(> .cellPlain){ background:var(--panel2); }

/* --- レアリティ色(pacts.md のレア列セルのみ)---------------
   レア名を &spanclass(レアクラス){…} で包む。:has() でその行の
   th(=レア列セル・rowspan)だけを塗る(行全体は塗らない)。
   悪魔バンド同様、#regionラッパー行の誤マッチ防止のため直下限定。 */
#wikibody tr:has(> th > .common)    th, #content tr:has(> th > .common)    th{ background:#6b5836; color:#fff; }
#wikibody tr:has(> th > .uncommon)  th, #content tr:has(> th > .uncommon)  th{ background:#2e6b3e; color:#fff; }
#wikibody tr:has(> th > .rare)      th, #content tr:has(> th > .rare)      th{ background:#2d2e6b; color:#fff; }
#wikibody tr:has(> th > .epic)      th, #content tr:has(> th > .epic)      th{ background:#6b2d8c; color:#fff; }
#wikibody tr:has(> th > .legendary) th, #content tr:has(> th > .legendary) th{ background:#b34a2e; color:#fff; }

/* =============================================================
   共通装飾クラス(本文では #divclass / &spanclass で当てる)
   クラス名は半角英数字のみ・lwf プレフィックス(CLAUDE.md準拠)
   ============================================================= */

/* 注意box(各ページ冒頭の「※注意」用) */
.lwfNote{
  border-left:4px solid var(--warn); background:#2c281f;
  padding:.6em .9em; margin:.8em 0; border-radius:4px; color:var(--text);
}
/* カード(囲み) */
.lwfCard{
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:12px 14px; margin:.8em 0;
}
/* 見出し帯(セクション小見出しを目立たせたい時) */
.lwfBand{
  background:var(--accent-bg); border-left:4px solid var(--accent);
  padding:.4em .8em; font-family:var(--head); font-weight:700;
}
/* 目立たせたい導線ボタン(本文: &spanclass(lwfBtn){&blanklink(表示){URL}} )
   ボタン内は a:visited の色(薄紫)に埋もれないよう色を固定する */
.lwfBtn a, .lwfBtn a:visited{
  display:inline-block; margin:.3em 0; padding:.5em 1.4em; border-radius:8px;
  background:var(--accent-bg); border:1px solid var(--accent); color:var(--accent);
  font-family:var(--head); font-weight:800; font-size:1.2em; text-decoration:none;
}
.lwfBtn a:hover{ background:var(--accent); color:#16161c; text-decoration:none; }

/* 中央寄せ / 補足テキスト */
.lwfCenter{ text-align:center; }
.lwfSub{ color:var(--sub); font-size:.9em; }

/* --- 統計カード(メニューの counter/update 表示)------------------
   メニューに #divclass(lwfStat){{ … }} で囲んで使う。数字(counter出力)は
   地色(--text)で明るく、ラベル語は .lwfDim で薄く小さくして数字を目立たせる。
   メニュー幅が狭いので、ラベル・数値の行割りはメニューmd側の改行で固定する
   (rightMenu.md参照。桁が増えても崩れないよう更新日・累計は独立行)。
   ラベルは見出し行。block にすると atwiki の自動<br>と二重改行になり
   空行が出るため inline-block のまま余白だけ付ける。 */
.lwfStat{
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:8px 11px; margin:10px 0;
  color:var(--text); font-size:13px; line-height:1.7;
}
.lwfStat .lwfStatLabel{
  display:inline-block; margin:.6em 0 .1em;
  color:var(--accent); font-family:var(--head); font-weight:800; font-size:.85em;
}
.lwfStat .lwfStatLabel:first-child{ margin-top:0; }
.lwfStat .lwfDim{ color:var(--sub); font-size:.85em; }

/* --- 投票ページのナビ(vote.md冒頭のページ内リンク表)------------
   #divclass(voteNav){{ 表 }} で包むと、スクロールしても画面上部に
   貼り付く(長いページでもすぐ各セクションへ飛べる)。
   中身は表だが「データ表」ではないので、汎用のtable装飾(枠線・padding・
   height:32px)を解除して独立したピル型のバーに作り替える。
   悪魔色は既存の :has(> .cell悪魔名) と同詳細度で潰し合うため、このブロック内で塗り直す。 */
.voteNav{
  position:sticky; top:0; z-index:20;
  background:var(--bg); padding:6px 0 7px; margin-bottom:.6em;
  border-bottom:1px solid var(--line);
}
#wikibody .voteNav table, #content .voteNav table{
  background:transparent; border:none;
  border-collapse:separate; border-spacing:5px 0;
}
#wikibody .voteNav :is(td,th), #content .voteNav :is(td,th){
  border:none; border-radius:999px; padding:.25em 1em;
  height:auto; text-align:center; font-weight:700; font-size:.95em;
  background:var(--panel2);
}
#wikibody .voteNav :is(td,th) a, #content .voteNav :is(td,th) a{
  color:#fff; text-decoration:none; display:block;
}
/* 悪魔色。上の既定色(--panel2)と同詳細度なので、必ずこの後に置いて後勝ちさせる
   (順序を入れ替えると全部グレーに戻る。2026-08-18に踏んだ) */
#wikibody .voteNav :is(td,th):has(> .cellLucifer),   #content .voteNav :is(td,th):has(> .cellLucifer)  { background:#2f5130; }
#wikibody .voteNav :is(td,th):has(> .cellLeviathan), #content .voteNav :is(td,th):has(> .cellLeviathan){ background:#54492a; }
#wikibody .voteNav :is(td,th):has(> .cellSatan),     #content .voteNav :is(td,th):has(> .cellSatan)    { background:#552f34; }
#wikibody .voteNav :is(td,th):has(> .cellMammon),    #content .voteNav :is(td,th):has(> .cellMammon)   { background:#43315c; }
#wikibody .voteNav :is(td,th):has(> .cellBelphegor), #content .voteNav :is(td,th):has(> .cellBelphegor){ background:#2b4353; }
#wikibody .voteNav :is(td,th):has(> .cellGehenna),   #content .voteNav :is(td,th):has(> .cellGehenna)  { background:#533648; }
#wikibody .voteNav :is(td,th):hover, #content .voteNav :is(td,th):hover{
  filter:brightness(1.35);
}

/* --- vote.md 見出し装飾 --------------------------------------
   悪魔見出し(**)は「&spanclass(cell悪魔名){} 空マーカー+&ref顔
   アイコン+名前」で書き、:has() で見出し全体を悪魔色の帯にする。
   レアリティ見出し(***)は &spanclass(レアクラス){名前} を直接
   バッジに塗る(「エピック+レジェンダリー」のような複合見出しでも
   それぞれの色が出せるよう、:has()ではなくspan自体を塗る)。
   ※スキンにより */**/*** が h3〜h5 のどれに割り当たるかブレるため
   :is() で複数レベルをまとめて対象にしている。 */
#wikibody :is(h3,h4,h5):has(.cellLucifer),   #content :is(h3,h4,h5):has(.cellLucifer),
#wikibody :is(h3,h4,h5):has(.cellLeviathan), #content :is(h3,h4,h5):has(.cellLeviathan),
#wikibody :is(h3,h4,h5):has(.cellSatan),     #content :is(h3,h4,h5):has(.cellSatan),
#wikibody :is(h3,h4,h5):has(.cellMammon),    #content :is(h3,h4,h5):has(.cellMammon),
#wikibody :is(h3,h4,h5):has(.cellBelphegor), #content :is(h3,h4,h5):has(.cellBelphegor),
#wikibody :is(h3,h4,h5):has(.cellGehenna),   #content :is(h3,h4,h5):has(.cellGehenna){
  color:var(--text); padding:.25em .6em; border-radius:6px;
  display:flex; align-items:center; gap:8px;
}
#wikibody :is(h3,h4,h5):has(.cellLucifer),   #content :is(h3,h4,h5):has(.cellLucifer)  { background:#233a23; }
#wikibody :is(h3,h4,h5):has(.cellLeviathan), #content :is(h3,h4,h5):has(.cellLeviathan){ background:#3a3520; }
#wikibody :is(h3,h4,h5):has(.cellSatan),     #content :is(h3,h4,h5):has(.cellSatan)    { background:#3a2326; }
#wikibody :is(h3,h4,h5):has(.cellMammon),    #content :is(h3,h4,h5):has(.cellMammon)   { background:#2f2340; }
#wikibody :is(h3,h4,h5):has(.cellBelphegor), #content :is(h3,h4,h5):has(.cellBelphegor){ background:#1f2f3a; }
#wikibody :is(h3,h4,h5):has(.cellGehenna),   #content :is(h3,h4,h5):has(.cellGehenna)  { background:#3a2530; }
/* 見出し内のレアリティバッジ(色はレアリティカラー表と同じ)。
   スキンにより ***見出し が h4〜h6 のどれに割り当たっても効くよう
   :is() で全見出しレベルを対象にする(表内の .common 等には効かない) */
#wikibody :is(h3,h4,h5,h6) .common,    #content :is(h3,h4,h5,h6) .common,
#wikibody :is(h3,h4,h5,h6) .uncommon,  #content :is(h3,h4,h5,h6) .uncommon,
#wikibody :is(h3,h4,h5,h6) .rare,      #content :is(h3,h4,h5,h6) .rare,
#wikibody :is(h3,h4,h5,h6) .epic,      #content :is(h3,h4,h5,h6) .epic,
#wikibody :is(h3,h4,h5,h6) .legendary, #content :is(h3,h4,h5,h6) .legendary{
  display:inline-block; padding:.05em .55em; border-radius:4px;
  color:#fff; font-size:.9em;
}
#wikibody :is(h3,h4,h5,h6) .common,    #content :is(h3,h4,h5,h6) .common   { background:#6b5836; }
#wikibody :is(h3,h4,h5,h6) .uncommon,  #content :is(h3,h4,h5,h6) .uncommon { background:#2e6b3e; }
#wikibody :is(h3,h4,h5,h6) .rare,      #content :is(h3,h4,h5,h6) .rare     { background:#2d2e6b; }
#wikibody :is(h3,h4,h5,h6) .epic,      #content :is(h3,h4,h5,h6) .epic     { background:#6b2d8c; }
#wikibody :is(h3,h4,h5,h6) .legendary, #content :is(h3,h4,h5,h6) .legendary{ background:#b34a2e; }

/* --- 文中のレアリティバッジ(本文・表のセル内で使う)-----------------
   &spanclass(chipRare){レア} のように書くと小さな色ラベルになる。
   表のレアリティ列(th)ごと塗る .common 等とは別クラスにしてあるので、
   セルの背景色を巻き込まずに文章の途中へ置ける。 */
#wikibody .chipCommon,    #content .chipCommon,
#wikibody .chipUncommon,  #content .chipUncommon,
#wikibody .chipRare,      #content .chipRare,
#wikibody .chipEpic,      #content .chipEpic,
#wikibody .chipLegendary, #content .chipLegendary{
  display:inline-block; padding:.05em .55em; border-radius:4px;
  color:#fff; font-size:.9em; line-height:1.5;
}
#wikibody .chipCommon,    #content .chipCommon   { background:#6b5836; }
#wikibody .chipUncommon,  #content .chipUncommon { background:#2e6b3e; }
#wikibody .chipRare,      #content .chipRare     { background:#2d2e6b; }
#wikibody .chipEpic,      #content .chipEpic     { background:#6b2d8c; }
#wikibody .chipLegendary, #content .chipLegendary{ background:#b34a2e; }

画像も頼むとき(AIに渡す画像プロンプト)

画像の指定も任せたいときは、上のCSS全文と一緒に下のブロックも丸ごと渡してください。「上のCSSと下の画像一覧を使って、atwiki記法で装飾して」と頼めばOKです。

+ ▼ 画像の書き方+使える画像ファイル一覧(クリックで展開)
# 画像の貼り方(atwiki / ref プラグイン)
画像は次の形式で貼る:
  &ref(ファイル名, 置き場ページ, width=NN[,inline])
- 第2引数(置き場ページ)は画像の種類で決まる:
    アイテム      → img_item
    使い魔・悪魔   → img_chara
    資源アイコン   → img_value
    バフ・レリック → img_buff
- 小さくインライン表示するときは末尾に ,inline
    例) &ref(IronOre.png,img_item,width=24,inline)
    例) &ref(lucifer.png,img_chara,width=80)
- 色を付けたいセルに画像を置くときは、&spanclass(...) の中に &ref(...) を入れない
  (カンマで壊れる)。空マーカーを画像の前に置く:
    &spanclass(cellLucifer){}&ref(lucifer.png,img_chara,width=100)
- 行全体/レア列の色付けは &spanclass(クラス){…}(クラスはCSS側を参照)。
- 下の一覧に無いファイル名は使わない(存在しない画像はエラー表示になる)。
# 使える画像ファイル一覧
[使い魔・悪魔  第2引数=img_chara]
  belphegor.png, gehenna.png, goblin.png, leviathan.png, lucifer.png,
  mammon.png, momoko.png, raven.png, salamander.png, satan.png, slime.png,
  witch.png
[アイテム  第2引数=img_item]
  Adamantite.png, Amethyst.png, Cinnabar.png, Cobalt.png, Coin.png,
  Compost.png, GemPowder.png, Gold.png, GoldOre.png, Gunpowder.png, Iron.png,
  IronOre.png, Jade.png, Lemon.png, Lemonade.png, Lye.png, MagicChunk.png,
  Mercury.png, Mushroom.png, Mythril.png, Nitro.png, Olive.png,
  Orichalcum.png, Pickaxe.png, Ruby.png, Salt.png, Soda.png, Splitter.png,
  Splitter2.png, Sulfur.png, Wax.png, Wood.png
[資源アイコン  第2引数=img_value]
  All.png, Cash.png, Chemical.png, Construction.png, Fertilizer.png, Fuel.png,
  Grocery.png, Luxury.png, Magic.png
[バフ・レリック  第2引数=img_buff]
  AllCritByTime.png, BuffGemMagic.png, CancelGetFam.png, CashByLandTime.png,
  ConvertOnRAllFuel.png, Conveyor.png, Conveyor2.png, Conveyor2Supplies.png,
  ConveyorSpeedByTime.png, ConveyorSupplies.png, CrimeContract.png,
  FamExpense.png, FamIncome.png, FasterOrder.png, FreeLand.png,
  FreeLandSupplies.png, IntervalChemical.png, IntervalCrafter.png,
  IntervalFuel.png, IntervalMagic.png, IntervalSmelter.png,
  IntervalSummoner.png, IntervalWorker.png, LoseTransportSpeed.png,
  OnPurchaseTag1.png, OrderTag6ByAll.png, ReduceSkillCost.png,
  RelicAllSmelter.png, RelicAmethyst.png, RelicCobalt.png, RelicCritCash.png,
  RelicJade.png, RelicLye.png, RelicOrderTag1.png, RelicOrderTag6.png,
  RelicRepaymentTag4.png, RelicRuby.png, RelicTag2X10.png, RelicTag6X10.png,
  RepaymentLoseCash.png, SmelterSpeedByTime.png, Smuggling.png, Stamp.png,
  SummonerSpeed.png, WorkerIncome.png, WorkerSpeedByTime.png
※一覧は増減することがある。最新は img_item / img_chara / img_value / img_buff の各ページを参照。



※はじめに(大事)
  • 色コード(BGCOLORなど)を直接書かないでください。 印を付ければCSSが自動で色を付けます。
  • HTMLタグ(<div> など)は使わないでください。 ページが一般編集できなくなります。
  • 色そのものを変えたい・新しい色がほしい時は、本文をいじらず管理者に連絡してください。

※下の「書き方」に表示されている字面のとおりに入力すればOKです。



1. 悪魔の色(レシピ・ポータル・バフの表)

解放元の悪魔がわかるように、その行のどこか1セルを「印」で囲みます。行全体が自動でその悪魔の色になります。

書き方(解放条件のセルを囲む例):
|~|硫黄|…|&spanclass(satan){サタンの契約「不純物採取」(Common)}|

表示例:
硫黄 サタンの契約「不純物採取」(Common)

悪魔と印(クラス名)の対応:
悪魔 印(クラス名)
ルシファー lucifer
レヴィアタン leviathan
サタン satan
マモン mammon
ベルフェゴール belphegor
ゲヘナ gehenna

  • 印は行に1つあればOK(画像を含まない、文字だけのセルに付けるのが安全)。
  • 初期解放など色を付けない行は、印を付けなければそのまま(無色)です。



2. レアリティの色(契約ページ)

レア名を印で囲みます。レア列のセルだけ色が付きます。

書き方:
|~&spanclass(rare){レア}|契約名|効果の説明|
表示例:
レア 契約名 効果の説明

レアリティと印(クラス名)の対応:
レアリティ 印(クラス名)
コモン common
アンコモン uncommon
レア rare
エピック epic
レジェンダリー legendary

文章の中でレア度に色を付けるとき

上の印(rare 等)は表のレア列セルを丸ごと塗るためのものなので、説明文の途中で使うとセルごと塗り潰されてしまいます。
文中に小さなラベルとして置きたいときはchip+レアリティ名の印を使います。

書き方:
&spanclass(chipRare){レア}以上の契約は取得すると消えます
表示例:
レア以上の契約は取得すると消えます

レアリティ 印(クラス名)
コモン chipCommon
アンコモン chipUncommon
レア chipRare
エピック chipEpic
レジェンダリー chipLegendary

  • 使い分け: レア列そのものを塗る=rare 等/文章・説明セルの中に置く=chipRare 等。



3. アイコンのセル単体に色(契約ページ上部のキャラ一覧など)

1行に複数の悪魔が並ぶ表では、行ではなくセル1つだけを塗る別の印を使います。クラス名は cell+悪魔名(cellLucifer など)です。

書き方(画像セル / リンクセル):
|&spanclass(cellLucifer){}&ref(lucifer.png,img_chara,width=100)|
|&spanclass(cellLucifer){[[ルシファー>#lucifer]]}|
表示例:
ルシファー

重要:画像を印の中に入れない
  • 画像を印のに入れると、カンマ(,)が原因で画像が表示されなくなります。
  • 画像のときは空の印を画像の前に置くのが正解(例の上段)。
  • 文字や リンク は印の中に入れてOKです(例の下段)。



画像を貼るとき

画像は ref プラグインで貼ります。第2引数の「置き場」は画像の種類で決まります(下表)。

画像の種類 置き場(第2引数)
アイテム img_item
使い魔・悪魔 img_chara
資源アイコン img_value
バフ・レリック img_buff
ネタ画像 img_neta

書き方の例:
&ref(IronOre.png,img_item,width=24,inline)
&ref(slime.png,img_chara,width=80)
&ref(Cash.png,img_value,width=24,inline)
表示例:



  • 置き場ページ(上の表のリンク)に、使える画像とファイル名の一覧があります。新しい画像はそのページに添付してください。
  • 小さくインライン表示するときは末尾に ,inline を付けます(上の例)。
  • 迷ったら、似た既存行をコピーして置き場だけ合わせるのが確実です。



画像を外部リンク(新しいタブ)にするとき

&ref の第3引数にリンク先URL、第4引数に blank を指定すると、画像クリックで外部リンクが新しいタブで開きます。

書き方(URL直指定の画像の場合。第2引数の置き場は空欄でカンマだけ残す):
&ref(画像のURL,,リンク先URL,blank)

書き方(アップロード済み画像の場合。第2引数にページ名を入れる):
&ref(海1.jpg,ページ名,https://www.example.com,blank)

サイズや中央寄せも足せる:
&ref(画像のURL,,リンク先URL,blank,width=300,center)

  • blank単体では効かない。 リンク先URL(第3引数)とセットで指定したときだけ新規タブになる。
  • 第2引数(置き場ページ)は「アップロード画像をファイル名で指定するとき」専用の欄。URL直指定なら空欄のままカンマだけ打つ。



避けるべき例

  • 色コードの直書き → 印(spanclass)を使う
|BGCOLOR(#3a2326):硫黄|
  • HTMLタグ(<span> や <div> など)→ ページがロックされる。印を使う
  • 画像を印の中に入れる(画像が消える)→ 空印を画像の前に
|&spanclass(cellLucifer){&ref(lucifer.png,img_chara,width=100)}|



まとめ

  • 色は「印を付けるだけ」。色コードもHTMLも書かない。
  • 悪魔=行の印(lucifer 等)/レア=レア名の印(rare 等)/アイコン1セル=cell+悪魔名。
  • 画像のセルは空印を画像の前に置く。
  • 迷ったら管理者へ


最終更新:2026-08-24
最終更新:2026年08月24日 21:47