小説家になろう検索結果ページ専用CSS
現実逃避で、小説家になろうの検索結果のページ専用CSSを作ってました。
こちら↓のページが こんな感じ↓になります。
本当は、「連載中(全○部分)」も作者名と同じ行にしたかったとか、あらすじ下のキーワード等をもっとシンプルに表示したかったとか、paddingで余白指定をしたかったけど右端が切れるのでタイトルとあらすじ部分だけ余白を設定したとか、微妙に心残りのある仕様になってます。一応、Opera12.17、Opera 23.0とFirefox最新版で確認済み。（追記→余白部分を修正して、なんとか連載中・完結表記も作者名と同じ行にできました。ただ、週別ユニークユーザ、レビュー数、評価人数の非表示はやはりうまくできず……）
/*各作品全体*/
div.searchkekka_box{
border:2px solid #c0c0c0;
background-color:#f0f0f0;
margin:10px 0px 20px 10px;
padding:10px;
position: relative;
text-align:right;
}div.searchkekka_box div.novel_h{
text-align:left;
}/*作品タイトル部分のリンク*/
a.tl{
text-decoration: none !important;
}/*短編・完結・連載中表示部分*/
div.searchkekka_box td.left{
visibility: visible !important;
position: absolute;
display: block;
text-align:left;
text-decoration: none;
top:38px;
left:10px;
max-width:300px;
z-index: 10;
}div.searchkekka_box td,
div.searchkekka_box div{
text-align:left;
width:716px;
overflow:visible;
display:inline-block;
}/*あらすじ部分*/
div.ex{
border-top:1px solid #c0c0c0;
border-bottom:1px solid #c0c0c0;
background-color:#ffffff;
padding:10px;
position:relative;
left:-10px
}/* br を除去*/
div.searchkekka_box br{
display:none ;
}/*ジャンルとキーワードで改行*/
div.ex ~ br:nth-of-type(2){
display:inline !important;
}/*読了時間（文字数）以外は非表示*/
div.ex ~ span.marginleft:nth-of-type(1){
display: inline !important;
margin-left:0px;
margin-right:0px;
}
div.searchkekka_box td span.marginleft,
div.searchkekka_box td img{
display: none;
}/*総合評価ポイント*/
div.searchkekka_box td span.attention{
margin-left:10px;
margin-right:10px;
}
おまけ
# 平成26年8月10日(日)追記
昨日、一生懸命上記ユーザーCSSを書いた後に気づいたのですが、なろう系列専用ツールバーというuser.jsがあり、そちらの検索結果ページがとても見やすいシンプルなものでした。
そちらでは、作品のあらすじは非表示にしており、タイトル上にマウスをもってくるとあらすじ＆キーワードがポップアップ表示されるという格好いい仕様で、なんかこっちでよくね？といった感じです；；
AutoPagerと併用すると表示が崩れてしまうのが残念ですが……
とりあえず、まねをしてオンマウスであらすじがポップアップ表示されるユーザーCSSを作成してみました。
ポップアップ表示のCSSの書き方については、Qiita - プログラマの技術情報共有サービスを参考に。
/*各作品全体*/
div.searchkekka_box{
border:2px solid #c0c0c0;
background-color:#f0f0f0;
margin:10px 0px 20px 10px;
padding:10px;
position: relative;
text-align:right;
}div.searchkekka_box div.novel_h{
text-align:left;
}/*作品タイトル部分のリンク*/
a.tl{
text-decoration: none !important;
}/*短編・完結・連載中表示部分*/
div.searchkekka_box td.left{
visibility: visible !important;
position: absolute;
display: block;
text-align:left;
text-decoration: none;
top:38px;
left:10px;
max-width:300px;
z-index: 9;
}/*あらすじ部分*/
div.searchkekka_box :hover div.ex {
visibility: visible;
opacity: .9;
}div.ex{
white-space: pre-wrap;
position: absolute;
display: inline-block;
text-align: left;
text-decoration: none;
font-weight: bold;
left: 100px;
top:100px;
padding: 4px 6px;
max-width: 650px;
color: #ffffff;
background-color: #444;
border: 2px solid #333;
-webkit-border-radius: 4px;
border-radius: 4px;
visibility: hidden;
opacity: 0;
z-index: 10;
}div.searchkekka_box td,
div.searchkekka_box div{
text-align:left;
width:716px;
overflow:visible;
display:inline-block;
}div.searchkekka_box table{
border-top:2px solid #c0c0c0;
margin-top:5px;
padding-top:10px;
}/* br を除去*/
div.searchkekka_box br{
display:none ;
}/*ジャンルとキーワードで改行*/
div.ex ~ br:nth-of-type(2){
display:inline !important;
}/*読了時間（文字数）以外は非表示*/
div.ex ~ span.marginleft:nth-of-type(1){
display: inline !important;
margin-left:0px;
margin-right:0px;
}
div.searchkekka_box td span.marginleft,
div.searchkekka_box td img{
display: none;
}/*総合評価ポイント*/
div.searchkekka_box td span.attention{
margin-left:10px;
margin-right:10px;
}
