本ページはプロモーションが含まれます

【コピペOK!】ボタンや画像にメールアドレスをリンクさせる方法


ポートフォリオやHPなどの制作の際、お問い合わせフォームを作成と併せてメールアドレスのリンクを作成することもあります。


今回はコピペOK!テキストや画像などにメールアドレスをリンクさせる方法をご紹介します。

コピペでOK!テキストやボタンにメールアドレスをリンク


それでは早速リンクを作成していきます。


今回はこのような簡易的なボタンを作成しました。
クオリティは度外視なんでツッコミはなしでお願いします(笑)

See the Pen メールリンク by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.



リンクを作成する方法は簡単です。


今回は<p>タグのテキストにリンクをさせるのですが、実際のリンクの仕方はこうです。

<a href="mailto:chikinmasa0307@gmail.com"><p>メールにとぶよ</p></a>


リンクを作成するため<a>タグで囲み、『href属性』にURLではなく『mailto:(アドレス)』を入力してリンクを貼ります。


実際のコピペもできるHTMLが下記です。

See the Pen メールリンク2 by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.



今後使用する場面も多いかと思いますので、活用していきましょう!

ママさん・妊婦さん必見!応募するだけで貰えるチャンス!豪華特典

ちきんまさ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


ABOUT US
ちきんまさ
本職で住宅会社のブランディング・クリエイティブデザインをしながら、兼業でWebデザイン・クリエイティブデザイン全般・ロゴ作成など取り組んでいます。 行政書士や宅地建物取引士も合格、経験済みで兼業視野。 とにかく自分がやりたいことはやらずにはいられない好奇心を叶え続けるべく、常に学び、行動することを続けています。