Canvaの画像内ボタンにリンクを付けたい！
PNG（画像）でリンクが消える問題を「透明クリックエリア」で完全解決！
ランディングページのファーストビューはとても重要です。
私は当初、ファーストビュー画像の直下に、
Udemy講座への誘導ボタン（今すぐ講座の内容を確認する▶）
を設置する予定でした。
しかし後から、
「Canvaで画像内のボタンに直接リンクが貼れる」
という記事を読み、さっそく CanvaでPC 用・スマホ用の画像を作成しました。
下の画像はPC用のボタンにリンク用URLを設定したところです。
- ※CanvaでURLリンクの設定方法は、リンクを設定したい画像ボタンを右クリックするとポップアップメニューが表示されます。リンクを選択し、リンク先 のURLを入力し、完了します。
ところが――
PNGとしてダウンロードして <img> タグに入れても、リンクが効きません。
ダウンロードし、HTMLの<img> に入れ込みましたが、リンクが効いていないのです。
ネット検索をしたところ、
- PNG / JPG / 動画 → リンクは消える
- PDF → リンクが生きる
- しかし PDF は <img> では表示できない
という事実が判明しました。
Canvaでリンクが生きるのは PDF のときだけ
- Canva 画像：リンクを貼っても PNG に書き出すと無効
- PDF：リンクは有効だが、LPでは画像として使えない
という状況でした。
ランディングページのファーストビューに
「どうしてもリンク付きボタンを置きたい……」
そんなときに出会ったのが、
「透明のクリック領域を画像に重ねる」という方法です。
解決策
Canva画像のボタンの上に、透明な <a> タグを重ねる
このアイデアはAIに教えてもらいましたが、方法を聞いた瞬間、
「えっ!? そうか！なるほど！」
と本当に感動しました。
この方法のメリットは次のとおりです。
- Canva のデザイン（ボタンの見た目）はそのまま使える
- リンクとして機能するのは HTML 側の <a>
- PC用／スマホ用の画像に合わせて位置調整できる
実装の手順（PC版・スマホ版）
ここでは実際に私がランディングページに実装したコードを紹介します。
🖥️ PC版：📱 スマホ版：HTML（画像＋透明クリックエリア）
<section id="hero" class="hero section light-background">
<!-- PC用 -->
<div class="d-none d-md-block fv-hero position-relative">
<img src="../assets/img/udemy/〇〇〇.png" class="img-fluid" alt="awk実務講座">
<!-- 透明なクリックエリア -->
<a href="https://www.udemy.com/course/awk-essential/〇〇〇" target="_blank"
class="udemy-btn-pc" aria-label="Udemy awk実務講座の内容を確認する">
今すぐ講座の内容を確認する
</a>
</div>
<!-- スマホ用 -->
<div class="d-block d-md-none fv-hero position-relative">
<img src="../assets/img/udemy/〇〇〇.png" class="img-fluid" alt="awk実務講座">
<!-- 透明なクリックエリア -->
<a href="https://www.udemy.com/course/awk-essential/〇〇〇" target="_blank"
class="udemy-btn-sm" aria-label="Udemy awk実務講座の内容を確認する">
今すぐ講座の内容を確認する
</a>
</div>
</section>
ポイントは：
- .fv-hero position-relative を 画像の親div につける
- <a> の中身のテキストはあとでCSSで見えなくする（アクセシビリティ的には残す）
下の CSS は、透明領域を配置するための必須コードです。
親要素を基準にする（重要！）
🎨 PC版：CSS（透明クリックエリア）
.fv-hero {
position: relative;
}
/* PC用：透明なクリックエリア */
/* 位置は画像を見ながら微調整し、Canvaのリンクボタンの上に乗せます
.udemy-btn-pc {
position: absolute;
display: block;
top: 87%; /* ボタンの縦位置（%なので画像に対する割合） */
left: 80.2%; /* 横位置 */
width: 28%; /* ボタンの横幅 */
height: 14%; /* ボタンの高さ */
transform: translate(-50%, -50%); /* ←中央に配置する */
/* 見た目は完全に透明にする */
background: transparent;
border: none;
color: transparent;
/* テキストを画面外に追い出して見えなくする（スクリーンリーダー用に中身は残す） */
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
/* 位置・サイズはスマホ画像に合わせて調整します */
top: 94.8%; /* ← ボタンの縦位置（%なので画像に対する割合） */
left: 50%; /* ← 中央寄せ */
width: 100%; /* ← ボタン横幅 */
height: 11%; /* ← ボタン高さ */
transform: translate(-50%, -50%); /* ←中央に配置する */
/* 見た目は完全に透明にする */
background: transparent;
border: none;
color: transparent;
/* テキストを画面外に追い出して見えなくする（スクリーンリーダー用に中身は残す） */
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
}
結果
- 表示されるのは Canva のボタン画像のみ
- 同じ位置に透明ボタンがかぶさり、クリックできる
- PC でもスマホでもズレない
- ファーストビューが美しく仕上がる
位置調整のコツ
位置調整は、ブラウザの「検証ツール（F12）」が便利です。
- .udemy-btn-pc または .udemy-btn-sm を選択
- top, left, width, height の数値を微調整
- Canvaのボタンと透明領域がぴったり重なるまで合わせる
なぜこれでズレにくいのか？
- 親要素 .fv-hero を基準にして
- top / left / width / height を ％指定にしたため
これにより、
- 画面サイズが変わっても
- 画像の縦横比が変わっても
透明クリックエリアは常に画像の同じ場所に重なります。
まとめ
- Canvaのリンク付きボタンは画像では無効
- PDFでは使えるが、LPの画像として使えない
- しかし HTML＋CSSで透明クリック領域を重ねれば解決する
- Canvaのデザインはそのまま
- PC版・スマホ版にも対応可能
- LP制作の自由度が大幅にアップする
透明クリックエリアは常に画像の同じ場所に重なります。