私が現在使っているものです。
コントラストが低すぎる気がしたので、配色などをいろいろと少しずついじっています。
公開している「小説家になろう:配色関係」+「小説家になろう:新規作成」+いろいろという感じ。
ユーザページで作品情報の一部を表示したり、ランキングタグ設定で使用可能タグ一覧を表示状態にしたりなど。
小説家になろう&読もう:配色表示変更 by KOUNO_Motoo
Details
AuthorKOUNO_Motoo
LicenseCC0
Categorysyosetu.com
Created
Updated
Size13 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
2024/04/14 訪問済みの色を調整
2024/04/14 スマホ用に調整
2024/04/14 マイページ、ブックマーク関係の記述ミス
2024/04/14 スマホ用に調整
2024/04/14 「小説を読もう!」も含めた
2024/04/14 公開
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name 小説家になろう&読もう:配色表示変更
@namespace https://proxima.coomaru.com/
@version 1.4.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/")
{
/* 2024/04/14(日) */
/* 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: #0875d5;
}
/* タブの色を少し濃いめに 20240323追加 */
.c-up-tab__item.is-active /* 新着一覧 */
{
color: #0875d5;
}
/* 訪問済みリンクの色を少し黒めのマゼンタに */
.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: #72b;
}
/* アンカーの色を白で固定 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;
}
/*------------------------------------ 活動報告作成 */
/* 「登録可能タグ一覧」を常に表示 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色...