タグ・デザイン掲示板

[

<解決済み>小説の画面サイズ。
by 相楽

2013-06-09 17:27
はじめまして、iPhoneを使っています。
タグなどについては全くの初心者でテンプレを使われていただいております。

ですがテンプレを使っているのですが、画面のサイズが横に広く右にスクロールしなくてはいけません。
画面サイズぴったりにしたいのですが、どのようにすればいいのでしょうか。

HEAD内はこちらです。
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<style type="text/css">

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

body {
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-shadow-color:#cccccc;
scrollbar-highlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-3dlight-color:#cccccc;
text-align: center;
padding:5px;}

a:link,a:visited {
text-decoration:none;
border-bottom:dotted 1px #555555;}

a:hover {
text-decoration:none;
color:#bbbbbb;
border-bottom:dotted 1px #bbbbbb;}

a:active {
text-decoration:none;
border-bottom:dotted 1px #555555;}

input,textarea {
margin:2px;
padding:1px;
color:#111111;
background-color:#ffffff;
font-size:85%;
border:solid 1px #cccccc;}

select,option {
color:#555555;
background-color:#ffffff;
font-size:85%;}

img {
border:0;}

/*1番目のbox*/
.all {<pc>
width: 600px;</pc>
margin: 0 auto;
padding: 0px;
text-align: left;
border:solid 1px #dddddd;
background-image:url('#mtr●_url#');
/*●の部分に素材番号を入れると敷き詰めの背景になります*/
background-repeat:repeat;
background-position:right top;}

/*2番目のbox*/
.header {
<pc>
width:590px;</pc>
margin: 0 auto;
padding:5px;
line-height: 1.5;
letter-spacing:3px;
font-size:150%;
font-family:'Century Gothic',sans-serif;}

.content {
<pc>
width:600px;</pc>
margin: 0 auto;
line-height: 1.5;
font-size:80%;
padding-top:10px;
padding-bottom:10px;}

.footer {
<pc>
width: 590px;
clear:both;</pc>
margin: 0 auto;
padding:3px;
line-height: 1.5;
letter-spacing:3px;
text-align:right;
font-size:70%;}

/*3番目の枠(幅を設定しないこと)*/
.menu {
border-top:solid 1px #dddddd;
border-bottom:solid 1px #dddddd;
<pc>
height:1.2em;</pc>
text-align:center;
margin-bottom:20px;
background-color:#ffffff;}

.menu a:link,.menu a:visited{
<pc>
display:block;
line-height:1.2em;
text-align:center;
float:left;
</pc>
border:none;
color:#333333;
letter-spacing: 2px;
padding-left: 15px;
padding-right: 15px;}

.menu a:hover {
<pc>
display:block;
line-height:1.2em;
text-align:center;
float:left;
</pc>
border:none;
color:#ffffff;
letter-spacing: 2px;
background-color: #dddddd;
padding-left: 15px;
padding-right: 15px;}

.main{
margin: 0 auto;
padding:5px;
line-height: 1.5;
letter-spacing:1px;
/*以下三行(}は除く)背景の色が濃いとき用の白のフィルター背景です。いらない場合は消してください*/
background-image:url('#tmpImg11174-11_url#');
background-repeat:repeat;
background-position:right top;}

/*特殊*/
.f1{
<pc>
width:150px;
float:left;</pc>}

.clear{
<pc>
clear:both;</pc>}

/*場所関係なし(好みで増減)*/
.text {
line-height: 2.5;
letter-spacing:2px;
padding:5px;
font-family:"メイリオ",Meiryo,Osaka,Verdana,Helvetica,sans-serif;}

.box1{
padding:5px;
margin:5px;
border:solid 1px #ffffff;}

.uline {
border-bottom:solid 1px #dddddd;}

.midashi1{
letter-spacing:3px;}

.midashi2{
font-weight:bold;}

.midashi3{
font-size:120%;}

.big {
font-size:120%;}

.small{
font-size:70%;}

</style>

いろいろ見て回ったのですがどこを直せばいいのかわからず、質問させていただきます。
勉強不足ですみません。
なにもいじっていないのですが…
よろしくお願いします。

pc
[編集]

by 、

2013-06-09 18:53
HEADだけでは提示が足りません。
下記の箇所のタグも提示して下さい。

基本設定
全体レイアウト
表紙画面レイアウト
目次画面レイアウト
文章画面レイアウト

pc
[編集]

by 相楽

2013-06-09 19:17

返信ありがとうございます！
このような感じなのですが…

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

表紙レイアウト
<div class="header">
○○</div> <div class="content"> <div class="main"><a href="#dream_url#">name change</a><div class="big">#list#</div>

目次レイアウト
<div class="header">
novel title </div> <div class="content"> <div class="main"> <div class="midashi1">index</div>
#list#

文章レイアウト
<div class="content"> <div class="main "> <div class="text">#text# </div>

ご指摘のほどよろしくお願いします。

pc
[編集]

by 匿名

2013-06-09 19:22
HEADの.allのところなどで、PC向けにサイズを600pxで指定をしているからではないですか？
iPhoneはスマートフォンなので、独自タグの<pc>が反映しているのだと思いますよ。
<pc>を<pc_only>に変えるなどすれば解決するかと思います。

pc
[編集]

by 、

2013-06-09 19:36
、です。

横長の表示になったのは、HEAD内の<pc></pc>で囲われている部分がiPhoneにも適用されているからだと思います。

<pc></pc>を全て<pc_only></pc_only>にすれば、携帯(ガラケー)と同様の表示になる筈です。
※提示されたタグにはありませんが、もし<nopc></nopc>というタグが何処かにあったらそれは<mobile></mobile>に変更して下さい。

また、<pc></pc>や<pc_only></pc_only>、<mobile></mobile>などの独自タグはHEADの{}内にあると不具合を起こすとか別のスレで見た気がしますので、外に出したほうがいいかもしれません。

【追記】
別の方法としてホムペ設定→共通HEADにあるデフォルトのHEAD内タグを出力しないにするとタグ直し無しで画面内に収まりますが、但し文字が極小となります。
まあ、此方はあくまで参考までに。

pc
[編集]

by 名無し

2013-06-09 19:37
ナノのデフォルト仕様だと、iPhoneの場合は画面の横幅は縦向きで320px・横向きだと480pxになるから、そのテンプレの横幅なら横スクロールしてしまうのは当然です。

まず、そのテンプレはbodyセレクタにpaddingがあるから、この時点でiPhoneのデバイス幅をオーバーしてるし、更にボックスの横幅も600pxになっているからパソコンとiPad向けに思えるが。

<pc>内容</pc>の独自タグはiPhoneも含まれるから、横幅をpxで固定するならスマフォのみ振り分けたほうが良い。縦向きと横向き、更にAndroidもあるからスマフォ向けの横幅は%で画面サイズの割合にするとベスト。

pc
[編集]

by 相楽

2013-06-09 20:10

たくさんの返信ありがとうございます、
とりあえずHEAD内の<pc>のところを指摘いただいたように<pc_only>に変更してみたところ、画面サイズになりました！
iPhoneのみの確認ですが、希望の画面になり、本当にありがとうございました！
また不具合が起きた時は他の記述も参考にさせていただきます。
本当にありがとうございました！

pc
[編集]

[