カスタマイズの備忘録

ページ内リンクあれこれ

2012.09.07.  ←novel-template-Aki 秋の牧場のテンプレート →サンプルコード
J・Jfタイプのテンプレートでサイトナビの配置を top:0 left:0 で、画面上に移動して表示させた場合、ページ内リンクを使うと、サイトナビは検索バーの下に隠れて見えなくなってしまう。

対処法その1 検索バーを非表示に設定する。 
対処法その2 コンテナ上部にマージンを指定して、サイトナビの表示位置を下にずらす。
.container { margin-top : 20px ; }

PageTopへのリンク

アンカーの位置によっては、特定のテンプレートやプラグザでリンクが無効になってしまう。
フルスクリーンやクロスフェード表示のために画像タグが原因らしいが、
<class="all"> ~ </div>を用いたJ・Jfタイプのテンプレートにその傾向がある。


とりあえず、アンカーの位置を変更すれば直るので、個々のテンプレートごとに、行き当たりばったりで直している現状。

ブラウザごとにテンプレートを照合し、リンクが無効になる場合のアンカーの位置を確認する必用あり。

<body>
-----------(A1)-----------

<!--フルスクリーン表示のための追加ソース-->

-----------(A2)-----------

<div class="all">

-----------(B)-----------

<div class="main">

-----------(C1)-----------

<!--(表紙)クロスフェード表示のための追加ソース-->

-----------(C2)-----------


<div class="container">

-----------(D)-----------



<a name="pagetop" id="pagetop"></a>

novel-JF-HatuAkiの場合 
A1 IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
A2 IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
B  IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
C1 IE8のみ 表紙のみ✕ IE8以外はOK
C2 IE8とIE9 表紙のみ✕ IE8.9以外はOK
D  IE8のみ 表紙のみ✕ IE8以外はOK


IE6で、ブロックmainより外側(A1(A2)(B))にアンカーを設置してもページ内リンクが無効になるのは、ダブルスクロールを防止するために、.all や body ・ html 等に指定した _over-flow:hidden が原因と思われる。

また、.main以下のブロック(C1)(C2)(D)に設置した場合、表紙ページで、IE8やIE9でページ内リンクが無効になる原因は、間違いなく、クロスフェードのソースにある。

しかし、クロスフェードソース(ブロック#gallery3 )直下のブロック(.container)にアンカーを設置した場合(D)に、.container{position:relative}と指定しているにも関わらず、なぜ、IE8でページ内リンクが無効になるのかその原因は不明。

考えられる対策その1 
IE6のページ内リンクをあきらめるか、ダブルスクロールを我慢して、mainより外側(A1(A2)にアンカーを設置する。

考えられる対策その2
main内(C1)にアンカーを設置した上で、スタイルシートで、IE8で #pagetop の配置指定を追加する。今のところ、この方法が一番有効。

#index #pagetop { position : absolute ; /position : static ; z-index:100 ; top: 0 ; left : 0;}


通常ブログ画面で記事下部へのアンカーが効かない場合
原因:半角スペースを削除したせいか、ブラウザ(IE8)によってはアンカーが無視されてしまう
対策:paddingを設定することで着地点の領域を確保し、認識させる
#page ul.entry_state + a {width:10px;padding:2px;}
関連記事

カスタマイズの備忘録

comment-delete.png  この記事にはコメントできません

redo_16b.png この記事にはトラックバックできません