タグ・デザイン掲示板

[

表紙以外のページで行間の調整ができません
by こみ

2016-08-09 23:06
テンプレートを利用させていただいているのですが、小説本文の行間や文字と文字の間隔の調整などができません。head内のbody{}にline-heightを入れてみたりしたのですが変化はありませんでした。不勉強で初歩的な質問かもしれませんが、どなたか教えていただけると助かります。

<style type="text/css"></style>
<style type="text/css">

.top {
<pc_only>width:500px;</pc_only>
margin: 0.5em;
padding: 10px;
line-height: <pc>2.5em</pc><nopc>130%</nopc>;
letter-spacing: <pc>4</pc><nopc>2</nopc>px;
border: dashed 1px #dddddd;}

a {
text-decoration: none;
border-bottom: dashed 1px #dddddd;}
a:hover{
position:relative;top:1px;left:1px;}

</style>

文章レイアウト
<pc_only><div class="layout"></pc_only><div style="text-align:right" align="right">#title#</div><br/><div style="text-align:left" align="left">#text#</div>

#prev_prev_prev# / #next_next_next#

[ #novel1_戻る# ]</div><pc_only></div></pc_only>

全体レイアウト
<center><div class="top" align="center">#novel#</div></center>

pc
[編集]

by 774

2016-08-10 00:34
CSSは、HEAD内なら下ほど、HTMLタグなら内側が優先されます。

例えばですが、

【HEAD】
    <style type="text/css">

    .aaa {
        color: #ccc;/*←下の指定で#000上書きされる*/
        color: #000;}

    .bbb {
        color: #f00;}

    </style>

【全体レイアウト】
    <div class="aaa">
        あああ
    <div class="bbb">
        いいい
    </div>
    </div>

としたとき文字色はそれぞれ、『あああ』は#000、『いいい』は#f00になります。

ナノでは
　(前略)
　<body>
　　全体レイアウトなどの中身
　</body>
　(後略)
の形で出力されるので、提示されているレイアウトでは<body>よりも内側(全体レイアウト)の<div class="top>(
.top{})に指定してあるline-heightが優先されている状態です。
なので.top{}間の該当指定を編集するか、削除してbodyのline-heightを継承させるかで反映させることができると思われます。

表紙以外で、とのことですが表紙画面は行間指定が反映されているのでしょうか？body{}に指定等、提示されている状況でそうなのだとしたら逆に反映されている表紙画面の方が問題かもしれません。今一度確認してみてください。

他ちょっと気になる部分が多かったのでサクッと最適化させもらいました。
諸々記述を変えていますがあまり見た目は変わらないようにはしています。問題ないようでしたらお使いください。

【HEAD】
<style type="text/css">

* {    font-family: 'Arial', 'Osaka', 'Verdana', 'Helvetica', sans-serif; }

html {    text-align: center; }

body {
    margin: 0;
    font-size: 95%;
}

br {    letter-spacing: normal; }

a {
    text-decoration: none;
    border-bottom: dashed 1px #dddddd;
}
a:hover {
    position: relative;
    top: 1px; left: 1px;
}

img {    max-width: 100%; }

#layout {
    margin: 16px;
    margin-bottom: 8px;
    padding: 10px;
    border: dashed 1px #dddddd;
}

.right {    text-align: right;}
.left {    text-align: left; }
.center {    text-align: center;}

<nopc>
/* ▼ガラケー向け */

#layout {
    line-height: 130%;/*行間*/
    letter-spacing: 2px;/*字間*/
}

</nopc><pc>
/* ▼pc,sp向け */

#layout {
    line-height: 2.5em;/*行間*/
    letter-spacing: 4px;/*字間*/
}

@media only screen and (min-width: 500px) {

  body {
    max-width: 500px;/*pc用幅*/
    margin-left: auto; margin-right: auto;
}
  #layout { margin-right: 0; margin-left: 0; }
}

</pc>

</style>

【全体レイアウト】
<div id="layout">#novel#</div>

【文章画面レイアウト】
<div class="right">#title#</div>
<div class="left">#text#</div>

#prev_prev_prev# / #next_next_next#

[ #novel1_戻る# ]

pc
[編集]

by こみ

2016-08-10 11:37
774様、丁寧にわかりやすく教えてくださり有り難うございます。
説明不足ですみませんでした。
表紙の行間は.top{}のline-heightの値を変えると反映されたのですが、文章ページではなぜか反映されなかったのでこちらで相談させていただいた次第です。
直してくださった記述、ありがたく使わせていただきます。
お時間を割いてくださって本当にありがとうございました。とても助かりました。

pc
[編集]

[