旧Rフェイススタジオ出張所

ゲームや配信のお話。

【ニコ生】 ニコ生のコミュニティプロフィールページの色がおかしいからカスタマイズする

こんばんは、こうたです。

 

本日(10月4日)、突然ニコ生のコミュニティプロフィールページがレスポンシブ対応(レスポンシブとは)となり、物議を醸しだしています。ちょっとゲームの話から脱線していますが、一応ここはニコ生の出張所って事なんで・・・良いですよね?

レスポンス対応自体はまあ、最近はPC、スマホタブレットと対応しなければならない画面サイズが増えてきていますから、ユーザビリティとしては良い判断だと思いますが、何故かわかりませんが、色を緑にしたのです。です。

 

現在の自分のページはこうなってます。

f:id:k0ta0uchi:20161004193556p:plain

え、なにこれ・・・。目に優しい・・・。環境にやさしい・・・。

 

とか言ってる場合じゃありません。上のメニューは真っ黒そのままなのにもかかわらず、急にプロフィールページだけが緑になってしまいました。他のページは黒を基調としたページのままです。まあ一番コミュニティページが使ってるユーザーが少ないだろうと判断してのリリースだとは思いますが・・・。

 

とりあえず色がダサいので、元の黒を基調としたページに戻してみます。

完成系はこんな感じ。

f:id:k0ta0uchi:20161004193816p:plain

どっちにしてもダセエだろってのは無しです。と言うかそもそもお前のコミュニティプロフィールなんでマリオがいるんだよ!!とかも無しです。良いんです。好きなんですマリオが。(ちなみにこれはマリオ3です。)

 

変更手順(Chrome互換ブラウザ及びFirefox対応)

1.拡張をインストール

Stylishと言う拡張をダウンロードします。

Chrome:

Stylish - Chrome ウェブストア

Firefox:

Stylish :: Add-ons for Firefox

 

2.下記のサイトからスタイルをインストールする

10月5日追記:メインコンテンツのリンクの色を修正しました。

ニコニココミュニティプロフィールページを黒っぽくするやつ - Themes and Skins for Nicovideo - userstyles.org

f:id:k0ta0uchi:20161004201832p:plain

「Install with Stylish」をクリックするとインストールされ、プロフィールページが変更されます。 

 

 

 

下記は自分でスタイルを作成したい場合のやり方です。

2.CSSコードをコピーしてくる

このサイトに、私が作成したCSSコードがあります。

Chrome:

[CSS] ニコニココミュニティプロフィールページを黒っぽくするやつ(Chrome) - Pastebin.com

Firefox:

[CSS] ニコニココミュニティプロフィールページを黒っぽくするやつ - Pastebin.com

 

一番したの「RAW Paste Data」ってところからコピーしてきましょう。

 

3.新規スタイルを作成

Stylishでは、そのページ用のCSSを適用する(見た目を変える)ことをスタイルと言い、今回はそのスタイルを新しく作ります。

下記スクリーンショットChromeのモノ(Firefoxは若干違いますがわかると思います。)

f:id:k0ta0uchi:20161004194649p:plain

拡張をインストールすると出てきたボタンをクリックすると、「このサイト用のスタイルはインストールされていません。」と出るので、「インストール済みのスタイルを管理」をクリックします。

f:id:k0ta0uchi:20161004194747p:plain

新しいページのサイドバーにこんなメニューが出てきます。「新しいスタイルを作成」をクリックします。

f:id:k0ta0uchi:20161004195748p:plain

 

「スタイルを追加」画面が出てきます。左に空欄があるので適当に名前を入れましょう。私は「ニコニココミュニティプロフィールページを黒っぽくするやつ」にしました。

そして右側にある、コードと書かれている部分の空白部分に、先ほどコピーしてきたコードをペーストしましょう。

 

Chromeの場合、貼り付けたコードの下に、「個別指定」と言うボタンがあるのでクリック。適用先を「次で始まるURLに変更し、その右側に

http://com.nicovideo.jp/community/

をペーストします。

 

ペーストが終わったら左側にある「保存」をクリックして完了です。

 

 

おしまい 

これでページの色を変えることができました。ちなみに中身はただのCSSです。ので色を変えたい場合は、色指定を色々いじってみると自分好みに変えることができていいかもしれません。