articleをaタグで囲む

ワードプレスのメモ

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>

表示してみると、構文が滅茶苦茶になります。

原因は、ブラウザのお節介によるもの。

「article」の中にaが入っていなければ問題ないのですが、タグリスト、日付、著者、などいろいろ入ってくることも多い。

回避策候補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タグの中にaタグを書きたい時のtips

構文的にはおすすめしない、とのことですが。

※中の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だったのはサムネールを横にした表示スタイルだけでした。

グリッドや、テキストオンリーは微調整が必要。