広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象（通称:ステマ規制）にならないよう配慮して記事を作成しています（記事はこちら、消す方法はこちら）

【小説家になろう】本文前後にある前書き、後書きを非表示にするCSS

Stylebot&Stylus(CSS)

「小説を読もう！（小説家になろう）」のアイコン画像

この記事では、PCブラウザから「小説家になろう（小説を読もう！）」を見ている時、小説本文の前後に表示される作者のまえがき、あとがきを消すCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

【小説家になろう】本文前後にある前書き、後書きを非表示にするCSS

PCウェブサイト版「小説家になろう（小説を読もう！）」で小説を見ている時、作者によってはまえがきとあとがきが挿入されている場合があります。

前書まえがきとはエピソードタイトルの下、小説本文の上にある文章のことです。

作者の日常話だったり、書籍情報のお知らせだったり、この話を読む上での注意書きなどが記載されている…らしいです。僕は普段利用しないのであっているかは分かりません。

「小説家になろう」の小説冒頭にある前書き画像

後書あとがきは小説の最後にある文章です。まえがきもあとがきも小説本文と二重線で区切られています。

「小説家になろう」の小説末尾にある後書き画像

このたび読者様から「毎回ポイント？評価？催促さいそくしてくる作者がいて鬱陶しい。他にもせっかく小説の世界に浸ひたっていたのに急に作者は今日買い物にいきました。とかいうどうでもいい日常話書かれて一気に萎える。いっそのこと消せませんか？」と連絡をいただきました。

僕も調べてみましたが、一定数邪魔だと思っている方がいらっしゃるようです。

CSSを使うことで自身の環境上で非表示にできます。CSSを書き込んだブラウザだけの反映なので誰かにバレたり迷惑をかけたりする心配はありません。いつでも元に戻せます。

本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホやタブレットのアプリ版ではできません。

拡張機能を利用できるブラウザアプリ（例：Kiwi Browser）などをインストールしてCSSを書き込み、ブラウザ版から利用する場合はもしかしたら使えるかもしれません。

インストール方法

Chromeウェブストアからインストールできます。

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

「Chromeに追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像1

「拡張機能を追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像2

拡張機能のオーバーフローメニューに追加されたらOKです。

「Stylebot」拡張機能をインストールする手順画像3

頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

「Stylebot」拡張機能を直接ツールバーに配置する手順画像

詳しい使い方を知りたい方は以下の記事を参考にしてみてください。

「小説家になろう」のまえがき、あとがきを非表示にするCSS

スタイルシートを開く

「小説を読もう！」にアクセスします。「小説家になろう」ではないので注意です。本記事のタイトルや見出しに「小説家になろう」って書いていますが、そのほうがアクセス数多くなるかなと思って書いているだけで実際は読もうのほうです。

インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

「Stylebot」拡張機能のスクリーンショット1

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。両方消したい場合は両方書き込みます。

CSS
/*【小説家になろう】前書き非表示*/
.p-novel__text--preface {
    display: none !important;
}

/*【小説家になろう】後書き非表示*/
.p-novel__text--afterword {
    display: none !important;
}

「.p-novel__text--preface」が前書きで「.p-novel__text--afterword」が後書きでした。「display: none」でどちらも消すようにしています。

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

特に「小説を読もう！」や「小説家になろう」などのサービスをナポ寿司は全然利用しないのでサイトの仕様変更があった際に気づかない可能性が高いです。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

「Stylebot」拡張機能のスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト（例：ncode.syosetu.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。

消えたか確認する

適当に小説を開きます。試しに僕が見た時総合ランキングで2位だった「転生したらスライムだった件」を開いてみます。「Amazonプライムビデオ」でアニメかなにか配信されていた気がします。

PC版「小説家になろう」でランキングページから小説を開く手順画像

エピソード一覧ページから小説本文ページを開きます。CSS導入後は前書きが表示されません。タイトルの下にすぐ本文がきます。

PC版「小説家になろう」の前書きをCSSで非表示にした画像

後書きも同様に消えます。

PC版「小説家になろう」の後書きをCSSで非表示にした画像

別の作品を見てみました。同様に非表示になっていました。

PC版「小説家になろう」のブックマークや評価を催促してくる後書きをCSSで非表示にした画像

注意点として内容に関わらず一律いちりつで非表示にするので、作者が重要なお知らせを書いていたとしても気づかなくなります。それで自分が損しても自己責任です。

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「ncode.syosetu.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。

他のCSS記事紹介

「小説家になろう」関連の記事を他にも書いています。

感想

以上、PCブラウザ版「小説家になろう（小説を読もう！）」の前書き、後書きを非表示にするCSSでした。

やろうと思えば小説ごとでオンオフできそうですが、本記事では紹介していません。

Stylebot&Stylus(CSS)

Posted by ナポリタン寿司