タグ・デザイン掲示板

[

文章ページに余白が適用されない
by 匿名

2016-10-22 00:57
スペースお借りします。【余白　小説機能】などで検索を掛けましたが同一の書き込みがなかった為スレ立てさせて頂きました。既出でしたら削除致しますので誘導お願い致します。

小説機能を利用しているのですが、HEAD内の数値を変えても余白の大きさが変わるのは表紙ページのみで文章ページには変更が適用されません。使用しているのはお借りしたユーザーテンプレで、表紙ページと文章ページの両方の余白を同じ大きさにしたいです。

全体レイアウトには#novel#、文章レイアウトには#text#のみの記載の為、HEAD内のみ記載します。

<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Lancelot' rel='stylesheet' type='text/css'>

<style type="text/css">
body{
margin: 20%;
font-size: 80%;
color:#ffffff;
background-color:#001e43;
line-height: 2em;
font-family: 'Quicksand', sans-serif;
letter-spacing: 2.5px;}

.cc1{
text-align: center;
color:#ebf6f7;}

.title{
text-align: right;
color:#ebf6f7;
letter-spacing: 2.5px;
border-bottom:solid #1e50a2 2.5px;
padding-bottom: 1px;}

a{
text-decoration:none;
color:#ffffff;
background-image: linear-gradient(transparent 80%, #1e50a2 80%);}

</style>

宜しくお願い致します。

pc
[編集]

by と

2016-10-22 08:02
表紙画面レイアウトの書き出しもお願いします。
あとmargin:20%となっていますが、上下左右にこの数値だとモバイル端末では大きすぎると思いますよ。無料版なら広告下げになるかもしれません。

pc
[編集]

by 匿名

2016-10-22 15:22
と様、ご返信ありがとうございます。

margin部分のご指摘なのですが、こちらを変更してみた所表紙ページしかmarginが変わらなかったのでとりあえず従来のままにしております。問題が解決したら～10%程度に変えたいと考えています。

表紙レイアウトです。

<br><div class="cc1"><font size="3">TITLE</font></div>

#list#

<a href="●●">←main</a>

メインへのURLは記載していますが、伏せさせて頂いています。宜しくお願い致します。

pc
[編集]

by と

2016-10-23 21:38
IDやサイトURLの書き込みは禁止ですから書かなくて正解ですよ。

こちらの小説機能に↑のHEAD内やレイアウトをあてて余白の値を20%や10%に変えてみたところ、文章画面でもきちんと反映しました。当方はiPhoneで確認しましたが、スレ主様のお使いの端末は何でしょうか？
共通HEADや共通上下レイアウトには何か書いていますか？

ナノの場合、bodyへの余白を指定すると広告ごとズレてしまい、スマホだと横スクロールが発生する機種もあるため、bodyではなく全体を囲むdivに余白を指定されるようお勧めします。下記は一例です。

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

HEAD内
body{
text-align:center;
font-size: 80%;
color:#ffffff;
background-color:#001e43;
line-height: 2em;
font-family: 'Quicksand', sans-serif;
letter-spacing: 2.5px;
}

#layout{
padding:20%;　←余白の調整はここでする
text-align:left;
}
以下略

pc
[編集]

by 匿名

2016-10-24 03:38
と様

ご指摘ありがとうございます。当方はAndroid端末2台（どちらもGalaxyシリーズ）での確認だったのですが、提示したテンプレですと何度変更しても反映されませんでした。iPhone端末ではきちんと反映されたとの事ですので機種の問題なのかも知れません。

またと様にご提示頂いた箇所を変更したテンプレを使用した所、当方の端末でも無事に文章画面レイアウトの方にも反映されました。お恥ずかしながらbody部分での余白指定が広告ズレの原因になる件は存じていなかったので、とても助かりました。本当にありがとうございました。

pc
[編集]

[