mailtoリンクをクリックした時の挙動をわかりやすくするスクリプト「MailtoUI」

mailtoリンクをクリックした時の挙動をわかりやすくするスクリプト「MailtoUI」

mailtoリンクをクリックした時の挙動をわかりやすくするスクリプト「MailtoUI」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    格安で広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

MailtoUIは、mailtoリンクをクリックした時の挙動をわかりやすくするためのスクリプトです。

MailtoUIを導入することで、mailtoリンクをクリックした時にすぐメーラーが開かず、メールアプリを起動するか、メールアドレスをコピーするか選択できるようになります。

挙動は以下ページにてご確認いただけます。

デモページを見る

スポンサードリンク

MailtoUIの使い方

まずはHTML内に以下を追加して、スクリプトを読み込みます。</body>の直前でOKです。

<script src="https://cdn.jsdelivr.net/npm/mailtoui@1.0.2/dist/mailtoui-min.js"></script>

上述したデモページの下の方にダウンロードリンクもあるので、スクリプトファイルをダウンロードして使用することも可能です。

スクリプトのダウンロード

mailtoリンクには、mailtouiというクラスを付与してあげます。

<a class="mailtoui" href="mailto:example@example.com">メールアドレス</a>

mailtoリンクをクリックすると以下のようなポップアップが現れて、各種メールアプリの起動か、メールアドレスをコピーするかを選択できます。

mailtoリンクのクリック

あとがき

サイト内にmailtoリンクを設置する機会はかなり減りましたが、まだ設置してあるサイトはたまに見かけますね。クリックしたリンクがmailtoリンクだった場合、自動でメーラーが起動してくるので、煩わしく感じることもあるのではないでしょうか。

MailtoUIで選択形式にすることで、ユーザーのストレスを軽減できますね。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。