2025年8月版
今年の3月くらいに作品情報と感想ページの作者の返信箇所が詰まった感じに表示されるなあと思い、気になっていましたが、そのままにしていました。
8月に入って久々にスタイルシートに手をつけ、この辺＋αをいじってみました。ということで公開してみます。
【2025年08月14日追記】
下部のブックマークバーと、PC版ブラウザでは右側に出てくる「↓」「↑ページトップへ」を非表示にするのを追加しました。
エピソード編集[確認]ページで、各項目の区切りをもう少しはっきりさせたのと、項目名を上にもってくるようにしました。特に本文が長いと項目名「本文」がなかなか出てこなくてちょっと気になりましたので。
UserStyles.world のも更新済みです。
昨年はログイン後のページをいじっていた気がしますが、今回はログイン前の状態でも見られる作品情報や感想、小説ページをいじってみました。
作品情報や感想は行間が詰まった感じになっているところを少し開けるようにしました。
小説ページは、下にあるリアクションの絵文字と新着感想のところをいじっています。絵文字は普通の文字になり、2カ所変更すればリアクション関連全体が非表示になります。新着感想は非表示に。
あと、ログイン後ユーザーホームの新着一覧で「みんなの活動／あなたの活動」など切り替えられるタブの表示を少しいじってみました。
新着情報や感想ページの作者返信箇所の文章で行間を広げる
リアクションの絵文字を普通の文字に
（この画像は他の方々のページのを使っています。特定できないよう絵文字の順番を変えたり数字部分の桁を変えたり等の編集をしています）
絵文字ですが、まん丸の目できょとんとした感じのは驚いたか何かで固まっているのを表しているのかなと思っていたのですが……。
調べたところ、どうも「赤らめた顔」（flushed face、U+1F633）みたいな感じです。「驚いた顔」（Astonished Face、U+1F632）や「静かな顔」（Hushed Face、U+1F62F）とは違う感じがします。
Unicodeのコードポイントで指定していればはっきりするのですが、公式のCSSでは画像に変換したものを指定しているので元の絵文字がなんなのかよくわからないのでした。ほかの絵文字はほぼ断定できるのですが。
絵文字は同じコードポイントでもフォントによって違いがあるので（U+2603の雪だるまとか話題になったことが）、閲覧者の環境に関係なく見た目を同じにするために、絵文字を画像にしたものを使っているのだろうと思っています。
とりあえずまん丸の目できょとんとした感じのは「紅潮」としています。
リアクション機能を非表示にする場合は、スタイルシートの最後に書いてある非表示用のスタイルを有効にします。
「リアクション非表示 コメントアウトにしておく」と書いてある行の次にあるスラッシュとアスタリスクの組み合わせ（ /* と */ ）を消して保存してください。
CSSでは /* と */ で囲まれたところがコメントになります。なんらかの指定を作ったけどデフォルト（初期設定）では無効にしたい、でもなにかあれば有効にできるようにする場合、その指定を /* と */ で囲めば指定は無効になります。有効にする場合は /* と */ をセットで削除します。
他にもコメントアウトして無効になっている指定がいくつかあります。
ログイン後タブ切り替えのところを違う感じに
以下、スタイルシートです。
同じものはユーザスタイルの投稿サイト「UserStyles.world」にも登録しています。拡張機能Stylusをお使いの方は、そちらにいくとインストールが楽なのではと思います。
投稿先のURLは「https://userstyles.world/style/15819」です。
----この下から-----------------------------------------------------
/* ==UserStyle==
@name 小説家になろう＆読もう
@namespace https://proxima.coomaru.com/
@version 1.8.0
@description 小説家になろう＆読もう：ユーザページ、マイページ、検索などで配色や表示などを若干変更
@author Mule, KOUNO Motoo
@license CC0
==/UserStyle== */
@-moz-document
url-prefix("https://syosetu.com/"),
url-prefix("https://mypage.syosetu.com/"),
url-prefix("https://yomou.syosetu.com/"),
url-prefix("https://ncode.syosetu.com/"),
url-prefix("https://novelcom.syosetu.com/")
{
/* 2024/04/16（火） */
/* Firefox121以降対応 2024年に入って更新してたらOK :has() 疑似クラス使ってるので */
/*------------------------------------ ユーザページ＆マイページ */
/*---------------- リンクの色を少し濃いめに */
.c-button--outline, /* ブックマーク：「最初から読む」など */
.p-up-activity-item__name > a,
.p-up-activity-item__title > a, /* 作品投稿履歴：下書きエピソード題名 */
.c-up-novel-item__title > a, /* 作品投稿履歴：題名 */
.p-up-episode-item__title > a, /* 作品詳細：エピソードリスト左の各話題名 */
.p-up-episode-item__edit, /* 作品詳細：エピソードリスト右の「編集」 */
.p-up-bookmark-item__title > a, /* ブックマーク：題名 */
.p-up-novelinfo__edit, /* 作品情報：編集 */
.c-up-panel__more,
.p-bbs-list__res-label, /* 質問板：返信数 */
.c-link--md, /* マイページ：ブックマーク */
a
{
color: #25b;
}
/*---------------- ＊＊一覧 タブ */
.c-up-tab__item
{
border-bottom: 2px solid var(--color-link); /* 20250806追加 */
background-color: transparent;
}
.c-up-tab__item.is-active
{
color: #25b; /* タブの色を少し濃いめ 20240323追加 */
border: 2px solid var(--color-link); /* タブを線で囲む 20250806追加 */
border-bottom-style: none; /* 下の線は消す 20250806追加 */
border-radius: 0.4em 0.4em 0 0;
}
/*---------------- 訪問済みリンクの色を少し黒めのマゼンタに */
.c-button--outline:visited, /* ユーザホーム：「最初から読む」などの訪問済みリンク */
.p-up-activity-item__name > a:visited,
.p-up-activity-item__title > a:visited, /* 作品投稿履歴：下書きエピソード題名 */
.c-up-novel-item__title > a:visited, /* 作品投稿履歴：題名 */
.p-up-episode-item__title > a:visited, /* 作品詳細：エピソードリスト左の各話題名 */
.p-up-episode-item__edit:visited, /* 作品詳細：エピソードリスト右の「編集」 */
.p-up-bookmark-item__title > a:visited, /* ブックマーク：題名 */
.p-up-novelinfo__edit:visited, /* 作品情報：編集 */
.novel_h a.tl:visited, /* 読もう：作品検索：題名 */
.c-trad-contents a:visited, /* スマホ／読もう：作品検索：作品情報 */
a.c-link--md:visited, /* マイページ：トップ 活動報告2件アンカーの色 */
a:visited
{
/* color: #9971a0; */
color: #70b;
}
/*---------------- アンカーの色を白で固定 20240318追加 */
div.l-footer a,
li.p-main-nav__item a
{
color: #fff;
}
/*---------------- ［この作品を削除］ */
li.c-up-dropdown__item--delete /* 作品詳細：管理［この作品を削除］／ブックマーク：設定 */
{
/* display: none; */
border: 1px solid #000;
text-align: center;
margin-top: 2.25em;
background-color: #fa5252;
}
li.c-up-dropdown__item--delete a
{
color: #fff;
font-weight: bold;
}
li.c-up-dropdown__item--delete a:hover
{
background-color: #000;
color: #f00;
font-weight: bold;
}
.c-up-dropdown__list /* ドロップダウンメニューを背景と区別が付くよう 20240321 */
{
border: 1px solid #aaa;
}
/*---------------- div 間隔調整 */
.c-up-panel__body /* 作者さんの作品リストと執筆しているエピソードリスト div */
{
padding-top: 0;
padding-bottom: 0;
}
.c-up-panel__list-item:not(:last-child)
{
margin-bottom: 0.2em;
padding-bottom: 0.2em;
}
.c-up-panel__list-item:first-child
{
margin-top: 0.2em;
}
.c-up-panel__list
{
padding-top: 0.2em;
}
.c-up-panel__header
{
padding-top: 0.5em;
padding-bottom: 0.5em;
}
/*---------------- 文字の色を濃いめに：ユーザページ */
.c-up-hit-number__item, /* 作品詳細：全○件中1件目～○件目を表示 */
.p-up-episode-item__date, /* 作品詳細：掲載日 */
.c-up-novel-item__data, /* 作品投稿履歴：全○エピ */
.c-up-novel-item__date, /* 作品投稿履歴：最新掲載日 */
.p-up-activity-item__date, /* みんなの活動：最新掲載日 */
.p-up-bookmark-item__date, /* ユーザページ・ブックマーク：最新掲載日 */
.p-up-bookmark-item__menu, /* ユーザページ・ブックマーク：設定 */
.p-up-blog-item__date, /* ユーザページ・活動報告：日付 */
.c-up-breadcrumb__item > a, /* パンくずリスト */
/* 文字の色を濃いめに：マイページ */
.p-userheader__tab-list-item > a, /* 上段メニュー */
.u-text-subtext, /* 活動報告：日付 */
.c-side-list__item-header,
.c-panel__headline-allcount, /* 全○件 */
.c-novel-list__keyword, /* 作品一覧：キーワード */
.c-novel-list__lastup, /* 作品一覧：最終更新日 */
.p-novelhyoka-list__date /* 評価を付けた作品：初回評価日 */
{
color: #333;
}
.c-up-tab__item /* タブ 非選択名 */
{
color: #555;
}
/*---------------- 区切り線をもう少しはっきりと */
.c-up-panel__list-item:not(:last-child),
.c-up-panel__header
{
border-bottom-color: #999;
}
/*---------------- ドロップダウンメニュー hover背景をもう少しはっきりと */
.c-up-dropdown__item>a:hover
{
background-color: #e0f9ff;
}
/*---------------- 作品情報折りたたみトグルボタン 20240317追加 */
.c-up-panel__header--accordion::after
{
background-color: #f51;
color: #fff;
border-radius: 50%;
height: 1.5em;
width: 1.5em;
padding: 0.25em;
}
.c-up-panel__header--accordion.is-active::after
{
color: #fff;
}
/* 「作品情報」がアンカーなのでボタン風に 20240322追加 */
.c-up-panel__header--accordion
{
border: 1px solid #aaa;
border-radius: 3px;
margin-bottom: 2px;
}
.c-up-panel__header--accordion.is-active:has(+ .js-toggle-target-novelinfo)
{
border-bottom: 1px solid #aaa;
}
.c-up-panel__header--accordion:hover
{
background-color: #eafdff;
}
/* 作品情報のうち「データ」「読者の反応」を常に表示 20240323追記 */
div.c-up-panel > div:not(.is-active) + .js-toggle-target-novelinfo
{
display: block !important;
}
div.c-up-panel > div:not(.is-active) + .js-toggle-target-novelinfo .p-up-novelinfo:not(:first-child)
{
display: none;
}
div.c-up-panel > div.is-active + .js-toggle-target-novelinfo .p-up-novelinfo:not(:first-child)
{
display: block !important;
}
.js-toggle-target-novelinfo
{
padding-top: 0.5em;
}
/*---------------- アクセス解析ボタンが二カ所になったので従来のを消す 20240323追加 */
div.p-up-novelinfo__analitycs
{
display: none;
}
/*---------------- 文字をもう少し大きく 20240318追加 */
.c-button--sm, /* みんなの活動：最初から読む、最新ep 11px */
.p-up-activity-item__name, /* みんなの活動：作者名 12px */
.p-up-activity-item__date, /* みんなの活動：最新掲載日 12px */
.c-up-novel-item__data, /* 作品投稿履歴：全○エピ 12px */
.c-up-novel-item__date, /* 作品投稿履歴：最新掲載日 12px */
.p-up-episode-item__date /* エピソード一覧：掲載日／下書き作成日 12px */
{
font-size: 0.9em;
}
/* 文字を大きくしたのでちょっと調整 20240318追加 */
li.c-up-panel__list-item:last-child /* みんなの活動：作品欄最下段 */
{
padding-bottom: 2px;
}
.p-up-activity-item__name
{
margin-bottom: 0;
}
/*---------------- 上部ボタン（編集、削除、管理など）の間隔を広げる 20240318-19追加 */
.c-button-combo--horizon > .c-button:not(:last-child),
.c-up-title-area__group--horizontal-right > .c-up-title-area__menu:not(:last-child)
{
margin-right: 3em;
}
div.c-up-title-area__group--horizontal-right /* バランスを取るため 20240321追加 */
{
margin-right: 0.2em;
}
/*---------------- DDメニューの設定、管理と同列にある［アクセス解析］をボタン風に */
div.c-up-title-area__menu .c-up-title-area__menu-label a
{
background-color: #fff;
padding: 0.4em 1em;
border: 1px solid #aaa;
border-radius: 3px;
}
div.c-up-title-area__menu .c-up-title-area__menu-label a:hover
{
box-shadow: 0 0 0 2px #e6e6e6;
}
/*---------------- アラート系（？）を赤系に 20240321追加 */
.c-alert--info
{
background-color: #fff3f3;
color: #000;
border: double 3px #f00;
}
div.c-button-box-center /* プレビュー／保存ボタン 下が詰まっていたので 20240404追加 */
{
padding-bottom: 1em;
}
/* 文章入力箇所 */
.c-form__input-text,
.c-form__select,
.c-form__textarea,
.c-form__input-group-button, /* 検索窓右端 */
.c-form__quicksearch-text /* マイページ作品一覧作品検索 */
{
border: 1px solid #66e;
/* box-shadow: 0 0 0 2px #f2f2fb; */
}
/*---------------- ボタンの見た目（通常とhover）をそろえる */
.c-up-panel__button--primary:hover, /* 上のボタン */
.c-button--primary:hover /* 下のボタン */
{
color:#fff;
background-color:#7be
}
/*---------------- 「20,000文字以内」などの注意書き もう少し目立たせる */
.c-form__help-block
{
color: #333;
}
/*------------------------------------ 作品新規作成 */
/*---------------- 「作品の投稿方法」を常に表示 20240412追加 */
div.js-toggle-target-howto
{
display: block !important;
}
/*------------------------------------ 新規エピソード作成 */
/*---------------- 本文と前書きの順序を入れ替え */
div.js-episode_input
{
display: flex;
flex-direction: column;
padding-top: 1em;
}
div.js-episode_input > div.c-form__group:nth-child(1) /* エピソードタイトル */
{
order: 1;
border-bottom: 1px dashed #333;
padding-bottom: 0.5em;
}
div.js-episode_input > div.c-form__group:nth-child(2) /* 本文 */
{
order: 3;
border-bottom: 1px dashed #333;
padding-bottom: 0.5em;
}
div.js-episode_input > div.c-form__group:nth-child(3) /* 前書き */
{
order: 2;
border-bottom: 1px dashed #333;
padding-bottom: 0.5em;
}
div.js-episode_input > div.c-form__group:nth-child(4), /* 後書き */
div.c-up-notice-box--tips, /* tips */
div.c-button-box-center /* プレビュー／保存ボタン */
{
order: 4;
}
div.c-form__label /* 項目見出しを少し上に */
{
margin-bottom: 1em;
}
.c-up-panel__button:not(:last-child) /* 最上段のプレビューなどのボタンを少し離す */
{
margin-right: 2em;
}
/*------------------------------------ エピソード編集[確認]
/*---------------- 各項目の区切りをもう少しはっきりと 20240814追加 */
.c-table__confirm th,
.c-table__confirm td
{
border-bottom: 1px solid #999;
}
/*---------------- 項目名を上に 20240814追加 */
/* 特に本文の内容が長いと、項目名が（スクロールしないと）出ないので気になった */
.c-table__confirm th
{
vertical-align: top;
}
/*------------------------------------ 活動報告作成 */
/*---------------- 「登録可能タグ一覧」を常に表示 20240413追加 */
div.js-toggle-target-1
{
display: block !important;
}
/*------------------------------------ マイページ */
/*---------------- ユーザヘッダ 間隔を狭く */
.p-userheader__body
{
padding: 2em 0 0 0;
}
.p-userheader__inner
{
margin-bottom: 1em;
}
/*---------------- div 間隔調整 */
.c-novel-list__item, /* トップ */
.c-panel__list-item, /* 活動報告 など */
.c-panel__item /* 自己紹介 */
{
padding: 6px;
}
div.p-ranking .c-panel__list-item, /* トップ_ランキング */
div.p-news .c-panel__list-item /* トップ_お知らせ */
{
padding: 0.2em;
}
.p-ranking__item
{
padding: 0.2em;
}
/*---------------- 区切りをもう少しはっきりと */
.c-novel-list__item:not(:last-child), /* 作品一覧：横線 */
.c-panel__list-item:not(:last-child) /* 評価を付けた作品：横線 */
{
border-bottom-color: #777;
}
.c-panel__list--col2 .c-panel__list-item:nth-child(2n+1) /* 評価を付けた作品：縦線 */
{
border-right-color: #777;
}
/*---------------- 評価を付けた作品：hover */
a.c-panel__list-item:hover
{
background-color: #f4fcfb;
}
/*---------------- 上部ボタン（ウェブサイト、メッセージ、設定）の間隔を広げる */
.p-userheader__tooltip-item:not(:last-child)
{
margin-right: 3em;
}
.p-userheader__tooltip /* 下との間を少し開ける */
{
margin-bottom: 1em;
}
.p-userheader__tab-list-item.is-active::after /* DDメニューの上に来るので調整 */
{
z-index: 1; /* 数値は暫定 */
}
/*------------------------------------ 質問板 */
/*---------------- 質問板：返信数のうち回答待ち */
.p-bbs-list__res-label--empty
{
color: #000; /* 20240327色変更 */
background-color: #fffafa;
border: #f00 2px solid;
border-radius: 3px;
}
/*------------------------------------ 読もう */
/*---------------- ランキング */
.p-ranktop-item__item
{
padding-top: 0.5em;
padding-bottom: 0.2em;
}
.p-ranktop-item__item:not(:last-child)
{
border-bottom: 1px dashed #999;
}
.p-ranktop-item__header,
.p-ranktop-item__footer
{
border-color: #aaa;
}
/*------------------------------------ 作品情報 20250803追加 */
.p-infotop-data
{
line-height: 1.7;
}
/*------------------------------------ 感想 */
/*---------------- 投稿者の文章、行間を少し空ける 20250803追加 */
.c-postedtext__reply-main
{
line-height: 1.7; /* 読者感想は1.8 感想返しは背景色あり・少し狭めでちょうどか */
}
/*---------------- 退会済みの方の感想を非表示に 20240402追加 */
/* 投稿者の年齢や性別、投稿日時、（もしあれば）作者の返信などは表示します。 */
/* ここは無効にしています。使うならば、下のスラッシュ（/）2カ所とアスタリスク（*）2カ所を消して保存。 */
/*
div.comment_h2:has(~ div.comment_authorbox div span.attention),
div.comment:has(~ div.comment_authorbox div span.attention)
{
display: none;
}
*/
/* すべて消す場合は、下のスラッシュ（/）2カ所とアスタリスク（*）2カ所を消して保存。 */
/*
div.waku:has(div.comment_authorbox div span.attention),
{
display: none;
}
*/
/*---------------- 投稿者と年月日の間隔、字下げ */
.c-postedtext__info-list li:last-child
{
margin-top: 0.25em;
text-indent: 1em;
}
/*------------------------------------ 小説 20250804 追加 */
/*---------------- 小説本文 */
/* ルビをもう少し見やすくする */
rt
{
font-size: 0.5625em;
color: #222;
}
/*---------------- 新着の感想 小説一話ごとのページ下 */
/* 新着感想を見えなくする */
.p-new-impression
{
display: none;
}
/*---------------- 「↓」「↑ページトップへ」を非表示 20250814 追加 */
/* ポインティングデバイスがマウスなど精密なものを使っている場合に有効 */
/* スマホやタブレットならあった方がよさそうなので効かないようにしたつもり */
@media (pointer: fine)
{
a[href="#footer"],
a[href="#main"]
{
display: none !important;
}
}
/*---------------- 下部のブックマークバーを非表示 最上部にもあるので 20250814 追加 */
.p-bookmark-bar
{
border-top: none;
border-bottom: 4px double var(--color-ui-border);
}
.p-bookmark-bar__body
{
display: none;
}
/*---------------- リアクション機能 */
/* リアクション絵文字削除 */
.js-reactionepisode_change > img,
.js-reactionnovel_change > img
{
display: none;
}
/* リアクション絵文字置換 */
/* 絵文字のUnicode コードポイント（推定）
data-reactionid="1" 立て親指 たぶん U+1F44D
data-reactionid="2" 笑顔 たぶん U+1F60A
data-reactionid="3" 大泣 たぶん U+1F62D
data-reactionid="4" 紅潮 たぶん U+1F633 U+1F62Fではないと思うが…
data-reactionid="5" 爆笑 たぶん U+1F923
*/
/* リアクション絵文字置換 漢字版 */
div.js-reactionepisode_change[data-reactionid="1"]::before,
div.js-reactionnovel_change[data-reactionid="1"]::before
{
content: "Good：";
}
div.js-reactionepisode_change[data-reactionid="2"]::before,
div.js-reactionnovel_change[data-reactionid="2"]::before
{
content: "笑顔：";
}
div.js-reactionepisode_change[data-reactionid="3"]::before,
div.js-reactionnovel_change[data-reactionid="3"]::before
{
content: "大泣：";
}
div.js-reactionepisode_change[data-reactionid="4"]::before,
div.js-reactionnovel_change[data-reactionid="4"]::before
{
content: "紅潮：";
}
div.js-reactionepisode_change[data-reactionid="5"]::before,
div.js-reactionnovel_change[data-reactionid="5"]::before
{
content: "爆笑：";
}
/* リアクション絵文字置換 顔文字版 */
/*
div.js-reactionepisode_change[data-reactionid="1"]::before,
div.js-reactionnovel_change[data-reactionid="1"]::before
{
content: "(^＿^)b：";
}
div.js-reactionepisode_change[data-reactionid="2"]::before,
div.js-reactionnovel_change[data-reactionid="2"]::before
{
content: "(^o^)：";
}
div.js-reactionepisode_change[data-reactionid="3"]::before,
div.js-reactionnovel_change[data-reactionid="3"]::before
{
content: "(T＿T)：";
}
div.js-reactionepisode_change[data-reactionid="4"]::before,
div.js-reactionnovel_change[data-reactionid="4"]::before
{
content: "(*. .*)：";
}
div.js-reactionepisode_change[data-reactionid="5"]::before,
div.js-reactionnovel_change[data-reactionid="5"]::before
{
content: "(^○^)：";
}
*/
/*---------------- リアクション選択 アイコンを文字に */
.p-reaction__toggle-icon
{
width: 4em;
}
.p-reaction__toggle-icon::after
{
content: "選択";
font-size: 0.9em;
}
/*---------------- リアクション非表示 コメントアウトにしておく */
/*
.p-reaction__body,
.p-reaction__first-time-button
{
display: none;
}
*/
}
----この上まで-----------------------------------------------------
UserStyles.worldのURLは、ランキングタグを使ってリンクしようかとも思いましたが止めておきました。ついクリックとかタップしてびっくりするとまずいと思いまして。
URLを書くこと自体は、ヘルプセンター「外部での活動に関する宣伝・告知について」を読んで特に問題ないと判断していますが、なにかあれば消しておきます。
外部での活動に関する宣伝・告知について | ヘルプセンター | 小説家になろう
https://syosetu.com/helpcenter/helppage/helppageid/170
