タグ・デザイン掲示板

[

【解決済】トップページを表示するとトップページ内中部に飛んでしまう
by 菅井

2017-05-12 16:36
ご覧いただきありがとうございます。
機能とは直接関係がないと判断し、こちらの板に作成しました。新・旧含め、タグ・助け合い掲示板ともに履歴を検索したのですが、見つからなかったので質問させていただきます。同様の質問がある、あるいは板違いである等、問題がありましたらご指摘よろしくお願いいたします。

トップページを表示すると、常にトップページの途中の部分に飛ばされてしまうことに困っています。
トップページを図で表すと、以下のようなレイアウトになっています。

　＿トップページ＿
　｜　　　　　　｜
　｜　　●●　　｜
　｜　　　　　　｜
　｜　　　　　　｜
　｜＿メイン＿｜
　｜｜　　　　｜｜
　｜｜　　　　｜｜
　｜｜　　　　｜｜
　｜｜　　　　｜｜
　｜｜　　　　｜｜
　￣￣￣￣￣￣￣￣

トップページの上部にインフォメーション等の各部屋へのテキストリンク（●●の部分）を記載しており、下半分がメイン部分になっています。メイン部分には小説ページへのテキストリンクをいくつか記載している状態です。●●の部分にメイン部分へのリンクもあり、そのリンクタグにはメイン部分へのページ内リンクを使用しております。具体的には●●部分に<a href="#main">main</a>と記載し、下部のメイン部分の始まりには<div id="main">メインの内容</div>と記載しています。

この状態でPCやスマートフォンでトップページを表示すると、メイン部分のid属性を指定した場所に強制的に飛ばされてしまいます。ちなみに飛ばされ方は、表示された直後はトップページの上端が表示されるのですが瞬時にメイン部分へ飛ばされるような状況です。

</div>が抜け落ちていないか、ブックマーク自体のURLがおかしくないか、URLの直接入力でも同様の症状が起きるのか等、色々試してはみたのですが原因が分からず困惑しております。数日前に全ページの改装を行って以降不具合が生じているので、バグでは無いように思います。

ちなみに、トップページのURLはプロトコル://ナノさんのドメイン/私のID/で、本来トップページとされているURLです。
症状の確認はAndroidバージョン4のChrome、Windows10のChromeバージョン58、IEバージョン11で行いました。

この症状の原因や考えられる要因、あるいは解決方法について、どなたか分かる方がいらっしゃいましたら教えて頂きたいです。
よろしくお願いいたします。

pc
[編集]

by と

2017-05-12 18:36
「他のページの特定の部分へのリンク」になっているのが原因では？
<a href="/私のID#main">main</a>
これじゃなくて
↓
ページ内リンクの
<a href="#main">main</a>
にしてみてはいかがでしょう。

pc
[編集]

by 菅井

2017-05-12 18:53
と様、お返事ありがとうございます。

ご指摘くださった通り、たしかにリンクが間違っておりましたので書き換えて再度確認してきました。
しかし、今回の症状の原因ではないようです……。

他の方が混乱しないよう、今回ご指摘いただいた部分は書き直しておきますね。
教えて頂きありがとうございました！
また何か思いついたことがありましたら教えて頂けると嬉しいです。

pc
[編集]

by と

2017-05-12 19:53
そうですか…詳しくはHEAD内やレイアウトの内容を見ないとなんとも言えないです。
ちなみにリロードやキャッシュのクリアをしても変わらないですか？

＞瞬時にメイン部分へ飛ばされる
これはするするっとスクロールしてしまう感じですか？それともリンク先に飛ぶような感じでしょうか？

pc
[編集]

by 菅井

2017-05-13 10:36
と様、お返事ありがとうございます！

リロードやキャッシュのクリアも試してみましたが、変化ありませんでした。
スクロールに関しては、ほとんどTOPが映っていることにも気づかないくらい瞬時にリンク先に飛ぶような感じです。スクロールされているような感じではなさそうです。

HEAD内とトップページのレイアウトは以下に記載しておきます。
ちなみにHEAD内とレイアウトに関しては、配布テンプレートをお借りして作成していますが、自分でも手を加えた部分があります。
長文で見づらくなっておりますが、もしも何か分かることがあれば教えて頂けると嬉しいです。

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

@import url(プロトコル://グーグルフォントさんのドメイン/css?family=Amatic+SC|Didact+Gothic);

body{
margin:3%;
padding:3%;
font-size:13px;
color:#0B1B49;
line-height:2;
letter-spacing:2px;
font-family:'Didact Gothic',Meiryo,メイリオ, sans-serif;
background:#F5F5F5;
text-align:center;
}

.all{
max-width:500px;
padding:0 15px;
margin:0 auto;
text-align:left;
}

.top{
width:190px;
background:#F0224F;
color:#F5F5F5;
font-family:'Amatic SC';
font-size:30px;
line-height:30px;
padding:80px 0;
display:inline-block;
border-radius:50%;
border:dashed 10px #F5F5F5;
}

p{
margin:0;
padding:0;
}

.sub{
font-family:'Amatic SC';
font-size:20px;
border-bottom:dashed 2px #F0224F;
line-height:1.5;
text-align:center;
margin-bottom:15px;
}

.ma{
background:linear-gradient(transparent 50%,#fce35a 0);
font-size:14px;
font-weight:bold;
}

a{
text-decoration:none;
color:#F0224F;
padding:0 3px;
}

a:hover{
color:#FCE35A;
}

input[type="number"],input[type="password"],input[type="submit"]{
width: auto;
height: auto;
padding: 5px;
margin: 1;
font-size: 13px;
font-weight: normal;
color: #F5F5F5;
background: #F0224F;
border: #F0224F;
border-radius: 0;
-webkit-box-shadow: none;
-webkit-appearance: none;
font-family:'Didact Gothic',Meiryo,メイリオ, sans-serif;
}

input,input[type="text"]{
width: auto;
height: auto;
padding: 5px;
margin: 1;
font-size: 13px;
font-weight: normal;
color: #F5F5F5;
background: #F0224F;
border: #F0224F;
border-radius: 0;
-webkit-box-shadow: none;
-webkit-appearance: none;
font-family:'Didact Gothic',Meiryo,メイリオ, sans-serif;
}

textarea, select{
width: auto;
height: auto;
padding: 5px;
margin: 1;
font-size: 13px;
color: #F5F5F5;
background: #F0224F;
border: #F0224F;
border-radius: 0;
-webkit-box-shadow: none;
-webkit-appearance: none;
font-family:'Didact Gothic',Meiryo,メイリオ, sans-serif;
}

</style>

■トップページのレイアウト■
プロトコル://ナノさんのドメイン/私のID/
<div class="top">サイト名</div>
<a href="プロトコル://ナノさんのドメイン/私のID/page/20/">info</a> <a href="プロトコル://ナノさんのドメイン/私のID#main">main</a> <a href="プロトコル://ナノさんのドメイン/私のID/form/1/">mail</a> <a href="プロトコル://ナノさんのドメイン/私のID/blog/6/">jank</a>
Since 2012/12/12. Last up-<a href="プロトコル://ナノさんのドメイン/私のID/blog/4/">#latest_blog4_date#</a>
<a href="ランキングのURL">ランキングの名前</a>/<a href="ランキングのURL">ランキングの名前</a>/<a href="ランキングのURL">ランキングの名前</a>
#clap1_clap#

<div class="all"><p class="sub">!!!</p>サイトの説明。詳しくは<a href="プロトコル://ナノさんのドメイン/私のID/page/20/">info</a>から。</div>

<div class="all" id="main"><p class="sub">main</p>フォームが上手く反映されない方はこちらから→<a href="プロトコル://ナノさんのドメイン/私のID/novel/10/dream">Name Change</a><pc_only><iframe src="プロトコル://ナノさんのドメイン/私のID/novel/10/dream#ff" height="80" width="100%" frameborder="0" scrolling="no">このページでは、インラインフレームを使用しています。対応しているブラウザで表示願います。</iframe></pc_only><smartphone><iframe src="プロトコル://ナノさんのドメイン/私のID/novel/10/dream#ff" height="140" width="100%" frameborder="0" scrolling="no">このページでは、インラインフレームを使用しています。対応しているブラウザで表示願います。</iframe></smartphone>
<span class="ma"><mobile><U><font size="+1"></mobile>Long Story<mobile></U></font></mobile></span>
!!! 長編夢主設定は<a href="プロトコル://ナノさんのドメイン/私のID/page/24/">こちら</a>から。
!!! 最新→<font color="#FCE35A">＊</font>

<B>小説のタイトル</B>　<mobile><br>　</mobile>小説の説明｜連載
<mobile>　</mobile><a href="プロトコル://ナノさんのドメイン/私のID/novel/10/5/">1</a><a href="プロトコル://ナノさんのドメイン/私のID/novel/10/72/">2</a><font color="#FCE35A">＊</font>…
<B>小説のタイトル</B>　<mobile><br>　</mobile>小説の説明｜連載
<mobile>　</mobile><a href="プロトコル://ナノさんのドメイン/私のID/novel/10/20/">1</a><a href="プロトコル://ナノさんのドメイン/私のID/novel/10/30/">2</a>…
<B>小説のタイトル</B>　<mobile><br>　</mobile>小説の説明｜完結
<mobile>　</mobile><a href="プロトコル://ナノさんのドメイン/私のID/novel/10/46/">1</a><a href="プロトコル://ナノさんのドメイン/私のID/novel/10/56/">2</a>
<B>小説のタイトル</B>　<mobile><br>　</mobile>小説の説明｜完結
<mobile>　</mobile><a href="プロトコル://ナノさんのドメイン/私のID/novel/10/32/">1</a><a href="プロトコル://ナノさんのドメイン/私のID/novel/10/44/">2</a>

<span class="ma"><smartphone><U><font size="+1"></smartphone>Short Story<smartphone></U></font></smartphone></span>
<a href="プロトコル://ナノさんのドメイン/私のID/novel/10/64/">小説のタイトル</a>　相手</div>

<div class="all"><p class="sub">　</p><div align="center"><a href="プロトコル://ナノさんのドメイン/私のID/"><font color="#0B1B49">プロトコル://ナノさんのドメイン/私のID/</a></font></div></div>

pc
[編集]

by と

2017-05-14 11:04
書き出していただいた内容をこちらの子ページにコピペして試したのですが、iPhoneではどうも再現できませんでした。
解決方法ではありませんが、この場合、ページ内リンクで移動した後の部分(上記なら#main付近やページ下部)に「トップへ戻る」リンクを設置しておいた方が良いのかなとも思います。一旦ページトップまで戻ってからなら、他のページから遷移した時もうまくページトップが表示されるのではないかと思います。

その他ご質問の件とは関係ないですが、気になった部分を書き出しておきます。

・font-familyのメイリオ(全角文字)には引用符をつける→例)"メイリオ"

・urlの部分、http://nanos.jpは省略する
→例)<a href="/私のID/novel/10/dream">Name Change</a>

・独自タグが使える部分は独自タグの方が無難です
<a href="プロトコル://ナノさんのドメイン/私のID/page/20/">info</a>→#page20_info#

・最初のレスで書いたとおり、同一ページ内のリンクではurlを書かない

pc
[編集]

by 菅井

2017-05-14 17:30
と様、ありがとうございます。

確かにトップへのリンクを貼ったほうがいいと思い試してみたのですが、そのリンクさえもまたメイン部分へ飛ばされてしまいました。
来訪者さまにはご自分でスクロールして上端まで戻ってもらうしかなさそうですね……。

引用符の件やドメインの省略、独自タグの使用、ページ内リンクの件について、ご指摘ありがとうございます。
さっそく書き換えてきました。
内容が見やすくなり、編集がしやすくなった気がします。

ちなみにお聞きしたいのですが、iPhoneでの再現ができなかったというのは、今回の症状が再現できなかった（トップページのTOPがきちんと表示された）ということでしょうか？
それともページの内容自体を再現することができなかったということでしょうか？

pc
[編集]

by と

2017-05-14 22:39
再現できなかったのは、ページトップへ戻れない現象のことです。ページの内容はちゃんと表示できましたよ。iframe内に当方の小説機能の名前変換フォームを呼び出して試しました。

iPhoneで確認した限りでは
ページトップのmainリンク→ページ内リンクでmain部分へ飛ぶ
↑この時点でリロードしてもトップには戻りません
ブラウザの戻るボタンを押すとページトップに戻ります。
新たに設置した戻るリンクでもちゃんとページトップに戻れました。
戻るリンクは<div class="top" id="top">サイト名</div>と<a href="#top">戻る</a>、または<a href="#top">戻る</a>のみでもHTML5はいけるようですので両方試し、両方ともページトップに戻れました。
(ちなみにDOCTYPE宣言はHTML5のものを入れています)

その他URLバーにURLを直接入力した時も普通にページトップから表示されました。

菅井様の方ではトップへのリンクすら弾かれてしまうんですね…なぜそうなるのか、私もよく分かりません。ごめんなさい。

ちょっと気になっていたのですがiframeにも#ffという部分がありますね。一度iframe部分をで囲んで非表示にして試してみてもらえますか？
またはjQueryのトップへ戻るボタンを検討してみてはいかがでしょうか。

pc
[編集]

by 菅井

2017-05-15 16:52
と様、ありがとうございます。少しお返事遅れてしまいすみません。

ページの内容は表示できたとのこと、よかったです。
iPhoneでの確認は当方では行えない環境にあるので非常に参考になります。ありがとうございます。
また、前回も教えて頂いた<div class="top" id="top">サイト名</div>と<a href="#top">戻る</a>を使う方法を試していたら、TOPへのリンクが正常に作動しました。
前回は少しミスをしていたみたいです。お騒がせしてしまいすみません。
とりあえず今はこのTOPへ戻るリンクを設置しておきました。

ところで、iframeをで囲んでみたところ、トップページが正常に表示されることが判明しました！
どうやら、と様の予想通りiframe部分に問題があるようです。

ご指摘いただいた#ffの部分なのですが、iframe内に表示しているページの名前変換フォーム部分だけを映し出すために試行錯誤した結果でした。
名前変換フォームタグの直前に<a name="ff"></a>を入れ、そこから下部（名前変換フォームの下端まで）を映すようにしています。
本来はmarginやpaddingを駆使して限られた範囲の表示ができるそうなのですが、調べて試してみても何故か上手くいかず、結局今の状態で落ち着きました。

<a name="ff"></a>を利用せずmarginやpaddingで表示する方法を教えて頂けると今回の症状は落ち着くように思います。
もしもご存知でしたら教えて頂けると嬉しいです。

具体的には、以下のような状態です。
■iframe内に映しているページ内容■
<p style="mi"><a name="form"><div align="left"><a name="ff"></a>#formStart##formInput_#name## #formInput_#name2## #formInput_#name3## #formInput_#name4## #formInput_#name5## #formInput_#name6## #formSubmit_change# #formClear_clear##formEnd#</div></p>

<div class="all"><p class="sub">　</p><div align="center"><a href="/私のID/"><font color="#0B1B49">サイトのURL</a></font></div></div>

■iframe内に映しているページのHEAD内に加えた要素■
.mi{
max-width:500px;
margin:0 0;
padding:0 0;
text-align:left;
}

input[type="number"],input[type="password"],input[type="submit"]{
↑この行以下のwidthを全てautoから100pxに変更

もしも難しいようでしたら、と様に教えて頂いたトップへ戻るリンクを使用して、しばらくはこのデザインで運営しようと思います。

pc
[編集]

by と

2017-05-16 01:24
名前変換ページをコピペしたら、菅井様と同じくiframeがページトップのように表示されました！
#を付けるとそうなってしまうみたいですね。残念ですがこの方法は諦めるしかないと思います。
marginやpaddingでの方法ですが、だいたいこんな感じだと思います。まだ微調整は必要ですが。スマホの幅の例です。
<div style="width:280px;height:140px;margin:0px;overflow:hidden;border:1px solid;">
<iframe width="300px" height="400px" frameborder="0" style="margin:-100px 0 0 -35px;overflow:hidden;" src="/ユーザーID/novel/数字/dream">
</iframe>
</div>
※divの範囲が分かりやすいように枠線を付けてます。
※名前変換画面では中央表示、入力欄横並びで考えてました。
上記だと画面の上端から100px、左端から35pxの位置を起点？に表示していることになるみたいですが、正直なところ難しくて私もよく分かりませんでした…。

ちなみにiframeにされたのはページ遷移せずに名前変換するのが目的でしょうか？
もし合ってましたら、全く別の方法になりますが、
・名前変換フォームのソースをそのままトップに貼る
・フォームの送信結果をiframe内に表示
・iframeはstyle="display:none;"で非表示にしてしまう
という方法でも出来なくはないです。ただし、スマホやパソコンなら問題ないと思いますが、携帯向けにはやはり名前変換画面へのリンクで対応されるのがいいと思います。

上記の方法はiframeとform、target 、name辺りのキーワードでくぐれば出てくると思いますので、宜しければご検討ください。

pc
[編集]

by 菅井

2017-05-16 15:06
と様、ありがとうございます。

そうですね、#を付けて無理やり表示する方法は諦めることにします。
marginやpaddingでの方法を教えて頂きありがとうございます！
ですが試してみたところ、上端・左端からの調節がいまいち上手くいかず導入は断念しました。せっかく教えて頂いたのにすみません。

iframeにしたのはご察しの通り、ページ遷移せずに変換してもらいたかったからです。
そこで、と様に教えて頂いた方法を全て試してみました。
1番私に合っているのはiframeを非表示にする方法だったので、今回はそれを導入することにしました。
具体的には以下のように改変しました。

■トップページのHEAD内への追加■
<script type="text/javascript">

</script>

■ページ内容■
!!! 名前変換は<a onclick="Toggle('A')">こちら</a>から。<div id="A" style="display:none;">フォームが上手く反映されない方は<a href="/私のID/novel/10/dream">こちら</a>のページで変換できます。<pc_only><iframe src="/私のID/novel/10/dream" height="auto" width="100%" frameborder="0" scrolling="no">このページでは、インラインフレームを使用しています。対応しているブラウザで表示願います。</iframe></pc_only><smartphone><iframe src="/私のID/novel/10/dream" height="200" width="100%" frameborder="0" scrolling="no">このページでは、インラインフレームを使用しています。対応しているブラウザで表示願います。</iframe></smartphone></div>

このようにすることで、iframe内ページを#で指定せずに表示した不恰好な状態を、クリックで表示・非表示にすることができました。
私としては不恰好な状態が常に表示されているわけでなければそれでいいかな、という感じです。
また、と様のご助言通り携帯向けには名前変換画面へのリンクで対応しようと思っています。
解決ではないものの代替案として綺麗にまとまったように思うので、しばらくはこれでいこうと思います。

と様、今回は色々な代替案やご指摘をくださり、本当にありがとうございました！

pc
[編集]

[＃次]

[