[ 解決済 ] VK Blocksのスライダーで、画像全体にリンクを貼ることができるか

タグ: スライダー

このトピックには4件の返信、3人の参加者があり、最後にのむらけいにより9ヶ月、 2週前に更新されました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)

投稿者

投稿
2023年7月18日 5:26 PM #77583

のむらけい
参加者

■ WordPress のバージョン
6.2.2

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

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

■ テーマのバージョン
15.9.5

■ Pro Unit のバージョン
0.25.1

■ スキンの種類
Origin III

■ プラグインの種類・バージョン
VK Blocks Pro　1.60.0.0

■ 期待する動作
VK Blocksのスライダーブロックを利用して、こちらのパターンのようなものを作りかけています。

ヒーローエリア_ Lightning風スライダー

このパターンだとボタン部分のみがリンク対象になっていますが、スライダーアイテム全体にリンクを貼るような設定は標準機能内にありますでしょうか？

■ 自分で試した事
カスタマイザーのLightning トップページスライドショーならできるのは確認済みですが、見た目的に柔軟にアレンジしたかったためVK Blocksのスライダーブロックを使っています。

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

■ 実際の症状
標準機能で実現できなければJSでやりくりしようと思っています。
なのでそういう機能がそもそもあるかどうか、もしくは既存のブロックをこう使えばできるという既知のtipsがあるのかどうかがわかればありがたいです！

2023年7月19日 9:53 AM #77590
対馬俊彦
参加者
制作実績
ボタンを VK Blocks のボタンに置き換えて、以下の CSS を書けばご希望の動作をすると思います。
```
.vk_button a.vk_button_link.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
```
VK パターンライブラリからコピーしたままのボタンだと、うまくいきませんでした。
2023年7月19日 9:58 AM #77591
うなこ
モデレーター
けいさん、おせわになります！
対馬さん、アイディアありがとうございます！

もう一つの方法もかいてみます。
現状ですと、標準では背景画像にリンクをはる機能がありませんので、「EditorsKit」プラグイン（カバーブロックにリンクが貼れるようにする）を使用して、スライダーアイテム内にカバーブロックを配置してリンクを貼るやり方もあります。（プラグイン増えてしまいますが、、）
1. カバーブロックにリンクを貼るため「EditorsKit」プラグインをインストールして有効化
2. スライダーアイテム内の「レイアウト設定」→「スライダーアイテムエリア内の余白を無くす」にチェックを入れる
3. カバーブロックを全幅で配置する。カバーブロックにリンクを貼るマークが出ているのでリンクを設置する
2023年7月19日 12:33 PM #77598

のむらけい
参加者

対馬さん、うなこさん、アイデアありがとうございます！
いただいた方法を試してみて、また書き込みいたしますね。

2023年7月19日 1:37 PM #77599

のむらけい
参加者

できました！
今回はCSSだけでできる対馬さんの方法で対応しました。before要素でカバーするっていうのは気づかなかったです。助かりました！

本件は解決済みとしますね。
投稿者

投稿