タグ・デザイン掲示板

[

HPの閲覧が一部の方において出来ない状態なってしまった時
by エリ

2015-12-12 19:53
HPの閲覧が一部の方において不可能だというご連絡を頂きました。
自分の携帯、PCでは問題なく閲覧出来、普通に来訪して下さる方もいます。
下記のタグは古い携帯などでは閲覧出来ないのでしょうか？
詳しい方いらっしゃいましたら、教えて頂けると助かります。

HEAD
<link href="http://fonts.googleapis.com/css?family=Karla" rel="stylesheet" type="text/css"><style type="text/css">
.waku { padding:4%; margin:4%; auto; font-size:11px; line-height:150%; letter-spacing:1px; border: 2px dotted #DDD3B5;}
</style>
<style type="text/css"><!--body {
text-align: left;
padding: 0px;
line-height:2;
font-family:Georgia,Verdana, Arial,"MS UI Gotic", Osaka, serif;
}
全体レイアウト

<div style="padding:3% 5%; 1px; letter-spacing:1pt;"><div style="text-align:center" align="center">
<div class="waku">
#sozai2147_w#
<strong><font size="2">サイト名</font></strong><center><font size="0.3">カウンター</center></font>

pc
[編集]

by 特命

2015-12-12 23:43
提示されたレイアウトのままでしたら、最後のCSSのコメントアウトの閉じタグがないからでしょうね。
確かCSSのコメントアウトは非推奨だったような。

また、CSSやタグは一つにまとめた方がいいですよ。

pc
[編集]

by 匿名

2015-12-12 23:47
こちらで全てでしょうか？
非常に申し上げにくいのですが、HEAD内も全体レイアウトも大変よろしくありません…。
今まで一部のブラウザが補正によって閲覧を可能にして下さっていただけで、残念ながら古い携帯云々の問題では無いと思われます。むしろこの状態で問題なく閲覧出来ていた環境の方が稀有であると感じる程です。

今後の為にも一度(X)HTMLとCSSについて基本をご自身で調べ直してから修正を試みました方が良いかと思います。
また、こちら→http://nanos.jp/nanossupport/bbs/3/list?ThreadID=1028にございますご回答ではナノ様の仕様について詳しくご説明下さっておりますので、CSSをご修正なさる際に参考になるかもしれません。他にも参考になりますスレが沢山ございますので、必要に応じて検索をされてみて下さい。

【追記】
>> 2015-12-12 23:43 特命様
ゆっくり打っていたらかぶりました…申し訳ございません…

pc
[編集]

by エリ

2015-12-13 00:40
特命さま、匿名さま
早々にお返事どうもありがとうございました！
携帯云々の問題ではなくタグの問題だったのですね…

サイト作成も初めてで、テンプレートをダウンロードじ自分なりに編集したつもりでしたが、知識もなく手探りにいじってしまったのでこんな結果になってしまったのかも…。お恥ずかしいです>_<
教えて頂けて助かりました、ありがとうございます！

添付して頂いた場所や、ネットでCSSをググッて調べてみましたが、全然理解出来ず…泣
今のトップページの編集は諦め、新しいテンプレートで編集することに致しました。

もし差し支えなければ、こちらのタグは問題ないかお教え頂けますでしょうか…

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

全体レイアウト
<div align="center"><nopc><table border="0" bordercolor="ffffff" width="90%"><tr><td><div style="line-height:15px;"></nopc><nopc><font size="1"></nopc><pc><table border="0" bordercolor="ffffff" width="50%"><tr><td><div style="line-height:20px;"></pc><pc><font size="3"></pc><br><br><div style="background-image:url('#sozai302_w_url#');">　
<div align="right">
<font color="f09199">s</font>ite
</div></div><br>
<center><a href="URL">info</a> <a href="URL">new</a> <a href="URL">novel</a> <a href="URL">mail</a><br clear="All">
<a href="URL">clap</a>→ <a href="URL">res</a>（→12/11） <br><br><br>
<a href="URL">rank</a> | <a href="URL">rank</a>

～since 2015.09.30～</center>

</td></tr></table></div></td></tr></table></div></div>

色々お伺いして申し訳ございません、宜しくお願い致します。

pc
[編集]

by と

2015-12-13 01:24
そもそもここはユーザーテンプレの間違い探しをする場所ではないということをご理解ください
上記は多数の問題箇所があります
自力で修正出来ないなら公式テンプレをご使用になった方が良いです

pc
[編集]

by エリ

2015-12-13 10:47
とさん、返信頂きありがとうございました。
その通りですね…他の方が作成したテンプレは載せるべきではないですね、申し訳ありません。
気をつけてまいります。

あれから自分なりにですがCSSなどを少し勉強して…
当初のタグなどを編集してみたのですが、これなら問題ないでしょうか？
独学なので、自信はあまりないですが…
お時間ある時にでも見て頂けたら幸いです。

HEAD内
<style type="text/css">
.waku { padding:4%; margin:4%; auto; font-size:11px; line-height:150%; letter-spacing:1px; border: 2px dotted #DDD3B5;}
body {
text-align: left;
padding: 0px;
line-height:2;
font-family:Georgia,Verdana, Arial,"MS UI Gotic", Osaka, serif;
}
</style>

全体レイアウト

<div style="padding:3% 5%; 1px; letter-spacing:1pt;"><div style="text-align:center" align="center">
<div class="waku"><center>

#mtr36#
<strong><font size="4">サイト名</font></strong>
<font size="2">カウンター</center></font>

<font size="2"><a href="">info</a> <a href="URL">日付</a> <a href="URL">novel</a> <a href="URL">mail</a> <br><br>
<a href="URL">clap</a>→ <a href="URL">res</a>（→日付） <br>

<a href="URL">rank</a> |

～since ～

<br></div></d></div></div>

宜しくお願い致します。

pc
[編集]

2015-12-13 15:34
【全体レイアウト】

　01] <div style="padding～
　02] <div style="text-al～
　03] <div class="waku">
　04] <center>
　05] (空行)
　06] #mtr36#
　07] <strong>
　08] <font size="4">
　09] サイト名
　10] </font>
　11] </strong>
　12] <font size="2">
　13] カウンター
　14] </center>
　15] </font>
　16] (空行)
　17] <font size="2">
　18] <a href="">info</a>
　19] <a href="URL">日付</a>
　20] <a href="URL">novel</a>
　21] <a href="URL">mail</a>
　22] <br><br>
　23] <a href="URL">clap</a>→
　24] <a href="URL">res</a>（→日付）
　25] <br>
　26] (空行)
　27] <a href="URL">rank</a> |
　28] (空行)
　29] (空行)
　30] ～since ～
　31] (空行)
　32] <br>
　33]</div>
　34]</d>
　35]</div>
　36]</div>

【HEAD】

　<style type="text/css">
　Ａ] .waku {
　Ａ-01] padding:4%;
　Ａ-02] margin:4%;
　Ａ-03] auto;
　Ａ-04] font-size:11px;
　Ａ-05] line-height:150%;
　Ａ-07] letter-spacing:1px;
　Ａ-08] border: 2px dotted #DDD3B5;
　}

　Ｂ] body {
　Ｂ-01] text-align: left;
　Ｂ-02] padding: 0px;
　Ｂ-03] line-height:2;
　Ｂ-04] font-family:Georgia～
　}
　</style>

【修正点】

▼[01]<div style="padding:3% 5%; 1px; letter-spacing:1pt;">

→1px;
　└コピペミスでしょうが謎の記述です。
　CSSは基本的に『プロパティ:値;』になります。

→letter-spacing:1pt;
　└[03]([Ａ-17])で上書きされるので無駄になります。

→いっそ[Ｂ-02]を『padding:3% 5%;』にして、[01]と閉じタグの[36]をまるまる削除しちゃいましょう。

▼[02]<div style="text-align:center" align="center">

→いっそ[Ｂ-01]を『text-align:center;』にして、[02]と閉じタグの[35]をまるまる削除しちゃいましょう。

▼[04]<center>

→[02]で指定済みの為不要です。閉じタグの[14]と一緒にまるまる削除しちゃいましょう。

▼[04]<center>
▼[12]～[15]<font size="2">カウンター</center></font>

→HTMLタグを入れ子にする際は<A><B></B></A>のようにします。<A><B></A></B>とならないよう気をつけましょう。

▼[12],[17]<font size="2">

→サイト名以外の全ての文字がこのタグで覆われている状態です。
　[Ａ-04]を『font-size:small;』または『font-size:10pt;』にすることで省略できます。閉じタグの[15]含めて削除しちゃいましょう。

→[17]は閉じタグが見受けられません。今後使用する際は必ず閉じるようにしましょう。

▼[34]</d>

→コピペミスと思いますが謎の記述です。不要なので削除しちゃいましょう。

▼[28]～
→空行が目立ちます。
基本設定にて『改行を<br>に変換して表示』を『する』している場合は[01][03]の余白含めて広告下げになります。
カウンターや日付はコンテンツに含まれないのでその辺りを考慮しつつ修正を。
助け合い掲示版にて『広告下げ』や『ロック　解除』で検索すると参考になりそうなスレッドが見つかるかと思われます。

▼[Ａ-03]auto;
→コピペミスでしょうが以下略

【他】

省略できる箇所はひとつのタグにまとめて省略するようにしましょう。
とにかく自分でパッと見てわかりやすい記述をするのがコツです。

タグに自信ががないのならば『改行を<br>に変換して表示』を『しない』にすることをおすすめします。(小説やブログ本文は個別に設定可能)

編集ページにて、改行表示させたい箇所以外で改行できない

<div class="a"><div class="b"><span>あああ</span>
いいい</div><div class="c">ううう</div></div>

より

<div class="a">

  <div class="b">

    <span>あああ</span><br>
    いいい

  </div>

  <div class="c">

    ううう

  </div>

</div>

の方がミスが減ると思いますよ。

pc
[編集]

by エリ

2015-12-13 21:00
上記のコメント書いて下さった方、詳しく教え下さりありがとうございました！
とても分かり易く記載して頂いたので、私でも編集してレイアウト内などスッキリさせることが出来ました！
また改行の件や、タグのダブりなどのことなども勉強になりました。
まだまだ初心者ですが、少しずつ勉強していきたいと思います。
本当にありがとうございました！

pc
[編集]

[