Skip to content

小説家になろう&読もう:配色表示変更 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色...

Reviews

No reviews yet.