ユーザページ用
2024年03月23日夜、5話「Stylusを使う」改訂に伴い、スタイルシートの先頭にコメントを追加しました。
コメントなので内容自体は変わりありません。
2024年03月14日にユーザページのリニューアルが行われました。リニューアルで見た目や作業手順を変えると大体罵声の嵐が飛び交うものですが、今回もその例に洩れなかったようで……。
私が気になったのは以下の点です。WindowsPC、Firefox 123.0.1で閲覧しています。スマホは使っていません。
・更新チェック中の作品やブックマークで既読の色が未読のと同じ
・各項目の空白の幅が広く、一覧性が悪くなっている
・ドロップダウンメニュー内にある［アクセス解析］と［この作品を削除］はもっと区別を付けた方がいいのでは
・ログアウトにワンクッション入る
などなど……
操作手順の変更とかは無理ですが、見た目の変更ならなんとかなります。ユーザースタイルシートを作り、適用してみます。
未読と既読が区別付くよう違う色に／間隔も狭く
「削除」を目立たせる／薄い文字を少し濃いめに
「削除」を削除（見えなくしている）
画像はすべて私（矼野元生）のユーザページのスクリーンショットを使用しています。
以下はFirefoxと、ユーザースタイルシートを設定できる拡張機能Stylusを使っています。両方お使いの方なら使い方は分かるかもしれません。Chrome系にもStylusの他、ユーザスタイルシートを使う拡張機能があるようなので、そういうのをお使いの方にも参考になれば幸いです。
まずはユーザページに対応したスタイルシートを。
----この下から-----------------------------------------------------
/* ==UserStyle==
@name 小説家になろう：ユーザページ
@namespace github.com/openstyles/stylus
@version 1.0.0
@description 「小説家になろう」のトップ及びユーザページ対象
@author Mule, KOUNO Motoo
==/UserStyle== */
@-moz-document url-prefix("https://syosetu.com/") {
/* 2024/03/16（土） */
/* リンクの色を少し濃いめに */
.c-button--outline, /* ブックマーク：「最初から読む」など */
.p-up-activity-item__name > a,
a
{
/*color: #1b8ef3;*/
color: #16f;
}
/* 訪問済みリンクの色をはっきりしたマゼンタに */
.c-button--outline:visited /* ユーザホーム：「最初から読む」などの訪問済みリンク */
{
/*color: #9971a0;*/
color: #90f;
}
.p-up-episode-item__edit:visited /* 作品詳細：エピソードリスト右の「編集」 */
{
color: #9971a0;
}
/* ［この作品を削除］を他と区別しやすいように */
li.c-up-dropdown__item--delete /* 作品詳細：管理［この作品を削除］ */
{
border-top: 0.5em solid #000;
background-color: #f00;
/* display: none; */ /* 項目自体を消すなら */
}
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;
}
/* 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-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;
}
}
----この上まで-----------------------------------------------------
［アクセス解析］と同じメニューにある［この作品を削除］を消したい場合は、「border-top: 0.5em solid #000;」と「background-color: #f00;」の2行を削除し、コメントアウトしている「/* display: none; */」の「/*」と「*/」を削除してください。半角空白は取っても取らなくてもどっちでもいいです。以下のようになればいいです。
----この下から-----------------------------------------------------
/* ［この作品を削除］を他と区別しやすいように */
li.c-up-dropdown__item--delete /* 作品詳細：管理［この作品を削除］ */
{
display: none;
}
----この上まで-----------------------------------------------------
消すといっても、スタイルシートの指定で見えなくしているだけです。使いたくなったときは、ブラウザのツールバーにあるStylusのアイコンをクリックし、ユーザースタイルシートのチェックを外せば見えるようになります。
同じ内容を私のサイト「くーまる工房」でも公開しています。
