Skip to content
This repository has been archived by the owner on Dec 20, 2022. It is now read-only.

サービス／サイトの対応

Jump to bottom
AyumuNekozuki edited this page Nov 27, 2020 · 1 revision

サービス対応について

サービスに対応させる時の注意事項です。

  • サービスごとにまとめて対応させてください
    • 一部ページのみ対応を行うと、サービス内で眩しい・眩しくないなどの問題が発生します
  • チャンネル・ブロマガの対応は一旦中止してください。
    • 一チャンネル／一ユーザーごとにデザインが違います。細かいところまで対応できないため、様子見としてください。

対応手順

1. manifest.jsonに追記し、共通ヘッダー・切り替え機能に対応

以下の位置に追記を行ってください。

        {
            "matches": [
                "https://www.nicovideo.jp/*",
                "https://live.nicovideo.jp/*",
                "https://live2.nicovideo.jp/*",
+               "https://site.live.nicovideo.jp/*",
+               "追加するサービスのURL"   
            ],
            "js":["js/jquery-3.5.1.min.js","js/main.js"],
            "css":["style_for/parts/header.css"],
            "run_at": "document_start"
        },

共通ヘッダーがない場合は上記に加え、main.jsにも追記を行います。

//ヘッダ除外ネーム
const noheader = [
  "account.nicovideo.jp/login",
  "www.nicovideo.jp/feedback",
  "live.nicovideo.jp/create",
  "live2.nicovideo.jp/create",
  "site.live.nicovideo.jp/recent/namagame.html"
]

2.style_for内にサービスごとのディレクトリを作成する

見出し通りです。 ディレクトリ名は「サブドメイン名」を入力してください。

例：静画に対応させる場合　→　「seiga」という名前のディレクトリを作成
例：アツマールに対応させる場合　→　「game」という名前のディレクトリを作成

site.nicovideo.jp や site.live.nicovideo.jpなど、特設サイト系は、サービスディレクトリ内にsiteディレクトリを作成し、その中にファイルを作成してください。

例：site.liveに対応する場合

src 
 └── style_for 
      └── live
           └── site

3. [ページ名].scssファイルを作成・manifest.jsonにサイトを追記・ダークモードになるよう編集

ページ名.scssファイルを作成し、ダーク化を行います。

scssファイルから出力されたcssファイルをmanifest.jsonに指定し、確認しながら編集作業を行ってください。

例

        {
            "matches": [
                "https://account.nicovideo.jp/login*"
            ],
            "css": [
                "style_for/account/login.css"
            ]
        }

編集上の注意

  1. 極力色指定は_default.scssに記載された変数を使う
  2. .niconico-darkmode-setting-true直下にbackground-color: $main-background-colorを指定する
  3. aタグは文字の見やすさ・:visitedの必要性に考慮し色調整を行う

1 は、細かな色調整をまとめて行うためです。色変更が必要となった際に、全て編集しなければならないという事態を回避します。

2 はサイト移動を行う際に、一瞬白画面が映らないようにするための対策です。.niconico-darkmode-setting-trueはbodyタグにつけられます。

3 はサイトごと、利便性を重視した文字色の適応を行ってください。ページ次第で「青リンクが見やすい」／「通常の文字色＋マウスホバーで青色が見やすい」などが存在します。主に検索結果画面では:visitedの指定漏れに注意してください。

Clone this wiki locally