www.wanichan.com

Web > Resources > CSS & JavaScript Tips > その他Tips > 友達に紹介するボタンを作るには?

友達に紹介するボタンを作るには?

リンク先の mailto:の後にオプションを付けることで、そのリンクをクリックしたときの件名と本文を指定できます。

はじめに

これはアンカータグのmailto:属性にちょこっとオプションをつけるだけで結構です。友達のメールアドレスは指定せず、その他のオプションを設定することになります。通常、mailto:メールアドレス ですよね?

しかし、メールアドレスはユーザ自身で指定することになるので指定は不要となりますが、そこにオプションをつけるには続いて?を付け、空白を入れずに一気に指定します。複数のオプションをつけるには&でつなげます。

  • subject=(メールの件名)
  • body=(メール本文)

リンク文字をクリックすると友人に紹介するメールを送れるようにするには?

メールの件名、メール本文、リンク文字列が

メールの件名おすすめホームページ「ワニchanのうぇぶわーるど」
メール本文おすすめホームページです。こちらをご覧下さい:
http://www.wanichan.com/web/
リンク文字列このホームページを知人に紹介する

とした場合・・・以下の通りとなります。

<a href="mailto:?subject=おすすめホームページ「ワニchanのうぇぶわーるど」&body=おすすめホームページです。こちらをご覧下さい: http://www.wanichan.com/web/">このホームページを知人に紹介する</a>

すると、上記例ではこのようになります。

このホームページを知人に紹介する

▲Page TOP

リンク文字ではなく、画像ボタンにしたい場合は?

リンク文字列ではなく、画像ボタンにしたい場合は、
リンク文字列の代わりに画像ボタンへのリンクの設定をします。

メールの件名おすすめホームページ「ワニchanのうぇぶわーるど」
メール本文おすすめホームページです。こちらをご覧下さい:
http://www.wanichan.com/web/
画像ファイルの場所mail.gif
画像ファイルのサイズ横 51ピクセル 縦 18ピクセル

とした場合、このようになります。

<a href="mailto:?subject=おすすめホームページ「ワニchanのうぇぶわーるど」&body=おすすめホームページです。こちらをご覧下さい: http://www.wanichan.com/web/"><img src="mail.gif" border="0" alt="このホームページを知人に紹介する" width="51" height="18"></a>

すると、上記例ではこのようになります。

  • このエントリーをはてなブックマークに追加

コメント

▲このページのトップへ