aタグをaタグで囲めない
使いどころとしては、アーカイブに並んでいる各投稿全体にリンクを付けたい、ということ。
aの中のブロック要素、aのなかのaという構文が問題。
<a href="permalink">
<article>
<h1 class="entry-title"><a href="permalink">投稿のタイトル</a></h1>
<p class="tag-list"><span><a href="/tag1/">けんさく君</a></span></p>
</article>
</a>表示してみると、構文が滅茶苦茶になります。
原因は、多分ブラウザのお節介。
ビジュアルエディタの自動成形も関わってくるかもしれませんが、.htmlに直書きしても同じ。
<p><a href="#"><a href="#">aの中のa</a></a></p>
<p><a href="#"><div class="wrapper"><a href="#">aの中のdivの中のa</a></div></a></p>この構文を表示させると、見事に入れ子が回避されて表示されます。
<p><a href="#"></a><a href="#">aの中のa</a></p>
<p><a href="#"></a></p>
<div class="wrapper"><a href="#">aの中のdivの中のa</a></div>
「article」の中にa、div、p等が入っていなければ問題ないのですが、そんなことはまずない。
タグリスト、日付、著者、などいろいろ入ってくる。全部spanにするのもアリといえばアリですが、、、
回避策候補1：中のaをobjectで囲む
<a href="permalink">
<article>
<h1 class="entry-title"><object><a href="permalink">投稿のタイトル</a></object></h1>
<p class="tag-list"><span><object><a href="/tag1/">けんさく君</a></object></span></p>
</article>
</a>ナイス。
下記解説が分かりやすいです。
構文的にはおすすめしない、とのことですが。
※中のaタグは、z-indexを調整しないとクリック出来ないです。
回避策候補2：jsで飛ばす
同記事中のもう一つの方法。
「aタグ内にあるaタグを全てspanタグ等のタグで書き換え、jsで飛ば」す、というやり方。
「aがspanになってるけど！？」と言われるのは避けたい、、、
でもすっきりしていていいな。
回避策候補3：中のaを無理矢理拡げる
「entry-title a」を「article」と同じサイズにしちゃいます。
<article>
<h1 class="entry-title"><a href="permalink">投稿のタイトル</a></h1>
<p class="tag-list"><span><a href="/tag1/">けんさく君</a></span></p>
</article>
article {
position: relative;
}
.entry-title a:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}良さげですが、中のaは無効になります。
「tag-list a」もposition: absoluteにしてやれば有効になります。
構文的には問題ないと思いますが、アーカイブの表示スタイルに合わせてCSS調整が必要です。
※無理矢理拡げた要素の親要素をdisplay: flexにすると、z-index: 1だけでposition: absoluteは不要の様子。
例だと、taglistもその子要素。flexにしたことで影響があれば、そこだけ調整。
flexやz-indexの仕様をきちんと把握していないとこのへんは場当たりになっちゃいますな。
ちなみにホバーアクションですが、beforeにhoverは効かないので、文字色を変えてやるくらいしか。（jsでどうにかなるみたいですが、結構難しいです。）
article:hoverに何か書けばもうちょっと派手な感じになりますが、うっかりopacity: 0.8とか書くと、字も薄くなっちゃいます。
回避策候補4：js biggerlink
スクリプトで処理します。
div要素もリンクにするjavascript「jquery.biggerlink」
上記記事中では対象をidで指定していますが、classでもOK。
<script type="text/javascript">
$(function(){
$('.article-container article').biggerlink();
});
</script>これも中のaタグが無効になります。
こっちはpositionでもz-indexでもNG。クリック動作をすべて置き換えるようで原理的にどうしようもない。
これはちょっと痛い。
もう一つ、中の要素の最初のaタグを見つけて処理しますので、パーマリンクを先頭にしないと、あらぬところにリンクしちゃいます。
タグリストなどは、リンクしていなくても表示さえされていればいい、というケース限定で。
ソース、CSS、ほぼ無処理でOKなのでお手軽さは1番。
決定打が出ませんでしたが、3を基本にしながら、ケースによって使い分けることになりそうです。
早速このサイトにも3を適用しましたが、無調整で大体OKだったのはサムネールを横にした表示スタイルだけでした。
グリッドや、テキストオンリーは微調整が必要。
