ブログカード全体をクリック可能にするCSS

2018年9月18日

この記事は約 5 分で読めます。

ブログカードのクリック可能なエリアは
カード全体にしたいと思う事もありますね。

はじめに

ブログカードは、
WordPressの場合
テーマに標準装備も多いようです。

このLuxeritasテーマも
標準でついています。

今日ご紹介するのは、
WordPressテーマにブログカードが
ついてないとか、標準と使い分けたいとか、
WordPressではなく他のWebサービスを
利用していてブログカードを使いたい。

そんな方に利用していただきたいと思い
ご紹介しています。

CSSだけで

JavaScriptは使いません。

CSSだけで、
クリック可能な範囲を広げるスタイルシートの
テクニックを紹介します。

ブログカードは
下記の The other way round さんの
公開しているブログカードを、

CSSは、わたしのリスペクトしている
colissさんの紹介しているものです。

先ずは
下記のカードリンクから
ブログカード使えるようにして下さい。

ブログカードの形成CSSも公開していますので、
そちらのCSSを使います。

↓ 下記のブログカード、
クリックできるのはリンクの文字と画像だけです。

ブログカードのブックマークレットを作成しました – カスタマイズ

ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 私のブログの特定ページでEmbedlyがどうしてもOGP画像を出して…

↓ こちらのカードは
カード全体がクリック可能になっていますね。

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えても…

カードのHTML

a要素にclass=”stretched-link”を追記する。
(a要素が3ヶ所ありますが、どこかひとつでOK
下記の場合、最後のa要素。)

<div class="blogcard">
<div class="blogcard-content">
<div class="blogcard-image">
<div class="blogcard-image-wrapper">
<a href="" target="_blank"><img src="" alt=""></a></div></div>
<div class="blogcard-text"><p class="blogcard-title"><a href="" target="_blank"></a></p>
<p class="blogcard-description"></p></div></div>
<div class="blogcard-footer">
<a href="" target="_blank" class="stretched-link"><!-- .stretched-linkをa要素に加える -->
<img src="" alt=""></a></div></div>
ポイントになるのはa要素に与えられた
.stretched-linkです。
このスタイルシートがクリック可能な範囲を広げます。

カードのCSS

カード全体像である.blogcardに
positionプロパティを追加します。

.blogcard {
position:relative; /* positionプロパティを追加 */
margin-bottom: 30px;
max-width: 100%;
background-color: white;
border: 1px solid rgb(211,211,211);
border-radius: 2px;
box-shadow: 0 10px 6px -6px rgba(0,0,0,.1);
color: rgb(51,51,51);
padding: 10px;
}

.blogcardにposition:relative;を
追記する

クリック可能な範囲を広げるCSS

.stretched-link::after{
position:absolute;
top:0;right:0;bottom:0;left:0;
z-index:1;
pointer-events:auto;
content:"";
background-color:rgba(0,0,0,0)
}
stretched-linkをa要素に加えると、
::after擬似要素の包含ブロックがクリック可能になります。
これは「position: relative;」を持つ要素に適用され、
.stretched-linkを加えた要素と
それを含む親要素がクリック可能になります。
これで、カード全体がクリック可能になります。

 

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

ブログカード全体をクリック可能にするCSS