ダウンロードボタンの作り方

ダウンロードボタンは、単にリンクを通してダウンロードを提供するよりも、あなたのウェブサイトをよりプロフェッショナルに見せることができます。ボタンはすっきりとしたインターフェイスを提供し、もしあなたが自分でデザインしたいと感じるなら、ボタンはあなたのページのデザインの不可欠な部分となることができます。このガイドに従ってHTMLボタンを作成するか、独自のデザインのボタンを作成してください。

方法1

HTMLボタンを作成する

1. コードエディターでボタンを作成します。メモ帳やTextEditのようなシンプルなテキストエディタで十分です。以下のコードをエディタに入力します：
2. ファイルをサーバーにアップロードします。ダウンロード可能なファイルを提供したい場合は、そのファイルを自分のサーバーでホストするか、ボタンをウェブ上のどこかにあるファイルに向ける必要があります。あなたのウェブサイトのサーバーで利用可能にしたいものを使用してください。
3. あなたが自分でホストしていないファイルにリンクしたい場合は、ウェブマスターの許可を持っていることを確認してください。
4. Download Location'をダウンロード先のURLに置き換えてください。アドレスをシングルクォートで囲み、"window.location='Download Location'"をダブルクォートで囲むようにしてください。HTTP://やFTP://などの接頭辞や、.JPGや.EXEなどのファイル拡張子も含めてください。
5. ボタンにラベルを付けます。Button Text "をボタンに表示させたい言葉で置き換えてください。テキストを二重引用符で囲むようにしてください。ボタンが大きく表示されないように、ボタンテキストは小さくしてください。
6. コードをページ内に配置します。ボタンのコードをウェブページの本文の任意の場所に挿入すると、その場所にボタンが表示されます。変更したウェブページのコードをアップロードして、新しいボタンをテストしてください。

方法2

画像ボタンを作成する

1. ダウンロードボタンをデザインします。お好みの画像エディターを使って、ウェブサイトのスタイルに合ったボタンを作成してください。ボタンは小さくても大きくても構いません。
2. ファイルをサーバーにアップロードし、ボタン画像をアップロードします。ファイルをダウンロードできるようにしたい場合は、自分のサーバーでホスティングするか、ボタンをウェブ上のどこかにあるファイルに向ける必要があります。あなたのウェブサイトのサーバーで利用できるようにしたいファイルを使用してください。

   • ボタン画像をサーバーの同じ場所にアップロードします。
3. ダウンロードコードを作成します。画像で表されたダウンロード・ボタンは、HTMLの他のリンクと同じように機能します。以下のコードをお好みのエディタにコピーしてください：
4. ファイルと画像の情報を入力してください。ダウンロードの場所」を、HTTP://またはFTP://の接頭辞を含む、ダウンロードの完全なURLに置き換えます。画像ファイル」をダウンロードボタン画像のファイル名に置き換えてください。ファイルがサーバー上のページと同じ場所にある場合は、アドレス全体を含める必要はありません。

   • Hover Text "は、ユーザーが画像の上にカーソルを置いたときに表示させたいテキストに置き換えてください。
   • X "と "Y "は、それぞれ画像の幅と高さに置き換えてください（単位はピクセル）。
   • 各入力をダブルクォーテーションで囲んでください。
5. コードをページに入力します。ボタンを表示したい場所にコードを配置します。新しいコードをアップロードし、ウェブページを読み込んでボタンが動作することを確認します。ホバーテキストが読み込まれることと、画像が適切なサイズであることを確認してください。

この記事は、CC BY-NC-SAの下で公開されている " How to Create a Download Button " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。