タグ・デザイン掲示板

[

小説機能の水平線
by 匿名

2016-09-06 00:46
検索しても見つからなかったので、質問させて頂きます。
例えば、小説の目次ページを
ーーーーーーーーーー
タイトル
ーーーーーーーーーー
目次
目次
…
ーーーーーーーーーー
前へリンク　次へリンク
ーーーーーーーーーー
↑にしたとします。
この小説内の章によって、話数が目次一ページ内に表示する件数の限度に達していなかった時、この前へリンクと次へリンクが
ーーーーーーーーーー
タイトル
ーーーーーーーーーー
目次
目次
ーーーーーーーーーー

ーーーーーーーーーー
となって水平線だけが残り空白ができると思うのですが、この空白を無くしたいです。
ーーーーーーーーーー
タイトル
ーーーーーーーーーー
目次
目次
ーーーーーーーーーー
↑このようにしたいです。
他の章で話数が限度を超えた時は、一番上の図のようにきちんと水平線があり、かつ前へリンクと次へリンクもきちんと表示されるようにしたいです。
どうか方法を教えてください。よろしくお願いします。

pc
[編集]

by 774

2016-09-06 04:19
前後ページへの独自タグから<hr />までを<div class="jump">と</div>で囲み、
HEADに
<style type="text/css">

.jump hr { display: none;}
.jump a ~ hr { display: block; }

</style>

でいかがでしょうか。これで機能しない場合は、他の記述との折り合いが悪い可能性があるので表紙画面レイアウトやHEAD等レイアウトの詳細を提示してください。

pc
[編集]

by 匿名

2016-09-06 17:11
774様、ご回答ありがとうございました。教えてくださって、ありがとうございます。
せっかく教えて頂いたのですが、やはり折り合いが悪いのか、機能しませんでした。
当の目次ページのレイアウトです。↓
<span style="font-family:ヒラギノ角ゴ ProN W1;"><blockquote style="margin:0em 1em 0em 1em"><hr size=1 color=#ccc>#title_chapter#<hr size=1 color=#ccc><hr color="#ffffff" size="1">#list#<hr color="#ffffff" size="1"><hr size=1 color=#ccc>#prev_preve_#　#next_next_#<hr size=1 color=#ccc><div style="text-align:right">#novel1_top#</div><hr size=1 color=#ccc></blockquote></span>

そして、HEAD内です。↓
<style type="text/css">

body{
font-family:ヒラギノ角ゴ ProN W3;
word-break: break-all ;
word-wrap: break-word ;
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}

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

a:hover {
text-decoration:none;
color:#cccccc;
}

</style>

よろしくお願い致します。

pc
[編集]

2016-09-09 03:54
もしセレクタが非対応なだけだったのなら774様が教えて下さったのを+にするだけでもいけるんじゃないかな？と思ったのですが、どうでしょう。
とりあえず、ザッと見でちょっと気になった箇所に手を加えて、

HEAD内↓
<style type="text/css">

body {
font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',sans-serif;
word-break: break-all;
word-wrap: break-word;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
}

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

a:hover {
text-decoration: none;
color: #ccc;
}

.novel {
font-family: 'ヒラギノ角ゴ ProN W1','Hiragino Kaku Gothic ProN',sans-serif;
}

.jump .sp { display: none; }
.jump hr { display: none; }
.jump a + hr,.jump a + .sp + hr { display: block; }
.jump a + .sp + a { margin-left: 1em; }

</style>

目次レイアウト↓
<div class="novel"><imode><table width="86%" border="0" align="center"><tr><td></imode><noimode><div style="padding:0 1em;"></noimode><hr size="1" color="#cccccc" />#title_chapter#<hr size="1" color="#cccccc" /><hr size="1" color="#ffffff" />#list#<hr size="1" color="#ffffff" /><hr size="1" color="#cccccc" /><div class="jump">#prev_prev_#<span class="sp">　</span>#next_next_#<hr size="1" color="#cccccc" /></div><div style="text-align:right;">#novel1_top#</div><hr size="1" color="#cccccc" /><noimode></div></noimode><imode></td></tr></table></imode></div>

ではだめでしょうか

※一部追記しました

pc
[編集]

by 匿名

2016-09-12 22:16
ご回答、ありがとうございました。
教えて頂いた通りにしてみましたところ、希望通りの形になりました！
お二方共、本当にありがとうございました！

pc
[編集]

[