ダンジョンブックスのサイトの色が目に痛すぎるのでFireFoxのアドオンでCSSを上書きするようにしてみた

アキハバラの(地理的に)超ダンジョン的な位置にあるエロマンガ屋、ダンジョンブックスのサイト。背景が真っ赤で目に痛い。痛すぎる。

秋葉原ダンジョンブックス店長日記
http://ameblo.jp/dungeon2008/

RSSで更新情報見てるだけでも十分使えるんだけど、そこからリンクをクリックして見てしまうと、一瞬で目がムスカ的なことになる。

そこでFirefoxのアドオンでこのサイトだけ色を変えるようにしてみたというお話。基本的にこの辺全然詳しくないので、もっとスマートなやり方があったら教えてください。

Adblock Plusでスタイルシートを無効にする

Mozilla Japan - Firefox 用アドオン - Adblock Plus
https://addons.mozilla.jp/firefox/details/1865

インストール。細かい説明は省く。
ダンジョンブックスのブログを開いた状態でAdblock Plusのブロック要素一覧を開く。http://ameblo.jp/skin/templates/a6/df/10005692892.css ってのがあるからブロックする。これでタブを再読み込みすると、ブログのスタイルがめちゃくちゃに崩れる。とりあえず赤くないのでおｋ。

Stylishで個別スタイルシートを登録する

Mozilla Japan - Firefox 用アドオン - Stylish
https://addons.mozilla.jp/firefox/details/2108

インストール。こっちのアドオンはさっき初めて使ったので、使い方間違ってるかも。
インストール後、どうやって使うのか非常にわかりづらいんですが、Firefoxの右下に超ちっさいアイコンが出てるので、それをクリック。「新しいスタイルを書く」→「このURL専用」を選択。

新しいスタイルを書くウィンドウが出てくる。名前は適当に「ダンジョンブックス」とか付ける。タグは知らん。下の大きなフォームのところに

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("http://ameblo.jp/dungeon2008/entry-10338294498.html") {
}

みたいなのが出てると思うので、まずこれを↓に書き換える

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://ameblo.jp/dungeon2008/") {
}

で、次にさっきブロックしたCSS(http://ameblo.jp/skin/templates/a6/df/10005692892.css)の中身をコピーして、メモ帳とかのテキストエディタにペースト。
ペーストしたものの中から、FF0000を検索すると、147行目ぐらいに

background-color: #FF0000;

ってのがあると思います。これを好きな背景色に変える。自分は#000000にしました。
で、編集したところを含めて全部をコピーして、さっきの新しいスタイルを書くウィンドウの{}の中に貼り付ける。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://ameblo.jp/dungeon2008/") {
/*

-

ameblo CSS Skin Settings
FileName: common.css
Version: 2006.06/23
(途中省略)
height: 566px;
}
#header {
background-repeat:repeat-x;
}
}

こんな風になるかと。

で、「お試し」ボタンを押すとダンジョンブックスの背景色が変わり、それ以外のスタイルは元通りになるかと。ただ、なんかエラーでてるみたいだけど…それはamebloのCSSが悪いんじゃねーの？って感じで俺は知らん。

背景色に納得したら「保存」を押して完了。

というわけで、ダンジョンブックスの色のおかげでStylishの使い方がわかったのでした。このStylishはUIがわかりづらくて酷いですが、ちょっと使える気がした。