[ 解決済 ] 子ページリストブロックの右ブロック全体にリンク範囲を広げたい

[avusblue]

■ WordPress のバージョン
6.01

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.23.1

■ Pro Unit のバージョン
0.22.2

■ スキンの種類
Evergreen

■ スキンのバージョン
0.1.5

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
子ページリストの右側のテキスト要素全体にリンク範囲を広げたいです。

現在ページタイトルからのみリンクが貼られている状態ですが、抜粋を含めた右側のブロック全体にリンク範囲を広げたいです。

■ 自分で試した事
下記のサイトを参考にカスタムCSSへ記述して見ましたが、思うような動作ができませんでした。

aタグの範囲を広げる方法「3つ」あればなんとかなる

3．疑似要素を利用

a {
position:relative;
}

a::before {
content: “”;
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}

をカスタムCSSへ記述

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
ページタイトルからのみリンク

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[うなこ]

こんな感じはどうでしょうか、、？
（もうすこし良い方法があれば、他のユーザー様、回答よろしくおねがいしますmm）

/* 子ページリスト カード（水平）のリンクを広げる */
.vk_posts-layout-card-horizontal .vk_post_body{
position:relative;
}

.vk_posts-layout-card-horizontal .vk_post .vk_post_title a::before {
content: "";
position: absolute;
top: -1.25rem;
left: -1.25rem;
right: -1.25rem;
bottom: -1.25rem;
height: 120px;
z-index: 1000;
}

• この返信は1年、 8ヶ月前にうなこが編集しました。

[対馬 俊彦]

こんなのいかがでしょうか。

.vk_post_imgOuter, .card-img-outer {
    position: static;
}

.vk_post_imgOuter>a::after {
    z-index: 1;
}

追加した CSS を削除して最初の子ページリストの状態に戻してから、↑ この CSS だけ当ててみてください。リンク範囲がカード全体に拡張されると思います。

【補足】
.vk_post .vk_post_title a ではなく、アイキャッチ画像の .vk_post_imgOuter>a::after を拡張しています。

【追記】
ExUnit の 子ページ一覧 にすれば、ノーコードでカード全体がリンク範囲になりますが、それじゃダメなんですよね 😅

• この返信は1年、 8ヶ月前に対馬 俊彦が編集しました。

[avusblue]

対馬様、うなこ様

ありがとうございます！
思い通りの動作になりました！

[投稿者]

投稿