VK Blocks Pro の カードブロック は画像付きのナビゲーションを手軽に作ることができるので、ときどき使っています。

高機能な グリッドカラムブロック や グリッドカラムカードブロック に比べて、できることが限られているので、エディター画面の操作がシンプルで迷うことなく扱えるのが特徴です。(これ、けっこう大事)

ブロックの名前もシンプルですね。

そのカードブロックで、こうなってくれるとありがたい、というちょっと便利なカスタマイズを紹介します。

カードブロック (デフォルト)

フェイシャルエステ

年齢に関係なくお肌の調子を整えたい方におすすめです。

ヘッドスパ

血行がよくなり、頭皮が清潔になるので、髪の毛にいい影響を与えます。

ヘアカラー

プロの美容師があなたに似合う髪色をアドバイスいたします。

耳エステ

究極のスッキリ感と、眠ってしまうほどのリラックスを味わえます。

デフォルトのままのカードブロックだ、カードに対するリンクが設定されるエリアは画像部分だけです。

カード全体のどこでもリンクできると使いやすいですよね。

ということで、リンクエリアをカード全体に拡張するカスタマイズを行ってみましょう。

カスタマイズしたカードブロック

フェイシャルエステ

年齢に関係なくお肌の調子を整えたい方におすすめです。

ヘッドスパ

血行がよくなり、頭皮が清潔になるので、髪の毛にいい影響を与えます。

ヘアカラー

プロの美容師があなたに似合う髪色をアドバイスいたします。

耳エステ

究極のスッキリ感と、眠ってしまうほどのリラックスを味わえます。

カスタマイズ内容

以下の CSS を追加しました。たったこれだけです 😊

.vk_post_imgOuter {
    position: static;
}

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

解説...というか自分用の備忘録です (^^♪

リンクエリアである .vk_post_imgOuter>a::after が position: absolute; になっていて、親要素を遡っていくとデフォルトの状態だと .vk_post_imgOuter が最初の position: relative; となっている親要素なので、この親要素が配置の基準となっています。

この親要素を position: static; と指定することによって、さらにそのひとつ上の .card が配置の基準となります。

もうちょっとカスタマイズしてみた

マウスホバーのスタイルも設定してみました。

フェイシャルエステ

年齢に関係なくお肌の調子を整えたい方におすすめです。

ヘッドスパ

血行がよくなり、頭皮が清潔になるので、髪の毛にいい影響を与えます。

ヘアカラー

プロの美容師があなたに似合う髪色をアドバイスいたします。

耳エステ

究極のスッキリ感と、眠ってしまうほどのリラックスを味わえます。

VK Blocks Pro は便利なブロックがたくさん含まれているおすすめのプラグインです。

VK Blocks Pro の入手方法

VK Blocks Pro は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年から選べます。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

デザイナー様・制作業者様のお手伝いも数多く行っております。難しい部分のコーディングをやってほしい、いま人手が足りない、等々... お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り（無料）を提示させていただきます。

ご相談・お問い合わせはお気軽にどうぞ