BiNDupでダウンロードボタンをデザインする方法

みなさんはWebサイトを作成するとき、ダウンロードパーツを使った事はありますか？
ダウンロードパーツは文字通り様々なファイルをダウンロードさせる事が出来るパーツです。
Webサイトからpdf資料ファイルなどダウンロードさせたりするのによく使われますね。

ただ、このダウンロードパーツは便利な面もあるのですが、デザインをカスタマイズするには柔軟性が足りていません。
今回はホームページ作成サービス「BiNDup」のダウンロードパーツをリンクパーツで代用して、リンクボタンでデザイン設定する方法を解説したいと思います。

ダウンロードパーツの特徴と問題点

まず最初にダウンロードパーツについて学んでみましょう。

ダウンロードパーツの特徴

ダウンロードパーツの特徴は主に以下の3点。

• ファイルを自動でアップロードしてURLを設定してくれる
• ダウンロード後に遷移するURLを指定出来る
• トラッキングIDを設置出来る

こうやって見ると一連の設置作業を簡略出来る他、動的な仕掛けも作れ、ダウンロード数などもGoogleアナリティクスで計測が出来たり多彩ですね。

ダウンロードパーツの課題

さて、そんなダウンロードパーツですが、課題は以下に集約されます。

• テキストリンクのみ（アイコンは設置可能）

そうなんです。
ボタンや画像からのリンクに対応していないのですね。
んー、惜しい。
これは何とかしたい。

リンクパーツを使ってデザインを補う

現時点での代替案としてリンクパーツを使った方法をご紹介します。
リンクパーツとして設置が出来るので、テキストだけでなくボタンや画像にも自由度が高く設置可能になります。
反面、特徴で上げていた3点が不可となりますのでご了承ください。

1：リソースエディタでファイルをアップロード

まず、リソースエディタを使ってファイルをアップロードします。

色々警告が表示されますが勇気を振り絞って「はい」へ。

リソースエディタを開いたら「ファイルを作成」ボタンからファイルをアップロードします。
ここでは例としてsample.pdfと云うファイルをアップロードします。

アップロードが完了するとファイルURLが表示されます。
で、ここで申し訳ないのがこのファイルURLが、現在の作りではそのままコピーが出来ません（汗
大変お手数ではございますが、テキストエディタなどに手入力で写してください。

以下のURLを取得出来ました。
/_userdata/sample.html

2：BDタグに置き換える

そのまま貼り付けても使えなくはないのですが、公開ディレクトリなどによっては正しくリンクされない可能性があります。
それを防止する為にBDタグを用います。

ルールは簡単
/_userdata/
を
[BD:path_userdata]
に置き換えるだけです。

結果として以下のURLになります。
[BD:path_userdata]sample.html

こうしておけばどんな環境にアップロードしてもリンクが切れる事はありません。

3：リンクパーツに設定

あとは取得したURLをリンクパーツに設定するだけです。

別ウィンドウでダウンロード出来る様に「ターゲット」を「_blank」にすると良いでしょう。
注意点として、BDタグを使った場合、公開環境にアップロードしないとダウンロードが行えません。
プレビュー時にリンクをクリックしてもエラーになってしまうのでご了承ください。

4：リンクボタンに変更する

最後にリンクボタンに変更してみましょう。
リンクパーツの右下「デザイン」からリンクボタン編集画面を開き、class名やテンプレートから様々なデザインを選択する事が出来ます。
背景色、文字色、ボーダーカラーは下部から選択出来るので好きなデザインにカスタマイズしてみましょう。

リンクボタンのカスタマイズ方法についてはマニュアルをご覧下さい。
マニュアルを見る

設定は以上です。

如何でしたか？
若干手間は掛かりますが、リンクパーツとして扱えるのでかなり自由度は増しますね。
リンクボタンの他にも画像やエリアにリンクパーツを設定する事も可能ですので色々試してみて下さい。
不便な部分は今後の開発で解消出来ればと思います。
それでは今回はこれまで。

無料でBiNDupを使ってみるBiNDの制作事例を見る