小説家になろうの活動報告のHTML/CCまとめ

夕月悠里

割烹エディターを作るための備忘録です。

小説家になろう（https://syosetu.com/）


なお非公式です。（個人で調べたものです）変更される恐れもあります。

調査日：2020/3/24


使用できるタグ（抜け漏れ多分あり）

#基本はdiv, span, pでstyle装飾

div
span
p

#使用できるstyleは限定
color 
background-color
background-image
backgraound-repeat
font-style 
font-variant 
font-weight 
font-size 
line-height 
text-align 
letter-spacing 
word-spacing 
width
height 
margin 
padding
float
clear

#リスト
ul　　
ol　　
li　
　
#属性
list-style-image  
list-style-type 

＃リンク
a

#属性 targetは不可（クッションページがあるため）
href　



#表の作成
table 
tr 
th 
td 
bgcolor 

#属性
table-layout 
border-collapse 
border-spacing 
caption 

#見出し
h2-h6

#なろうのcssの影響あり


#他
strong　
em
hr
q
i
small
br　 
sup 
sub
code 
pre 
var　
dfn　
dl　
dt　
dd　
title　　
abbr　
blockquote 　
cite

#画像
img

#属性
src
alt
width
height


#HTML5では非推奨 ただ文字数削減には有効
b
s
u
center


#fontタグはスマホで上手く動かない場合があるので非推奨
font


基本的な仕様（PC）

キャプチャ


小説家になろうではPCとモバイルで画面設定を変えているのでそれぞれ分けて説明。

<div id="container">
<div id="contents">
<div id="main">
<div id="blogbg"><div id="blogview">
<p id="blogtitle">xxxxx</p>
<p id="date">xxxxx</p>
<p id="ex">

まず全体がcontainerでくくられる。その中にcontents、でmainでblogdgそしてblogview記事自体はpのexで指定。

見る必要があるのはblogbgとex

blogbgのスタイル(base)

width:570px;
padding:15px;
background:#fefefe;
margin: 0px;
text-align: left;
font-family: 'Noto Sans Japanese', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size: 12px;
color: #333333;

基本サイズは12pxでpaddingが両サイドに15 px入っているので実質540pxの横幅。

exのスタイル

padding: 20px 10px;
font-size: 120%;
line-height: 170%;
color: #444444;

margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;

基本サイズから1.2倍になって、paddingが10px入るので520pxがPCの幅。

ただし、この設定は打ち消せる。直下にdivでブロックを指定してやればよい。

font-size:1.2em;
line-height: 1.7;
color: #444444;

というかこれバグみたい。どうやらブロック要素が入った時点で<p id="ex">が閉じる

キャプチャ2

例えば<h2>や<div>、<hr>といったブロック要素を入れた時点でそこで閉じて、exで定義したスタイルが消える。よくこんな風に途中からフォントが小さくなっているの見るけど、どうやらそのせい。

画像3

なので、最初にdivでスタイルを再定義するのが無難。

ここでpadding, marginを0に設定しておくと限界まで横幅を使えていい感じ。

CSS(初期値、Classで使えそうなものだけ抜き出し)


ol,ul{
list-style:none;
}
img {
	vertical-align:bottom;
	border-width: 0px;
	border-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
address,caption,cite,code,dfn,em,strong,th,ver{
font-style:normal;
}

dl {_height: 1%;}

a {
	text-decoration: none;
	color: #3366aa;
}
a:visited {
	color:#885577;
}
a:hover {
	text-decoration: none;
	color: #339933;
}
ul:after,dl:after,.clr {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

h1 {
	margin: 10px 0px;
	width: 650px;
	font-size:120%;
}
h1 .mini{
	margin: 0px 0px 0px 5px;
	font-size:90%;
	font-weight:normal;
}



.upper {
	padding: 10px 10px 5px 0px;
	text-align:right;
	clear: both;
}


.link_box {
	margin: 0px 0px 0px 0px;
	border: 1px solid #aaaaaa;
	background: #fdfdfd;
}

.link_box  h3{
	background: #F3F3F3;
	color: #666666;
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 5px;
	font-size:100%;
}

.link_box ul{
	margin: 10px 0px 10px 5px;
}

.link_box li{
	margin: 0px 5px 10px 10px;
	font-size: 110%;
}

.link_box li.second{
	margin: 0px 0px 0px 20px;
}


.link_box li a {
	padding: 3px 5px 3px 15px;
	display: block;
	position: relative;
}

.link_box li a:after {
	content:"";
	display:block;

	width:0;
	height:0;
	border-style: solid;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #bbb;
	position:absolute;

	left: 0;
	top:0;
	bottom:0;
	margin:auto;
}

.link_box li a:hover::after {
	border-color: transparent transparent transparent #e66;
}

.sideNav {
	margin-bottom:5px;
	background: #cccccc;
	padding:2px;
}

ul.nav li{
	font-size: 110%;
	border: 1px solid #cccccc;
	font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	line-height:36px;
}

ul.nav a {
	padding-left: 10px;
	color: #006699;
	display: block;
	background: #f9f9f9;
}

ul.nav a:hover {
	color: #333333;
	background: #eeeeee;
}

.info_message_nothin {
	margin: 0px 0px 10px 0px;
	padding: 20px 0px 20px 0px;
	text-align: center;
	font-size: 120%;
	color: #666666;
	border-top: 1px dotted #888888;
	border-bottom: 1px dotted #888888;
	background: #f9f9f9;
}

.novellist_toptable {
	margin: 5px 0px 0px 0px;
	padding-bottom: 5px;
	border-bottom: 1px dotted #999999;
}

.novellist_toptable table{
	table-layout : fixed;
}

dl.profile {
	margin: 0px 0px 10px 0px;
	border: 1px solid #cccccc;
	border-top: 0px;
}

dl.profile dt{
	padding: 5px 0px 5px 10px;
	width: 97px;
	line-height: 180%;
	border-top: 1px solid #cccccc;
	float: left;
}

dl.profile dd{
	padding: 5px 10px 5px 10px;
	width: 450px;
	font-size: 110%;
	line-height: 180%;
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	float: left;
}

dl.profile dd img {
		max-width: 430px;
}

dl.profile .attention {
	font-size: 90%;
}

.bloglist {
	margin: 0px 0px 5px 0px;
	padding: 10px;
	background: #fdfdfd;
}

.bloglist p.title{
	padding: 0px 5px 5px 5px;
	font-size: 110%;
	border-bottom: 1px solid #999999;
}

.bloglist p.ex{
	padding: 10px;
	line-height:170%;
	color: #666666;
}

.bloglist p.info{
	margin: 0px 5px 0px 5px;
	padding: 5px 3px 0px 3px;
	color: #666666;
	border-top: 1px dotted #666666;
}

.comment_view{
	margin: 5px 5px 5px 5px;
	padding-bottom:5px;
	border: 1px solid #cccccc;
	background:#ffffff;
}

.comment_bun {
	margin: 10px 20px 5px 20px;
	font-size:110%;
	line-height:170%;
	text-align: left;
}

.comment_info {
	padding: 5px 8px 5px 5px;
	text-align: right;
}

.comment_delete {
	padding: 5px 10px 5px 5px;
	text-align: right;
	background: url(../../../view/images/u_bg.gif) ;
}

.comment_delete a{
	color: #3366aa;
}


.comment_idou{
	padding: 3px 5px;
}

.comment_idou a:hover{
	color: #0066aa;
	text-decoration:underline;
}

.comment_idou:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.blogcomment_l {
	width:140px;
	float: left;
	text-align: left;
}
.blogcomment_r {
	width:140px;
	text-align: right;
	float: right;
}


.a_line {
	margin: 5px 0px 0px 0px;
	text-align: right;
	clear: both;
}


h2 {
	margin: 0px 0px 5px 0px;
	padding: 5px;
	font-size: 115%;
	color: #333333;
	border-top: 1px dotted #003366;
	border-bottom: 1px dotted #003366;
	background: #eef3f6;
}

h3 {
	margin: 0px 0px 5px 0px;
	padding: 5px;
	color: #555555;
	background: #f3f3f3;
}


h3 .allnovel {
	margin-left: 10px;
	font-size: 90%;
	font-weight: normal;
	color: #666666;
}

h2 .allcount {
	margin-left: 10px;
	font-size: 95%;
	font-weight: normal;
	color: #333333;
}

.attention {
	color: #cc3333;
}

.gray {
	color: #aaaaaa;
}


.pager_kazu{
	margin: 0px 0px 3px 0px;
	text-align: right;
	color: #666666;
	font-size: 95%;
}

.pager_idou{
	margin: 0px 0px 5px 0px;
	font-size: 110%;
	text-align: center;
	color: #333333;
	font-weight: bold;
}

.pager_idou a{
	margin: 0px 3px;
	padding: 0px 5px;
	color: #333333;
	font-weight: normal;
}

.pager_idou a:hover{
	color: #0066aa;
}

.pager_idou:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.space5{
	margin: 0px 5px;
	color: #444444;
}

.marginright{
	margin-right: 5px;
}

.marginleft{
	margin-left: 5px;
}

.letter_limit {
	color: #666666;
	line-height: 170%;
}

.button {
	margin: 5px;
	padding: 2px 5px 2px 5px;
	font-weight: bold;
	text-align: center;
	font-size: 120%;
			color: #666666;
	border-top: 1px solid #aaaacc;
	border-left: 1px solid #aaaacc;
	border-right: 1px solid #6666aa;
	border-bottom: 1px solid #6666aa;
	background:#eeeeee;
}

.button:hover {
			color: #334466;
	cursor: pointer;
	background: #ddeeee;
}

.info_message_error {
	margin: 0px 0px 5px 0px;
	padding: 20px 10px 20px 10px;
	text-align: center;
	font-size: 120%;
	color: #dd0000;
	line-height:180%;
	border-top: 1px dotted #990000;
	border-bottom: 1px dotted #990000;
	background: #fdfafa;
}

.info_message_error p{
	font-weight:bold;
	color: #333333;
}

.error_comment {
	margin: 10px 0px 0px 0px;
	text-align:center;
	font-size: 110%;
}

.form_mes {
	margin: 0px 2px 10px 2px;
	padding: 10px 20px;
	line-height: 170%;
	background: #fafdfd;
	border-top: 1px dotted #66aaaa;
	border-bottom: 1px dotted #66aaaa;
}

.input_title_mb {
	padding: 5px;
	background: #eef6f6;
	border: 1px solid #aacccc;
	font-weight: bold;
	color: #555555;
}

.mes_mb {
	margin: 0px 0px 10px 0px;
	padding: 10px 20px;
	border: 1px solid #aacccc;
	background: #fefeff;
	border-top: none;
	font-size: 110%;
}

.center_box{
	text-align:center;
}

p.description {
	margin: 0 0 5px 5px;
}


.attention_suspended {
	margin:15px 0;
}

.scraper_koukoku {
	margin: 50px auto 0px auto;
	width:160px;
	text-align:center;
}

PCはこんな感じかな、これとモバイルで共通なクラスを利用できれば使えるかな。

基本的な仕様（モバイル）

小説家になろうでは最初に端末がモバイルかPCか判断して読み込むCSSを変えてます。画面幅で変えているわけではない。しかもクラス名が変わる。

キャプチャ4

なお、タブレットはPCとしてカウント。スマホモバイルが該当。

画面幅で変わらないので横幅はモバイルに依存。こんなことも可能。

キャプチャ5

こんな感じにPCより大きくすることも可能。これ豆知識。この仕様マジ鬼畜ですね（割烹書く側としては）

両方で見栄えをよくするためには絶対値指定はできる限り避ける方向でいかないとだめなよう。（px指定はやばい）320px-1000pxくらいまで幅が変わる可能性があるので、あちらを立てればこちらが立たず状態になる。

ブログエリアはこんな感じ。

<div class="blog_textarea">

囲みはこれだけ。PCであった何重ものタグはどこへ行ったんだという感じですね。

なお、PCであったバグはなくなって、ちゃんと閉じる。

キャプチャ3

なのでスマホではレイアウトは崩れない。

blog_textareaのスタイル。

   margin: 10px 0px 0px 0px;
   padding: 10px;
   color: #555555;
   font-size: 90%;
   line-height: 180%;
   border-top: 1px solid #dddddd;
   border-bottom: 1px solid #dddddd;

微妙にPCと設定が違う。

まぁ統一したいなら最初にdivを追加するのが無難。

CSS(初期値、Classで使えそうなものだけ抜き出し)

p {
	margin: 5px 0px 10px 0px;
	line-height: 150%;
}
img {
	border-width: 0px;
	border-style: none;
}
a {
	text-decoration: none;
	color: #00aa77;
}
a:visited {
   color:#885577;
}
table {
	border-collapse: collapse;
	border-spacing: 0px;
}
li {
	text-decoration: none;
	list-style: none;
}
hr {
	border: 1px solid #333333;
	clear:both;
}

h1 {
	margin: 0px;
	padding: 0px;
	font-size: 112%;
	line-height: 160%;
	font-weight:bold;
	text-align: right;
}

h3.accordion_head {
	margin: 7px 0px 5px 0px;
	font-size: 85%;
	color: #776633;
}

h3.yomou_title {
	margin: 10px 0px 5px 10px;
	font-size: 120%;
	color: #776633;
}

h2 {
	padding: 5px 0px 5px 30px; 
	font-size: 100%;
	font-weight: bold;
	line-height: 170%;
	color: #663300;
}
.clr { clear:both; }

.top_button_a {
	margin: 5px 5px 0px 0px;
	padding: 10px 0px 13px 0px;
	width: 53px;
	float: right;
	text-align: center;
	-moz-border-radius:5px / 5px;
	-webkit-border-radius:5px / 5px;
	-o-border-radius:5px / 5px;
	-ms-border-radius:5px / 5px;
	border-radius:5px / 5px;
	border:1px solid #66ccaa;
	border-top:1px solid #aaddcc;
	border-bottom:1px solid #669988;
	background: #ccf0f0;
	background: -moz-linear-gradient(#fafdfd,#aaeeee,#ccf0f0);
	background: -webkit-gradient(linear, left top, left bottom, from(#fafdfd),color-stop(0.3, #aaeeee), to(#ccf0f0));
}

.top_button_a a{
	font-size: 70%;
	color: #333333;
	font-weight:bold;
}

.top_button_m a{
	font-size: 70%;
	color: #333333;
	font-weight:bold;
}

.icon_y {
	margin: 5px 5px 0px 0px;
	padding: 2px 0px 5px 0px;
	width: 53px;
	float: right;
	text-align: center;
	-moz-border-radius:5px / 5px;
	-webkit-border-radius:5px / 5px;
	-o-border-radius:5px / 5px;
	-ms-border-radius:5px / 5px;
	border:1px solid #ddd099;
	border-top:1px solid #f3f066;
	border-bottom:1px solid #aaaa99;
	background: -moz-linear-gradient(#ffffff,#ffff99,#ffff66);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff),color-stop(0.3, #ffff99), to(#ffff66));
}

.icon_y a{
	font-size: 70%;
	color: #333333;
	font-weight:bold;
}


ul.menu li {
	margin: 0px;
	font-size: 78%;
	font-weight: bold;
	float: left;
}

ul.menu a {
	padding: 5px 10px;
	color: #666666;
	font-weight:bold;
	display: block;
	line-height:30px;
}

.menu:after {
   content: "";
   clear: both;
   height: 0;
   display: block;
   visibility: hidden;
}

.attention{
	color: #dd0000;
}

.input_attention{
	color: #ff0000;
}


.opentab {
	margin: 5px;
	padding: 10px 5px 10px 5px;
	background: url(/view/images/smp_opentab.gif) no-repeat right center;
}

.section {
	margin: 10px 0px 35px 0px;
}

.section:after {
   content: "";
   clear: both;
   height: 0;
   display: block;
   visibility: hidden;
}

.section_line {
	font-size: 90%;
	line-height: 150%;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #aaaaaa;
}

.section_line2 {
	font-size: 90%;
	line-height: 150%;
	border-bottom: 1px solid #aaaaaa;
}

.in_box {
	margin: 10px;
	font-size: 95%;
	line-height: 150%;
}

.margin_box {
	margin: 10px;
}

.margin_box2 {
	margin: 5px 10px 5px 10px;
}

.margin_box_f {
	margin: 10px;
	font-size: 85%;
}

.center_box {
	margin: 10px 0px 10px 0px;
	padding: 0px;
	text-align: center;
}

.smp_sidespace{
	background: #ffffff;
	line-height: 150%;
	margin: 0px 10px;
	padding: 0;
}

.button_box {
	margin: 25px 0px 10px 0px;
	padding: 0px;
	text-align: center;
}


.list_normal {
	margin: 20px 0px 0px 0px;
	padding: 10px 10px 0px 10px;
	border-top: 1px dotted #aacccc;
	clear: both;
}

.list_normal li{
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 0px 15px;
	font-size:85%;
	line-height: 35px;
	background: url(../images/smp_arrow.gif) no-repeat left center;
}

.down {
	margin: 5px 10px 5px 0px;
	font-size:85%;
	text-align:right;
	clear: both;
}


.upper {
	margin: 30px 10px 10px 0px;
	font-size:85%;
	text-align:right;
	clear: both;
}

ul.list_g li {
	margin: 0px;
	padding: 0px;
	font-size: 95%;
	color: #000000;
	display: block;
	list-style: none;
	line-height: 180%;
}

ul.list_g a {
	color: #000000;
	background: #ffffff;
	display: block;
}


.dummy{
	display:none;
}

.marginright{
	margin-right: 15px;
}

.marginleft{
	margin-left: 15px;
}

.marginleft25{
	margin-left: 25px;
}


.button_log {
	margin: 5px auto 5px auto;
	padding: 5px 0px 5px 0px;
	width:200px;
	text-align: center;
	font-size:120%;
	font-weight:bold;
	font-family: monospace;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
   	color: #666;
	-moz-border-radius:5px / 5px;
	-webkit-border-radius:5px / 5px;
	-o-border-radius:5px / 5px;
	-ms-border-radius:5px / 5px;
	border:1px solid #aabbaa;
	background: -moz-linear-gradient(#ffffff,#ddeedd);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ddeedd));
}

.button_useradd {
	margin: 5px auto 5px auto;
	padding: 5px 10px 5px 10px;
	width:200px;
	text-align: center;
	font-size:110%;
	font-weight:bold;
	font-family: monospace;
   	color: #666;
	-moz-border-radius:5px / 5px;
	-webkit-border-radius:5px / 5px;
	-o-border-radius:5px / 5px;
	-ms-border-radius:5px / 5px;
	border:1px solid #ddbb88;
	background: -moz-linear-gradient(#ffffff,#ffff99,#ffff66);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff),color-stop(0.3, #ffff99), to(#ffff66));
}

.button_caution {
	margin: 5px auto 5px auto;
	padding: 5px 0px 5px 0px;
	width:200px;
	text-align: center;
	font-size:110%;
	font-weight:bold;
	font-family: monospace;
   	color: #333;
	-moz-border-radius:5px / 5px;
	-webkit-border-radius:5px / 5px;
	-o-border-radius:5px / 5px;
	-ms-border-radius:5px / 5px;
	border:1px solid #dd6666;
	background: -moz-linear-gradient(#ffeeee,#ffaaaa,#cc5555);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffeeee),color-stop(0.3, #ffaaaa), to(#cc5555));
}


.button_go {
	margin: 5px auto 5px auto;
	padding: 5px 0px 5px 0px;
	width:200px;
	text-align: center;
	font-size:110%;
	font-weight:bold;
	font-family: monospace;
   	color: #666;
	-moz-border-radius:5px / 5px;
	-webkit-border-radius:5px / 5px;
	-o-border-radius:5px / 5px;
	-ms-border-radius:5px / 5px;
	border:1px solid #aabbaa;
	background: -moz-linear-gradient(#ffffff,#ccddee);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ccddee));
}


.bb {
	font-weight: bold;
	font-size: 105%;
}

.koukoku{
	margin: 10px auto 10px auto;
	text-align:center;
	width:320px;
	height:60px;
}


.koukoku_rectangle{
	margin: 20px auto 20px auto;
	text-align:center;
	width:320px;
}

.koukoku_text{
	margin: 10px 5px;
	padding: 5px;
	border-radius:5px / 5px;
	border:1px solid #bbdddd;
}

.koukoku100{
	margin:15px auto 20px auto;
	text-align: center;
	width:320px;
}


.mini_attention {
	font-size: 80%;
	color: #dd0000;
}

.clr_after:after {
		content: "";
		clear: both;
		height: 0;
		display: block;
		visibility: hidden;
}

.opentab h3{background: url(/view/images/smp_opentab.gif) no-repeat right center #e6f0f6;
}


.headnav_level1 li {
	margin: 0;
	padding: 10px 0;
	box-sizing: border-box;
	width : -webkit-calc((100% - 110px) / 3) ;
	width : calc((100% - 110px) / 3) ;
	float: left;
	text-align: center;
	border-right:1px solid #b6bfb9;
	border-bottom:2px solid #d6ecd6;
	background: -webkit-linear-gradient(top, #d8f8d9, #ffffff);
	background: linear-gradient(#d8f8d9, #ffffff);
}

.headnav_level1 a {
	color:#666;
	display: block;
}

.headnav_level1 span{
	color:#666;
	display: block;
}


li.fav_open,li.fav_close {
	width: 110px;
}


li.other_open,li.other_close {
	border-right:none;
}


.headnav_open span {
   position: relative;
}

.headnav_open span:after {
	content:"";
	display:block;

	width:5px;
	height:5px;
	border-bottom: #666 1px solid;
	border-right: #666 1px solid;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position:absolute;

	right: 10px;
	top:0;
	bottom:0;
	margin:auto;
}

li.headnav_close {
	background: -webkit-linear-gradient(top, #ffffff, #caf7ca);
	background: linear-gradient(#ffffff, #caf7ca);
	display: none;
}

.headnav_close span {
	position: relative;
}

.headnav_close span:after {
	content:"";
	display:block;

	width:5px;
	height:5px;
	border-top: #666 1px solid;
	border-right: #666 1px solid;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position:absolute;

	right: 10px;
	top:6px;
	margin:auto;
}


.headnav_level2 {
	padding:10px;
	display:none;
}

.headnav_level2 li {
	margin: 0 0 10px 0;
	width: 50%;
	text-align: left;
	display: block;
	float:left;
	box-sizing: border-box;
}

.headnav_level2 a {
	padding: 5px 5px 5px 15px;
	display: block;
	position: relative;
}

.headnav_level2 a:after {
	content:"";
	display:block;

	width:0;
	height:0;
	border-style: solid;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #bbb;
	position:absolute;

	left: 0;
	top:0;
	bottom:0;
	margin:auto;
}

.prf_list {
	margin: 0px 10px 0px 10px;
	padding: 10px 0px 10px 0px;
	font-size:90%;
	border-bottom:1px solid #ddddee;
}

.prf_selfintroduction {
	padding: 10px 10px 15px 10px;
	line-height:150%;
	font-size:90%;
	border-bottom:1px solid #ddddee;
}

a.more {
	display:block;
}

.prf_sitename {
	margin: 5px 0px 3px 0px;
	font-size:130%;
	font-weight:bold;
	color: #00aa77;
}

.prf_list img {
	margin: 5px 0;
	max-width: 100%;
}

.prf_siteurl {
	margin: 5px 0px 5px 0px;
	font-size:100%;
	color: #00aa77;
	word-break: break-all;
}

.novel_list {
	margin: 5px 10px 0px 10px;
	padding: 5px 0px 5px 0px;
	line-height:130%;
	border-bottom:1px dotted #aaaaaa;
	word-break: break-all;
}

.novel_type {
	width:45px;
	float:left;
	font-size: 85%;
}

.novel_genre {
	width:200px;
	font-size: 85%;
	float:left;
}

.novel_title {
	 padding: 3px 0px 2px 0px;
	font-size: 110%;
	clear: both;
}

.date {
	font-size: 80%;
	color: #666666;
	clear: both;
}

.series_no {
	float:left;
}
.series_cnt {
	font-size: 90%;
	padding-left: 70px;
}

.novel_list span.hyoka_date {
		color: #999999;
	line-height: 120%;
		font-size: 82%;
}


h2 {
	clear: both;
	padding: 5px 5px 5px 15px;
	font-size: 85%;
	font-weight: bold;
	color:#ffffff;
	background: #333333;
	border-bottom:1px solid #aabbbb;
}

h2.mytop {
	color:#666666;
	clear: both;
	background: #e6f0f6;
}

h2 a {
	font-size: 95%;
}

h2 a:visited {
	color: #00aa77;
}

h3 {
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 10px;
	font-size: 85%;
	font-weight: bold;
	color:#666666;
	background: #e6f0f6;
	clear: both;
	border-bottom:1px solid #aabfbb;
}

h3 a {
	font-size: 95%;
}

.a_line {
	padding: 10px 10px 10px 0px;
	text-align: right;
	font-size: 80%;
	clear: both;
}

.page_bar {
	margin:10px 0px 0px 0px;
	padding: 0px 5px 10px 5px;
	font-size:90%;
	text-align: center;
	border-bottom: 3px solid #99bbcc;
}

.page_bar a {
	margin: 0px 10px 0px 0px;
	padding: 5px 5px 5px 5px;
}

.crumb {
	padding: 10px 5px 5px 10px;
	font-size:80%;
	background: #f3f3ee;
	border-bottom: 1px solid #ccddee;
}

.a_line {
	margin: 15px 0px 0px 10px;
	text-align: left;
	font-size: 90%;
	clear: both;
}

.novel_ex {
	margin: 5px 0px 5px 0px;
	font-size: 85%;
	line-height:150%;
	color:#666;
}

.novel_point {
	margin: 5px 0;
	display: flex;
	font-size: 85%;
	line-height: 1.5;
	color:#666;
}

.novel_info {
	margin: 10px 0px 5px 0px;
	font-size: 85%;
	line-height:150%;
	clear: both;
}

.novel_key {
	margin: 0px 10px 0px 0px;
}

.novel_key span{
	margin: 5px 5px 0px 0px;
	display:inline-block;
}

.blog_title {
	 padding: 10px 10px 5px  10px;
	font-size: 110%;
}

.blog_date {
	 margin: 0px 0px 0px 10px;
	font-size: 80%;
	color:#999999;
}

.novel_list span.blog_date {
	 margin: 0px;
}

.blog_textarea {
	margin: 10px 0px 0px 0px;
	 padding: 10px;
	color:#555555;
	font-size: 90%;
	line-height:180%;
	border-top:1px solid #dddddd;
	border-bottom:1px solid #dddddd;
}

.blog_textarea img {
	max-width:100%;
	height:auto;
}


.my_blog_l {
	margin: 10px 10px 10px 10px;
	width: 120px;
	float: left;
	font-size: 80%;
	text-align: left;
}

.my_blog_r {
	margin: 10px 10px 10px 10px;
	width: 120px;
	float: right;
	font-size: 80%;
	text-align: right;
}

.blog_name {
	font-size: 85%;
}


.comment_delete {
	width: 60px;
	font-size: 80%;
	text-align: right;
	float: right;
}

.comment_date {
	width: 200px;
	font-size: 80%;
	color:#999999;
	float: left;
}


.gray {
	color: #aaaaaa;
}


.dummy{
	display:none;
}

.opentab {
	margin: 10px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
	height: auto;
	line-height: 100%;
	font-size: 80%;
	background: url(/view/images/smp_opentab.gif) no-repeat right center #f0f6f6;
}

.koukoku_footer {
	margin: 30px auto 10px auto;
	width:320px;
	text-align:center;
}

.koukoku_rectangle {
	margin: 20px auto 0px auto;
	text-align:center;
	width:300px;
}

.novel_list{
	overflow: hidden; word-break: break-all; letter-spacing: 0px;
	margin: 5px 5px 5px 5px;
	padding: 5px;
}


p.description {
	margin: 5px 0 0 10px;
	font-size:85%;
}

.margin_box2 {
	margin: 20px;
	padding-bottom:10px;
	line-height: 150%;
	font-size:95%;
}

.margin_box2 table {
	margin: 10px 0 0 0;
	width:100%;
	box-sizing: border-box;
}

.margin_box2 table th,.margin_box2 table td {
	border:1px solid #999;
	padding:5px;
	box-sizing: border-box;
	text-align:left;
}

.margin_box2 table th {
	width:70px;
	background: #eef6f6;
}

.attention_suspended {
	margin:10px;
}


雑感

設定されているclassを使いたい場合はPCとモバイルが違うことを理解する。

またスタイルが変更される恐れがあることを理解して使う。

使う場合は複数のclassを指定すること。

なお、プレビュー画面では読み込んでいるcssが違うので、本番環境で見え方が変わる（なんなの……。プレビューとはいったい。まぁクラス使う変態さんなんか想定していないということでしょうね）

影響されないためにはがっちりスタイルをインラインで定義させること。

また絶対値指定はNG、なるべくemか%で指定すること。そうじゃないとPCとモバイルでずれる。



良ければサポートお願いします。サポート費用はサーバー維持などの開発費に使わせていただきます。