このサイトは、Cocoonの目次をカスタマイズしています。
ネタ元は以下のサイトです。
【Cocoon】目次のデザインをカスタマイズしてアニメーションも追加してみた
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はCocoonに標準で備わっている「目次」のデザインをカスタマイズしていきたいと思います。開閉させる時にうぃーんとアニメーションさせてみました。完成するとこのようになりま
このカスタマイズでずっと問題なかったのですが、最近iOSでサイトを確認するとリストのマーカー部分(数値)が左に飛び出す現象が発生するようになりました。
PCで検証ツールなどで確認しても問題は再現しないので、iOS特有の問題のようです。
問題箇所
問題箇所は、以下の記述の部分で、アンダーラインをマーカー部分まで左に伸ばすためのCSSがうまく動かなくなったようです。
.toc ul li a, .toc ol li a {
display: block;
border-bottom: 1px dashed #666; /*h3以下の下側ボーダー*/
margin-left: -20px;
padding-left: 20px;
}
修正案
この部分を削除すると、マーカーが左に飛び出す問題は解消しました。
ただ、これを消すとアンダーラインがマーカーの下まで伸びなくなります。
.toc ul li a, .toc ol li a {
display: block;
border-bottom: 1px dashed #666; /*h3以下の下側ボーダー*/
/*margin-left: -20px;
padding-left: 20px;*/
}
li要素はマーカーをboxに入れるか入れないかを、list-style-positionでinsideとoutside(初期値)で指定できます。
insideに指定すれば、アンダーラインはli要素全体に引かれるようになります。一方、子要素を持つli要素の場合、子要素を含めたli要素のbottomにアンダーラインが引かれるので、うまくいきません。
直接の原因
今回の問題が起きる直接の要因は、margin-left:-20pxの部分で、li要素の子要素であるアンダーラインを手前にはみ出させることで、伸ばした時に、なぜかマーカーも一緒に手前に移動してしまうからです。
このCSSでは、マーカーの位置は変わらないはずです。
こねくり回せばどうにかなりそうな気がしますが、前まで動いていたわけなので、明らかにiOSのバグだと思うので、やる気が出ません。
全く別の方法でアンダーラインを引いた方が良さそうに思います。