【CSS】遊戯王カードWikiをダークモードにしよう
前フリ
夜な夜な手持ちのカードを組み合わせてデッキを調整したり、効果の確認の為にネットを調べたりするのは、遊戯王に限らずカードゲーマーのあるあるだと思う。
私もそうだ。
そしてオタクはみんなダークモードが好きだろう？
TwitterにしろYouTubeにしろ、画面を長時間眺めるオタクはダークモードとかにしたがるものだろう。
私もそうだ。
デッキ調整や効果確認に大層お世話になっている「遊戯王カードWiki」様だが、一つだけ気になる事と言えば…
サイトがめちゃくちゃ白い。
ダークモードに慣れきったオタクの目にはちょっと疲れる程度には明るい…。
というわけで、ユーザーCSSを作成して
このようなダークモードにしていこうという話だ。
ユーザーCSSを作る
と、いうことなのでユーザーCSSを作っていくが、そんな大層な事はしない。
元がWikiなので、基本が統一されていて、CSSの初歩を齧っていればわかる程度の範囲を改変するだけで良い。
尚、ユーザーCSSはブラウザ側で表示の際に見た目を書き換えているだけなので、サーバーに過剰な負荷がかかったりとかは無いので安心して欲しい。（予防線）
ユーザーCSSを適用するには、
各々のブラウザにアドオンを入れる。
ユーザーCSS用のアドオンであればおそらくどれも大して変わらないと思うが、私は「Stylus」を利用して作成したぞ。
CSSの中身
まずCSSを適用する範囲を指定する。
指定するURLは遊戯王カードWikiに絞っておけばいいので
https://yugioh-wiki.net/
「次で始まるURL」の項目に上記URLを入力する。
アドオンによっては書き方は異なるだろうが、そこはアドオン名とCSSの作り方で調べてくれ。
続いて中身の部分だが、全てコメントアウトでどこが何かを記載しているので、地の文では省略させていただく。
colorが文字色で、background-colorが背景の色だ。
配色が気に入らない場合は、各自HTMLのカラーコードとかを調べて、#AAAAAA みたいになってるところを任意の色に置き換えれば、好きな配色にできる。
/*サイト全体の色指定*/
body, td {
color:#ddd;
background-color:#222;
}
/*リンク部分の色指定*/
a:link{
color:#89b4ff
}
/*訪問済みリンクの色*/
a:visited{
color:#b49999;
}
/*リンクにカーソルを乗せている間の背景色*/
a:hover{
background-color:#5e5e5e
}
/*カード名など、大きいくくりの指定*/
h1, h2 {
background-color:#444;
}
/*ページ内の区切りの部分の指定*/
h3{
border-bottom: 3px solid #999999;
border-top: 1px solid #999999;
border-left: 10px solid #999999;
border-right: 5px solid #999999;
background-color:#444;
}
/*メニューバーの見出し*/
h4{
border-left:18px solid #999999;
background-color:#444;
}
/*メニューバーの見出し(小)*/
h5,h6{
background-color:#444;
}
/*効果表記欄の色指定*/
pre{
color:#ddd;
background-color:#333;
}
/*効果欄のリンクマーカー表示部の透明度(元が0.4と薄かった為)*/
#test {
opacity: 0.8;
}
/* 表のグリッドライン */
.style_table {
background-color:#ddd;
}
/*表の最上部の色*/
thead th.style_th, tfoot th.style_th {
background-color: #444f59;
}
/*表の最左列の色*/
.style_th {
background-color:#333;
}
/*表の背景色*/
.style_td {
background-color:#444;
}リンクマーカーの部分に関しては元のCSSの記載が「#test」のままだったのが気がかりだが、リンクマーカーの記載が始まってすでに長いが期間が経っている為、おそらく変わることは無いと思われる。
仮にリンクマーカーの表記がおかしくなっていた場合はおそらくそこに変更が加わったのだろうと推察される。
このようなユーザーCSSを適用することで、先に出した「オレイカルコスの結界」のページのようなダークモードを適用できる。
しばらく自分で使ってみているが、基本的に問題なく使えているので、仮に何らかの不都合…というか、CSSのせいで可読性が損なわれていたり、ダークモード化されていない部分があったら、自力で修正するか、当該ページのカード名とどの部分がどう変かをセットでコメント報告してもらえると助かります。
まあ、元がWikiなのでそんなめちゃくちゃに特殊な処理をしているページがあるとは思いたくないが、遊戯王カードのカードプールは異様に豊富なので、観たことのないページに特殊な設計がされている可能性も無いとは言い切れないからね…。
というわけで、大層な記事では無いけれど、私のように「遊戯王カードWikiダークモードにできたりしないかな…」とか思って検索した民が救われていたらいいな、の記事でしたとさ。
ルールとマナーを守って楽しくデュエル！