ユーザページ用v2.7&マイページ用v2.1
「とりあえずこれにてお終いと致します」と書いた舌の根がちょっと乾いた訳でもないのですが、今現在使っているものを公開しておきます。
必読メッセージの背景を赤系にして目立たせたのと、作品情報のうち「データ」「読者の反応(評価ポイント平均やブックマーク件数など)」のみを表示しておけるようにしたものです。あとほか少々いじってあります。
「Stylusを使う」を改訂して公開済みスタイルシートもそれに合わせてちょっと形式を変えたので(指定内容は変わっていません)、そのついでということで。
このスタイルシート、Firefoxはバージョン121以降に対応なので、念のため別の話として投稿しました。2024年に入って更新してたら大丈夫です。Chrome系は2023年以降更新してたら大丈夫なのでほとんどの方は問題ないかと思います。
2024年04月03日追記:8話公開ついでにユーザページ用のを今使っているものに差し替えました。質問板の「回答待ち」表示の変更など、前のからちょっとだけ変えています。
2024年03月23日現在、こんな感じで使っています。画像左がユーザスタイルシート適用前、右が適用後です。
メッセージ(デフォルトのだと気がつきにくいように思えたので)
作品情報
「作品情報」、デフォルトだと内容表示があるかないかの2通りですが、「データ」「読者の反応」のみの表示もできるようにしています。「作品情報」をクリックするたび表示が変わります。
ユーザページ用に使っているのは以下のスタイルシートです。
----この下から-----------------------------------------------------
/* ==UserStyle==
@name 小説家になろう:ユーザページ
@namespace github.com/openstyles/stylus
@version 2.7.0
@description 「小説家になろう」のトップ及びユーザページ対象
@author Mule, KOUNO Motoo
==/UserStyle== */
@-moz-document url-prefix("https://syosetu.com/")
{
/* 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, /* 質問板:返信数 */
a
{
/* color: #1b8ef3; */
color: #15c;
}
.p-bbs-list__res-label--empty /* 質問板:返信数のうち回答待ち */
{
color: #000; /* 20240327色変更 */
background-color: #fffafa;
border: #f00 2px solid;
border-radius: 3px;
}
/* タブの色を少し濃いめに 20240323追加 */
.c-up-tab__item.is-active /* 新着一覧 */
{
/* color: #1b8ef3; */
color: #15c;
}
/* 訪問済みリンクの色を少し黒めのマゼンタに */
.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, /* 作品情報:編集 */
a:visited
{
/* color: #9971a0; */
color: #71b;
}
/* アンカーの色を白で固定 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 /* パンくずリスト */
{
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
{
padding: 0.4em 1em;
border: 1px solid #aaa;
border-radius: 3px;
}
/* アラート系(?)を赤系に 20240321追加 */
.c-alert--info
{
background-color: #fff3f3;
color: #000;
border: double 3px #f00;
}
}
----この上まで-----------------------------------------------------
マイページ用に使っているのは以下のスタイルシートです。
2.0.0との違いはユーザページ用にリンクの色を合わせたくらいです。
----この下から-----------------------------------------------------
/* ==UserStyle==
@name 小説家になろう:マイページ
@namespace github.com/openstyles/stylus
@version 2.1.0
@description 「小説家になろう」のマイページ対象
@author Mule, KOUNO Motoo
==/UserStyle== */
@-moz-document domain("mypage.syosetu.com")
{
/* 2024/03/23(土) */
/* リンクの色を少し濃いめに */
.c-link--md, /* トップ:ブックマーク */
.c-button--outline, /* トップ 作品一覧:作品情報 */
a
{
/* color: #1b8ef3; */
color: #15c;
}
/* 訪問済みリンクの色を少し黒めのマゼンタに */
.c-button--outline:visited, /* トップ 作品一覧:作品情報 */
a:visited
{
/* color: #9971a0; */
color: #71b;
}
/* 文字の色を濃いめに */
.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;
}
/* ユーザヘッダ 間隔を狭く */
.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;
}
/* 区切りをもう少しはっきりと */
.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; /* 数値は暫定 */
}
}
----この上まで-----------------------------------------------------