ボックス全体にリンクを広げる(大型のボタンを作成)

「リンクの範囲を広げたい」「リンクの文字色を好きな色に変えたい」という方へ。この記事はボックスの中にある文字にリンクを貼るとボックス全体がボタンになる例の作り方をお伝えします。

こちらのサイト様を参考にさせていただきました。
webcode-lab」様、「coliss」様

通常のリンク

こんにちは。

サイト型のトップページを作る際に、各カテゴリーへ「飛ぶ」装置を設置するのが普通です。

その時にクリックするリンクを「ボックスの文字だけでなくボックス全体にしたい」と思い調べてみました。

今回、このボックス全体にリンクを設定するのが目標です。

WP/HTML/CSS

主にWordPressを使ったサイト作成やカスタマイズについてです。

このボックスのHTMLとCSSも記します

[su_spoiler title=”HTMLを表示”  icon=”chevron-circle” style=”fancy” class=”std no-trn GMN”]

<div class=”ctg-box2″>
<div class=”ctg-box2-title”>WP/HTML/CSS</div>
主にWordPressを使ったサイト作成やカスタマイズについてです。
</div>[/su_spoiler]

[su_spoiler title=”CSSを表示”  icon=”chevron-circle” style=”fancy” class=”std no-trn GMN”]

.ctg-box2{/* 本体 */
position:relative;
overflow: hidden;
flex-grow: 1;
background: linear-gradient(90deg,#002c8e -20%,#0095d9,#00d9b1 130%);
margin:2.5px 5px;
border-radius:5px;
padding: 20px 0px;
/*box-shadow: -2px -2px 3px 2px #fff7 inset, 2px 2px 4px 2px #cfda inset, 1px 1px 5px 2px #0008;*/
}
.ctg-box2-title{/* タイトル */
position:relative;
padding:0px 0px 10px;
color: #fffc;
font-size:1.3em;
font-weight: bold;
text-align: center;
/*border-bottom: solid 10px #413049;*/
letter-spacing: 0.13em;
line-height: 1.5em;
}
.ctg-box2-title:after{/* 下線 */
opacity:0.8;
position: absolute;
bottom:0px;
left: 0px;
content: “”;
height:8px;
width: 100%;
background: linear-gradient(90deg,#6a4d77,#413049,#6a4d77);
box-shadow: 0px -1px 0px 0px #bf83c3, 0px 1px 0px 0px #6c94c5;
}

.article .ctg-box2 p{/* 本文 */
margin: 0px;
font-size: 0.9em;
color: #fffb;
padding: 5px 18px;
line-height: 1.5em;
}[/su_spoiler]

まず、最初に普通のやり方、タイトル部分にリンクを貼ったものです。

主にWordPressを使ったサイト作成やカスタマイズについてです。

リンクの範囲が狭くてストレスが溜まるし文字のリンク色が背景に溶け込んだりしてますね…

[su_spoiler title=”HTMLを表示”  icon=”chevron-circle” style=”fancy” class=”std no-trn GMN”]

<div class=”ctg-box2″>
<div class=”ctg-box2-title”><a href=”https://so-cha-siki.com/category/site-building/wordpress-n-html-n-css”>WP/HTML/CSS</a></div>
主にWordPressを使ったサイト作成やカスタマイズについてです。</div>

[/su_spoiler]

これをなんとかします。

拡張したリンク

いきなりですが完成品がこちら

ボックス全体にリンクが拡張されています。作り方を書いていきます。

タイトルにリンクを貼らない!

まずリンクを貼る箇所について

ボックス全体にリンクを広げるには、ボックスの子要素にリンクをはらないといけません。

ところがタイトル文字はボックス(ctg-box)の中にあるボックスタイトル(ctg-box-title)のさらに中にあるのでボックスの「孫」要素になってしまいます。

[su_spoiler title=”HTMLを表示(ピンクが親,青が子,緑が孫)”  icon=”chevron-circle” style=”fancy” class=”std no-trn GMN”]

<div class=”ctg-box2″>
<div class=”ctg-box2-title”>WP/HTML/CSS</div>
主にWordPressを使ったサイト作成やカスタマイズについてです。
</div>[/su_spoiler]

したがってタイトル文字ではなくボックス本文にリンクを貼ります。

そしてボックス本文にリンクを貼ると、こうなります

まだリンクの範囲が狭く色もイマイチです。

[su_spoiler title=”HTMLを表示”  icon=”chevron-circle” style=”fancy” class=”std no-trn GMN”]

<div class=”ctg-box2″>
<div class=”ctg-box2-title”>WP/HTML/CSS</div>
<a href=”https://so-cha-siki.com/category/site-building/wordpress-n-html-n-css”>主にWordPressを使ったサイト作成やカスタマイズについてです。</a>
</div>

[/su_spoiler]

リンクの色を変える

まず、リンクの色を自分好みに変えるためにリンク用のクラスを(ここでは「str-link」というクラス)を作ります。

そのクラスの擬似クラス「str-link:link」と「str-link:visited」ににcolorとtext-decorationを設定します

[su_spoiler title=”CSSを表示”  icon=”chevron-circle” style=”fancy” class=”std no-trn GMN”]

/* リンク色を独自に指定 */
a.str-link:link,a.str-link:visited{
color:#fffb;
text-decoration:none;
}[/su_spoiler]

「:link」が未訪問のリンク色、「:visited」が訪問済みのリンク色になります。

リンクの範囲を広げる

さらにリンクの範囲を広げるために、先程のクラス「str-link」にボックスいっぱいに広がったafter要素「str-link:after」を設定します。

準備としてリンクを設定する要素(本文)の親要素(ここでは「ctg-box2」)のCSSに「position:relative;」を加えておきます。

次に「str-link:after」を以下のように記述します。

[su_spoiler title=”CSSを表示”  icon=”chevron-circle” style=”fancy” class=”std no-trn GMN”]

/* 範囲をボックス全体に拡張 */
.str-link:after{
position:absolute;
content:””;
top:0;
left:0;
width: 100%;
height:100%;
background-color:rgba(0,255,0,0);
z-index:1;
}

[/su_spoiler]

リンクを設定する要素(本文)の親要素「ctg-box2」を基準に左上から幅と高さ100%の空のボックスを設定しています。

こうなりました。

リンクの文字が白になりクリック範囲がボックス全体に広がりました。

[su_spoiler title=”HTMLを表示”  icon=”chevron-circle” style=”fancy” class=”std no-trn GMN”]

<div class=”ctg-box2″>
<div class=”ctg-box2-title”>WP/HTML/CSS</div>
<a class=”str-link” href=”https://so-cha-siki.com/category/site-building/wordpress-n-html-n-css”>主にWordPressを使ったサイト作成やカスタマイズについてです。</a>
</div>

[/su_spoiler]

ボタンの並べ方

については「」を見て下さい。

 

タイトルとURLをコピーしました