ホーム > Software > 小説家になろう用のユーザースタイル

小説家になろう用のユーザースタイル

FirefoxでStylishを使用しています。
ネット小説の投稿サイト「小説家になろう」での閲覧用のユーザースタイルを晒してみます。
ユーザー登録は行っておらず、ログインして使う人のことは全く考えていないので不都合があるかもしれません。

コメントアウト部分にも書かれている通り、Adblock系のアドオンを併用して広告ブロックや要素のブロックを行っています。
現在の独自スタイルのバージョンは2です。

serifフォントはKleeAAを使用しています。
有償フォントですが、改造されたものが匿名掲示板で無償配布されていました。まだ探せばどこかにあるかもしれません。

なろう黒背景 Rev.2

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("ncode.syosetu.com") {

/*-------------------------------------------------------------------------------------------------
  ◆ 要素を隠す
  
  何をやっているのかよく分からないiframeは隠すだけでは効果が無い
  Adblockerなどでiframe自体を読み込まないようにした方が良さそう
------------------------------------------------------------------------------------------------- */

/* ページ先頭/末尾への移動「ページトップへ」と「↓」ボタンを隠す */
#pageTop, #pageBottom { display:none !important; }

/* 広告枠を隠す (ページ最下部の広告は数値が付いているのでAdblockerなどに任せた方が良いかも) */
.center, .koukoku_auto, .koukoku_text, .koukoku_728 { display: none !important; }

/* 「+注意+」枠を隠す */
#novel_attention { display: none !important; }

/* 「この小説をブックマークしている人はこんな小説も読んでいます！」枠を隠す */
#recommend { display: none !important; }

/* 評価枠を消す */
#impression, #review, #novel_hyouka { display: none !important; }

/* ページヘッダを隠す */  
#novel_header { display: none !important; }

/* ページフッタを隠す */
#footer { display: none !important; }

/* 「ブックマークするにはログインしてください」を隠す */
.contents2 { display: none !important; }

/* 「R15」の注意文を隠す */
.contents1 { display: none !important; }

/* -------------------------------------------------------------------------------------------------
  ◆ 文字の大きさやフォント、色を変更する
  
  16進数の場合 … #FFFFFF と #FFF は同じ。#111 は #111111 と同じ。
  !important をつけないとこちらの設定が優先されない。必ずつけること。
------------------------------------------------------------------------------------------------- */

/* 全体の背景色を変更する */
body {
  background: #111 !important;
}

/* 作品のタイトルを変更する */
.novel_title {
  color: #eee !important;
}

/* 作者表示枠を変更する */
.novel_writername, .novel_writername a {
  color: #eee !important;
}
.novel_writername a {
  text-decoration: underline !important;
}

/* 作品注釈枠を変更する */
#novel_ex {
  background: #252525 !important;
  color: #eee !important;
  margin-bottom: 2em !important;
  padding: 1em 0.5em !important;
  border: 2px solid #000 !important;
}

/* 章表記を変更する */
.chapter_title {
  background: #555 !important;
  color: #eee !important;
  text-align: center !important;
  line-height: 3 !important;
  margin: 30px 0 !important;
  padding: 0 !important;
}
.chapter_title:before { content: "\0025c6\0020"; }
.chapter_title:after { content: "\0020\0025c6"; }

/* 各話用：本文・前がき・あとがきを変更する */
#novel_honbun, .novel_view {
  width: 750px !important;
  color: #eee !important;
  font-size: 12pt !important;
  font-family: serif !important;
  line-height: 2.2 !important;
  padding: 0 !important;
}
.novel_view {
  font-size: 10pt !important;
  line-height: 1.5 !important;
  padding: 1em 0 !important;
}

/* 各話用：次話・前話・目次用のリンクの変更 */
.novel_bn a:link { color: #ddf !important; }
.novel_bn a:visited { color: #fc2 !important; }


/* 各話の枠を変更する */
.novel_subtitle, .novel_sublist2 {
  color: #eee !important;
  border-bottom: 1px solid #888 !important;
  line-height: 2 !important;
  padding-bottom: 0.4em !important;
}
.novel_sublist2:hover {
  background: #222 !important;
  border-bottom: 1px solid #fc2 !important;
}
  /* シリーズタイトル表記を変更する */
  .series_title { color: #eef !important; }
  .series_title a:link { color: #ddf !important; }
  .series_title a:visited { color: #ddf !important; }
  .series_title a:hover { color: #bbf !important; }
  .series_title:before { content: " \" "; }
  .series_title:after { content: " \" 関連作品 "; }

  /* サブタイトル（各話タイトル）表記を変更する */
  .subtitle > a { display: block !important; }
  .subtitle a:link { color: #ddf !important; }
  .subtitle a:visited { color: #ff8c00 !important; }
  .subtitle a:hover { color: #bbf !important; }

  /* 投稿日時表記を変更する */
  .long_update {
    width: 185px !important;
    text-align: right !important;
    margin-right: 5px !important;
  }

  /* 改稿表記を変更する */
  .novel_sublist2 > dt > span {}

/* 作品のフッタ表記を変更する */
#novel_footer {
  border: none !important;
  margin: 100px 0 !important;
}

#novel_footer a:link { color: #ddf !important; }
#novel_footer a:visited { color: #fc2 !important; }
#novel_footer a:hover { color: #bbf !important; text-decoration: underline !important; }

#novel_footer > ul:nth-child(1) > li:nth-child(1) { width: 100% !important; margin: 0 !important; }
#novel_footer > ul:nth-child(1) > li:nth-child(2),
#novel_footer > ul:nth-child(1) > li:nth-child(3),
#novel_footer > ul:nth-child(1) > li:nth-child(4),
#novel_footer > ul:nth-child(1) > li:nth-child(5) { display: none !important; }

/* スタイル設定終了 >> */ }

Scrapbookに保存した各種小説にもスタイルを適用する方法

案は３つあります。
それぞれ長所と短所があるので、自分の環境でどの方法が最適かを検討します。

  • @-moz-document domain(“ncode.syosetu.com”) ,url-prefix(file://) { に変更
  • 保存した全cssファイルに上述のcssを追記
  • 保存した全htmlファイルに上述のcssを読み込ませる<link>タグを新たに埋め込む

@-moz-document domain(“ncode.syosetu.com”) ,url-prefix(file://) { に変更

最も手軽。
ただしScrapbookで「小説家になろう」以外のサイトも取り込んでいる場合で、同名のclass、idを使用している場合は無条件で書き換えてしまう。
必然的に「小説家になろう」以外のサイトを取り込まない人専用の適用方法。

保存した全cssファイルに上述のcssを追記

100ページあれば100ページ分全てのcssに上述のスタイルを追記する。
基本的にcssは後に書いたもので上書きされていくので、cssの最終行から追記していけば良い。
ただし上記の内容で4.83KBあるので100ページ全てに追記すると4.83MB増になる。100ページ100作品を取り込もうものなら4.83GB増に。
Scrapbookで他サイトの取り込みを行っているが、容量を気にしない人向け。

保存した全htmlファイルに上述のcssを読み込ませる<link>タグを新たに埋め込む

該当するhtmlに特定のCSSを読み込ませるタグを新たに追記し、共通で読ませるCSSを１つだけ配置する。
全CSSに追記するよりもファイルサイズ増は抑えられる。
<link rel="stylesheet" type="text/css" href="../narou.css" /> で61バイト。
100ファイル書き換えても6.1KB増なので最も現実的な方法…と思います。他にも方法はあるかもしれないけど思いつかなかった。

今回は "保存した全htmlファイルに上述のcssを読み込ませる<link>タグを新たに埋め込む" を採用します。

複数ファイルの特定文字列の置換が可能なソフトを使います。
検索するといくつか出てきますが、GrepReplaceというソフトを使って置換していきます。
GrepReplaceを使っての置換例を以下に。

置換前の文字列を以下に設定。
<link>タグは<head>～</head>内に書かないとページ全体に対して効果を得られないので、</head>の位置を探します。
その上で、特定サイトのhtmlと分かる部分を探していきます。
５行目のタグが特徴的なので、このHTMLの構造をしているのは恐らく「小説家になろう」関連のページだけだろう…とうことで、以下の構造をもって「小説家になろう」関連のサイトに使われているhtmlファイルを絞り込みます。

<link rel="stylesheet" type="text/css" href="index.css" media="all">
</head>
<body>

<a style="display: inline;" id="pageBottom" href="#footer">↓</a><div style="position: fixed;" id="novel_header">

置換後の文字列を以下に設定

<link rel="stylesheet" type="text/css" href="index.css" media="all">
<link rel="stylesheet" type="text/css" href="../narou.css" />
</head>
<body>

<a style="display: inline;" id="pageBottom" href="#footer">↓</a><div style="position: fixed;" id="novel_header">

変更点は２行目ですね。
元の１行目の<link>と２行目の</head>の間に、読み込ませたいCSSを読ませるためのタグ<link>を新たに挿入します。

あとは画面左側の手順番号に従ってフォルダをScrapBookのログ保存フォルダに設定。サブフォルダの検索にチェックを入れる。
フィルタ欄には *.html を入力
文字コードをUTF-8、改行コードはLFを選択し、検索を実行。
引っかかったファイル全てに処理を実行。

ウチの環境でのフォルダ構成は以下のようになっているので、dataフォルダの中にnarou.cssという名前で上記のスタイルを保存して配置しておけば読み込まれるようになります。

  • data
    • フォルダ: YYYYMMDDHHNNSS(年月日時分秒の並びで14桁の数字の名前のフォルダ)
      • index.html, default.html … default_001.html … default_xxx.html
    • フォルダ: YYYYMMDDHHNNSS
      • index.html, default.html … default_001.html … default_xxx.html
    • フォルダ: YYYYMMDDHHNNSS
      • index.html, default.html … default_001.html … default_xxx.html
    • narou.css

関連記事