今回は、メールアイコンの置き方とそれをタップした際にメーラーアプリが開くようになる設定についてを紹介します。
まず今回紹介する方法はaタグリンクの設定の仕方は理解している前提の記事です。分からない方は下記の記事で予習してから閲覧することをお勧めします。
メールリンクの記述
HTMLでは、メールリンクを設定した際、ユーザーがリンクをクリックした時にそのメールアドレスを宛先としたメーラーを展開する事が可能です。
a href=のリンク先に「mailto:」を付けてあげるだけで完了です。
HTMLの記述
<a href="mailto:exsample@co.jp">exsample@co.jp</a>上記の記述をする事で、メールアドレスリンクをタップした際に自動でメーラーアプリが開きます。
実際の見た目は下記。
メールアイコンをリンクに
先述で紹介したメールリンクの設定をアイコン内にすれば、メールアイコンをタップする事でメーラーアプリが自動展開します。
メールアイコンを用意
今回はFont Awesomeを使用した方法を紹介します。
まずは以下のリンクをサイトの<head>〜</head>の間に貼り付けます。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">次にメールアイコンを表示させたい箇所に以下のコード記述します。
<i class="far fa-envelope fa-6x"></i>実際の見た目は下記。
アイコンの大きさを変えたい場合は「fa-6x」の部分を消すか、以下の内容に書き換えます。
- fa-lg (1.333…倍)
- fa-2x (2倍)
- fa-3x (3倍)
- fa-4x (4倍)
- fa-5x (5倍)
- fa-6x (6倍)
- ….
色の設定
色の設定は、「i class=”ここ“」の部分に新しくアイコン用のクラスを付けてCSSでcolorを指定します。もしくはHTMLに直接style=”ここ“で記述することも可能です。
<i class="far fa-envelope fa-5x mailicon"></i><style>
.mailicon{
color:red;
}
</style><i class="far fa-envelope fa-8x mailicon1"></I>
<style>
.mailicon1{
color:red;
}
</style><i class="far fa-envelope fa-10x" style="color:#00bfff;"></i><i class="far fa-envelope fa-10x" style="color:rgba(255, 165, 0, .3);"></i><i class="far fa-envelope fa-8x mailicon2"></i>
<style>
.mailicon2{
color:rgba(86, 245, 107, .7);
}
</style>アイコンにリンクを設定
最後に、上記で設定したアイコンに対して、はじめに紹介した「mailto:」を使ってリンクを付けてあげます。
<a href="mailto:exsample@co.jp">
<i class="far fa-envelope fa-8x mailicon3">
</i>
</a>
<style>
.mailicon3{
color:blue;
}
</style>すると上記のようにメールアイコンが表示されそこにメールアドレスのリンク入った状態になります。
以上が「メールアイコンを押すとメーラーアプリが立ち上がるようにする方法」でした。
WEB制作案件では必ずと言っても良い程、今回紹介したようなメールアイコンを置くと思います。
ほぼ必須な技術なので覚えておきましょう。
Font Awesomeについては下記で詳しく説明しています。
