表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

ブックマーク機能を使うにはログインしてください。
7/10

ユーザページ用v2.7&マイページ用v2.1

「とりあえずこれにてお(しま)いと致します」と書いた舌の根がちょっと乾いた訳でもないのですが、今現在使っているものを公開しておきます。

必読メッセージの背景を赤系にして目立たせたのと、作品情報のうち「データ」「読者の反応(評価ポイント平均やブックマーク件数など)」のみを表示しておけるようにしたものです。あとほか少々いじってあります。

「Stylusを使う」を改訂して公開済みスタイルシートもそれに合わせてちょっと形式を変えたので(指定内容は変わっていません)、そのついでということで。

このスタイルシート、Firefoxはバージョン121以降に対応なので、念のため別の話として投稿しました。2024年に入って更新してたら大丈夫です。Chrome系は2023年以降更新してたら大丈夫なのでほとんどの方は問題ないかと思います。


2024年04月03日追記:8話公開ついでにユーザページ用のを今使っているものに差し替えました。質問板の「回答待ち」表示の変更など、前のからちょっとだけ変えています。


2024年03月23日現在、こんな感じで使っています。画像左がユーザスタイルシート適用前、右が適用後です。

挿絵(By みてみん)

メッセージ(デフォルトのだと気がつきにくいように思えたので)


挿絵(By みてみん)

作品情報


「作品情報」、デフォルトだと内容表示があるかないかの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; /* 数値は暫定 */

}

}

----この上まで-----------------------------------------------------



評価をするにはログインしてください。
この作品をシェア
Twitter LINEで送る
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ