メインビジュアルに画像を重ねてリンクを張る方法

メインビジュアルに画像を重ねてリンクを張ってほしいとご依頼がありました。

今回はメインビジュアルに対し２つの画像（マーク）を配置して、①PDFリンク（ダウンロードしない場合はdownloadを削除）②サイト内ページリンクを貼りました。幾つでも重ねることができますので下記をそのまま使用してください。

HTML

<div class=”main_visual box“>

<img src=”/img/main_visual.jpg” alt=“メインビジュアル”>

①PDFをダウンロード

<a href=”/*/PDFURL/*/” download>

<img class=”top-right” src=”img//*画像*/” alt=”PDF”>

</a>

②サイト内リンク

<a href=”/*/ページURL/*/”>

<img class=”bottom-right” src=”img//*画像*/” alt=”画像”>

</a>

</div>

CSS

/* メインビジュアル*/

.box{

position: relative;

}

/* メインビジュアルに重ねる要素*/

/*余白（px)は調整してください*/

/*左上*/

.top-left {

position: absolute;

top: 25px;

left: 25px;

width;100px /*ちょうどいい画像のサイズ指定*/

}

/*右上*/

.top-right {

position: absolute;

top: 25px;

right: 25px;

}

/*左下*/

.bottom-left {

position: absolute;

bottom: 25px; left: 25px; }

/*右下*/

.bottom-right {

position: absolute;

bottom: 25px; right: 25px;

}

/*天地左右中央*/

.center {

position: absolute; top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}