「リンクの範囲を広げたい」「リンクの文字色を好きな色に変えたい」という方へ。この記事はボックスの中にある文字にリンクを貼るとボックス全体がボタンになる例の作り方をお伝えします。
こちらのサイト様を参考にさせていただきました。
「webcode-lab」様、「coliss」様
通常のリンク
こんにちは。
サイト型のトップページを作る際に、各カテゴリーへ「飛ぶ」装置を設置するのが普通です。
その時にクリックするリンクを「ボックスの文字だけでなくボックス全体にしたい」と思い調べてみました。
今回、このボックス全体にリンクを設定するのが目標です。
WP/HTML/CSS
主にWordPressを使ったサイト作成やカスタマイズについてです。
このボックスのHTMLとCSSも記します
HTMLを表示
<div class=”ctg-box2″>
<div class=”ctg-box2-title”>WP/HTML/CSS</div>
主にWordPressを使ったサイト作成やカスタマイズについてです。
</div>
CSSを表示
.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;
}
まず、最初に普通のやり方、タイトル部分にリンクを貼ったものです。
主にWordPressを使ったサイト作成やカスタマイズについてです。
リンクの範囲が狭くてストレスが溜まるし文字のリンク色が背景に溶け込んだりしてますね…
HTMLを表示
<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>
これをなんとかします。
拡張したリンク
いきなりですが完成品がこちら
ボックス全体にリンクが拡張されています。作り方を書いていきます。
タイトルにリンクを貼らない！
まずリンクを貼る箇所について
ボックス全体にリンクを広げるには、ボックスの子要素にリンクをはらないといけません。
ところがタイトル文字はボックス(ctg-box)の中にあるボックスタイトル(ctg-box-title)のさらに中にあるのでボックスの「孫」要素になってしまいます。
HTMLを表示(ピンクが親,青が子,緑が孫)
<div class=”ctg-box2″>
<div class=”ctg-box2-title”>WP/HTML/CSS</div>
主にWordPressを使ったサイト作成やカスタマイズについてです。
</div>
したがってタイトル文字ではなくボックス本文にリンクを貼ります。
そしてボックス本文にリンクを貼ると、こうなります
まだリンクの範囲が狭く色もイマイチです。
HTMLを表示
<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>
リンクの色を変える
まず、リンクの色を自分好みに変えるためにリンク用のクラスを(ここでは「str-link」というクラス)を作ります。
そのクラスの擬似クラス「str-link:link」と「str-link:visited」ににcolorとtext-decorationを設定します
CSSを表示
/* リンク色を独自に指定 */
a.str-link:link,a.str-link:visited{
color:#fffb;
text-decoration:none;
}
「:link」が未訪問のリンク色、「:visited」が訪問済みのリンク色になります。
リンクの範囲を広げる
さらにリンクの範囲を広げるために、先程のクラス「str-link」にボックスいっぱいに広がったafter要素「str-link:after」を設定します。
準備としてリンクを設定する要素(本文)の親要素(ここでは「ctg-box2」)のCSSに「position:relative;」を加えておきます。
次に「str-link:after」を以下のように記述します。
CSSを表示
/* 範囲をボックス全体に拡張 */
.str-link:after{
position:absolute;
content:””;
top:0;
left:0;
width: 100%;
height:100%;
background-color:rgba(0,255,0,0);
z-index:1;
}
リンクを設定する要素(本文)の親要素「ctg-box2」を基準に左上から幅と高さ100%の空のボックスを設定しています。
こうなりました。
リンクの文字が白になりクリック範囲がボックス全体に広がりました。
HTMLを表示
<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>
ボタンの並べ方
については「」を見て下さい。
