ダウンロードボタンの作り方｜イラスト・zipファイルの配信方法

ダウンロードボタンの作り方を知りたい方へ。

サイトに表示されたダウンロードボタンを押すと、画像やデータファイルがパソコンにダウンロードされるという仕組みです。ユーザーに画像やイラストなどを配布したい方に向けた記事になります。

当記事では、フリーイラストサイトでよく見かけるダウンロードボタンの作り方を解説します。

解説する方法でできることは、zipファイルのダウンロードボタン、その他（画像・イラスト・テキストファイル）のブラウザ表示ボタンです。

作り方はどちらも同じですが、zipファイルを指定するとダウンロードのポップアップが開き、その他ファイルを指定するとブラウザ表示されます。

どうぞご覧ください。

ダウンロード（配信）できるもの

１MB以内のものは、難なくダウンロードボタンので配信できます。データサイズの大きなものは、zipファイルにして配信することをおすすめします。

ほとんどのファイルが配信できます。

• zipファイル
• 画像・イラスト（jpg、png、ai、gif、img）
• テキスト（text、docm、xlsm、pdf）

ダウンロードボタンの使い方（サンプル）

こんな感じのボタンが作れます。

zipファイルのほうはクリックすると、保存場所を聞いてくるポップアップウインドウが開きます。

その他のダウンロードボタンをクリックすると、ブラウザに表示されます。右クリックで保存（コピー）できます。

どちらも作り方は同じです。

リンク先のURLをzipファイルにすると、zipファイルのダウンロードができ、リンク先のURLをファイルにすると、ブラウザ表示するボタンになります。

配信データを圧縮する

配信するデータはなるべく小さくしましょう。

画像ファイルのデータを圧縮するには、フリー圧縮サイトを利用するといいです。

zipファイルを作る

zipファイルにすると、解凍する手間はかかりますが、小さいサイズでデータを送れるので便利です。

配信したいファイルを右クリック「圧縮」→「zip」で、zipファイルを作ることができます。

ダウンロードボタンの作成手順

使っているサイト制作ソフトによって、多少やり方が違います。wordPress、SIRIUS、その他に分けて説明していきます。

ダウンロードボタンの作成手順

<form>
<input type="button" value="ボタンの文字" onclick="location.href='ファイルアドレス（URL）'">
</form>

ボタンのカスタマイズ

ボタンをカスタマイズすることもできます。

WordPressのテーマに用意されているボタンを使う

href=リンクURLのURLの部分を、ファイルアドレス（URL）に変えるだけでダウンロードボタンになります。

SIRIUSでボタン画像を作る

ボタン画像を作り、「リンクの挿入」のリンク先URLの欄にファイルアドレス（URL）をにゅうりょくする。「画像」に作ったボタンを指定する。

自作のボタンorフリーのボタン画像を使う

<a href="ファイルアドレス（URL）"><img src="ボタン画像.jpg"></a>

こんな感じです。

自分なりにカスタマイズしてダウンロードボタンを作ってみてください。

まとめ

この方法でダウンロードボタンを作れば、画像配布やデータ配布ができるようになります。テキストだけでもできますが、やはりビジュアル的にはボタンのほうが分かりやすいですからね。

作る手間はかかりますが、簡単にできるのでぜひ作ってみてください。

以上、「ダウンロードボタンの作り方｜イラスト・テキスト・zipファイルの配信方法」でした。

参考記事も合わせてご覧ください。

【ブログまとめ】運営する上で必要な知識
【ブログまとめ】運営する上で必要な知識