タグ・デザイン掲示板

[

端末によって背景色が反映されない
by 匿名

2011-08-06 03:55
少し長くなりますが、宜しくお願い致します。
私は小説の背景色を表紙だけ変えたくて既出の質問を参考にした所、Rudy様が提示されているbodyタグに<body>を記述する方法(すみません、参考にしたスレッドへのリンクの仕方が解りません)で、上下左右共に余白もなく、綺麗に表示されました。
ところが先日、auの閲覧者様から『画面が真っ黒で何も見えない』との報告を頂きました。
背景色を変えているのは表紙だけの筈なのですが、報告によると章の名前は出ているのに、文が何もなく真っ黒らしいのです。
私の携帯はdocomoなのですが、綺麗に表示されています。回答には『docomoさんの場合～』と書いてあったので、docomoで表示されれば他の機種でも問題なく表示される、と私は解釈したのですが、どうやら私の解釈は違っていたようです。
色々タグをいじってみましたが、私の携帯からは確認が取れません。
そこで、auの方と出来ればSOFTBANKの方からもどう表示されているか、確認して頂きたいのです。
もし間違った記述があれば、ご指摘頂けると大変助かります。
(レイアウトは公開テンプレートをダウンロードし、自分なりにアレンジを加えた物です)
どうか、宜しくお願い致します。
※報告の内容を一部編集しました。

HEAD･HTML詳細

■XHTML変換
する

■文書宣言
無記入

■HTMLタグ
無記入

■HEAD内
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<style type="text/css">

* {
font-family:"メイリオ",Meiryo,Osaka,Verdana,Helvetica,sans-serif;}

body{
text-align: center;
margin:0;
padding:0;
background-color:#～;color:#～;}
a:link{color:#～;}
a:visited{color:#～;}

.all {
<pc>
width: 600px;</pc>
margin: 0 auto;
padding: 5px;
text-align: left;
border:solid 1px #dddddd;
background-image:url('画像URL');
background-color:#000000;
background-position:top center;
background-repeat:no-repeat;}

.header {
<pc>
width: 590px;</pc>
margin: 0 auto;
line-height: 1.5;
letter-spacing:3px;
font-size:150%;}

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

.main2 {
<pc>
float:right;
width:485px;
padding-left:5px;</pc>
margin: 0 auto;
font-size:90%;
line-height: 1.5;}

.text {
<pc>
width: 585px;</pc>
margin: 0 auto;
font-size:90%;
<pc>line-height: 2;</pc>
<nopc>line-height: 1.5;</nopc>
letter-spacing:2px;}

.side {
<pc>
float:left;
width: 100px;,/pc>
font-size:90%;}

.menu {
<pc>
width: 100px;</pc>}

.menu a {
border:solid 1px #ffffff;
letter-spacing: 2px;
padding: 3px;
<pc>
display: block;</pc>}

.menu a:hover {
border:solid 1px #dddddd;}

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

.midashi1{
font-weight:bold;}

.chiisai{
font-size:80%;}

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

a:hover {
color:#999999;
border-bottom:dotted 1px #999999;}

input,textarea,select {
color:#111111;
background-color:#ffffff;
border:solid 1px #999999;
padding:1px;
font-size:80%;}

img {
border:0;}
br {
letter-spacing:0;}

</style>

■bodyタグ
<body>

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

■表紙画面レイアウト
<style type="text/css">body{background-color:#000000;color:#808080;}</style>
<pc><div style="margin 0px"></pc>
注意書
<br /><br />
<a href="#list_url#" class="aka"><span style="color:#FF0000">start</span></a><br /><br />
</div>

■目次画面レイアウト
#list#<br /><br />

■文章画面レイアウト
<br />
<div class="midashi1">#title# </div><br /><br />
#text#<br /><br /><br /><br />
<Div Align="center">#prev_←_　# #next_→_　#<br />
<a href="#bkm_url#">bookmark</a><br />
</Div><br /><br />

F02C
[編集]

by ありたま

2011-08-06 14:47
即出ではなく既出です。
ぱっと見た感じタグミスがあります。確認してください。
質問内容ですが、
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=56&viewType=thread
が参考になりませんか？

T004
[編集]

by 匿名

2011-08-06 15:09
＞リンクの仕方が解りません
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=135&viewType=thread
こんな感じでURLをコピペすれば、自動でリンクされます。(ちなみに↑はこのスレのURL)

あと細かいですが「即出」は「既出(きしゅつ)」のことでしょうか？
(追記：すみません。ゆっくり書いてたら被りました…)

共通HEAD、上下テキストに何か入力されてませんか？
機能のほうの色設定はどうなっていますか？

気になったのは
body{
text-align: center;
margin:0;
padding:0;
background-color:#～;color:#～;}
ここの「～」になっているカラーコード部分です。
URLや内容の文章はともかく、カラーコードを伏せられると状況が再現できませんので確認がしづらいです。
もし仮に「～」のままHEADに記述されいるなら、それが異常の原因の可能性もあります。不正なカラーコードでも勝手に変な色で表現するブラウザもあったはずなので。

それから、あんまり関係ないタグのミスですが、表紙の
<pc><div style="margin 0px"></pc>
正しい形は「margin:0px」ですが、bodyに指定されてるんで終了タグもろとも消してもいいんじゃないかと思います。

pc
[編集]

by スレ主

2011-08-06 17:58
＞ありたま様
変換間違いのご指摘ありがとうございます。お恥ずかしいです。直しておきました。
それから貼って頂いたリンク先の方法なのですが、それだとどうしても余白が出来てしまって見た目が良くないので、
http://m-pe.tv/u/m/bbs/read.php?uid=nanosupport&id=5&tid=336&guid=ON
こちらの『docomoさんの場合』の方法で試しました。
それで私の携帯からは綺麗に見えたので安心していたのですが、先日auの方から見えないと報告を頂いた次第です。

＞pcの匿名様
リンクの貼り方を教えて頂きありがとうございます。参考にしたのは上記のリンク先です。

＞共通HEAD、上下テキストに何か入力されてませんか？
確かに上下テキストに、以前使っていた物を入力したままでした。これが原因でしょうか？

■共通上部表示テキスト
<center><font size="2"><table width="88%" align="center"><span style="font-size:13px;"><span style="letter-spacing:3px;"><span style="line-height:15px;"><pc><table border="0" width="40%"><tr><td><div style="line-height:180%"></pc>
■共通下部表示テキスト
</font></span></span></table></font>

もう要らないと思って消したら、今度は文章が全部真ん中に来てしまいました…。これからいじってみます…。
共通HEADには何も記入していません。デフォルトのHEAD内タグは『出力する』にしています。
＞機能のほうの色設定はどうなっていますか？
文字色…濃いグレー
背景色…白
リンク色…緑
訪問済み色…薄いグレー
アクティブリンク色…白
になってます。

それからカラーコードですが、ダウンロードした時のまま『～』になっていたので、コードを入力しておきました。
表紙のタグミスのご指摘もありがとうございます。
終了タグと一緒に消しておきました。
これで無事に表示されるでしょうか？

追記；カラーコードを設定した所、全ページに渡って同じ色が設定されてしまいました。報告の内容と同じ状態です。消してしまうと今度は全ての背景が真っ白になってしまいました。
設定したのは
background-color:#000000;color:#808080;}
a:link{color:#FF0000;}
a:visited{color:#808080;}
です。他におかしい所があったら教えて頂きたいです。お願いします。

F02C
[編集]

by ありたま

2011-08-06 20:18
文章が中央に寄るのはbodyにtext-align: center;と指定されているからだと思います。
表紙画面にあるCSSにtext-align: left;と指定すれば良いかと。
『docomoさんの場合』というのは「他のブラウザと仕様の違うdocomoブラウザに表示させる場合」と言いたいんだと思いますよ。

Rubyさんの最初の回答の
小説本文最初に
<style type="text/css">body{margin:0;padding:0;background-color:#000000;color:#ffffff;}</style><div style="background-color:#000000;color:#ffffff;">
～本文～
本文最後に
</div>
ではダメでしたか？

T004
[編集]

by スレ主

2011-08-07 07:04
＞ありたま様
返信が遅くなって申し訳ありません。アドバイスありがとうございます。
text-align: center;のタグですが、leftにするとパソコンから見た時に全部が左に寄ってしまいました。
携帯では綺麗に表示されたのですが、やっぱりパソコンからも見やすいサイトを目指したいので、自分なりにタグをいじくってみた結果、以下のレイアウトにしてみました。
相変わらず自分のDoCoMoでは問題なく表示されております。パソコンからも問題ありませんでした。
ありたま様が提示して下さった
＞Rubyさんの最初の回答の
小説本文最初に
<style type="text/css">body{margin:0;padding:0;background-color:#000000;color:#ffffff;}</style><div style="background-color:#000000;color:#ffffff;">
～本文～
本文最後に
</div>
という方法ですが、BODYタグに<body>を入力しないとやはりDoCoMoでは余白が空いてしまいました。
これでも見えないという報告があったら、余白か背景色を変える事自体を諦めるしかないのでしょうか…。
とりあえずはこのレイアウトで、もう一度閲覧者様の報告を待ってみようと思います。連絡が来次第、結果を報告しに参ります。
ありたま様、pcの匿名様、たくさんのアドバイスありがとうございました。

■共通HEAD
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<style type="text/css">
* {
font-family:"メイリオ",Meiryo,Osaka,Verdana,Helvetica,sans-serif;}

■デフォルトのHAED内タグ
出力する

■共通上下表示テキスト
無記入

■文書型宣言
無記入

■HTMLタグ
無記入

■HEAD内
body {
text-align: center;
padding:5px;}

.all {
<pc>
width: 600px;</pc>
margin: 0 auto;
padding: 5px;
text-align: left;
border:solid 1px #dddddd;

.header {
<pc>
width: 590px;</pc>
margin: 0 auto;
line-height: 1.5;
letter-spacing:3px;
font-size:150%;}

.main {
<pc>
width: 590px;
margin: 0 auto;
line-height: 1.5;
font-size:90%;</pc>
<nopc>
width: 210px;
margin: 0 auto;
line-height: 1.5;
font-size:73%;</nopc>
text-align: left;
padding-top:10px;
padding-bottom:10px;}

.text {
<pc>
width: 585px;
margin: 0 auto;
font-size:90%;
line-height: 2.5;
letter-spacing:2px;}</pc>
<nopc>
width: 210px;
margin: 0 auto;
line-height: 1.5;
font-size:73%;
letter-spacing:2px;}</nopc>
text-align: left;

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

.midashi1{
font-weight:bold;}

.chiisai{
font-size:80%;}

img {
border:0;}
br {
letter-spacing:0;}

</style>

■BODYタグ
<body>

■XHTML変換
する

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

■表紙レイアウト
<style type="text/css">body{margin:0;padding:0;background-color:#000000;color:#808080;}</style>
<div style="background-color:#000000;color:#808080;">
～注意書～
<a href="#list_url#" class="aka"><span style="color:#FF0000">start</span></a></div>

■目次画面レイアウト
#list#

■文章画面レイアウト
<div class="midashi1">#title#</div><br /><br />
#text#

pc
[編集]

by スレ主

2011-08-07 20:53
先程、閲覧者様から無事に表示されたと連絡がありました。
お手数をお掛けしました。
たくさんのアドバイスありがとうございました。

F02C
[編集]

[