リンクでダウンロードを作る方法
リンクのみであればサイドバーのボタン機能などで簡易的に作成可能ですが、今回は、リンク表示ができないファイルをダウンロードしていただく場合にご活用いただけます。
尚、PDFやJPG／PNG／GIFといった画像ファイルであれば、リンクだけでもブラウザ上で表示可能なので、リンクのみで使用する場合は下記14stepの後18までskipしましょう。
1. 例としてサイドバーのフリーエリアに作成していきます。
フリーエリアはどこでも概ね同じ仕様ですので、サイドバー以外の場所で表示をご希望の場合は該当する編集ページにて同様の内容をお試しください。
2. サイドバーの画面になったらフリーエリアを編集します。
下記の画像では既に他の情報がフリーエリアに入っているものとなっているので、新しく別のフリーエリアの枠を追加しています。（＋ボタン、またはフリーエリアを追加ボタンにて追加可能です）
3. タイトルは必須ではないですが、他の情報との区別に入力します。
フリーエリアのタイトルは無視しても大丈夫です。
4. 本文にリンクボタン用のテキストを入力します。
バナー画像などあれば、メディアに入れていただき、テキストの代わりにご利用いただくことも可能です。
5. メディアを追加ボタンにダウンロードしてもらう書類をアップロードします。
メディアには色々な種類の書類をアップロードすることができますが、表示に使用できるものは画像ファイルやmp4ファイルのみとなりますのでご注意ください。表示はできませんがwordファイルなどもアップすることはできます。
6. それではローカルファイルをドラッグアンドドロップしましょう。
ダウンロードに使用するファイルをドラッグアンドドロップで入れてみましょう。
※今回は既にアップしているPDFファイルを使用してみます。
※ダウンロードさせる書類は必ずメディアに入れておく必要があるので、他サイトなどから直接リンクなどを貼らないようにしましょう。
7. 該当のファイルがアップロードされたら、ワンクリックして選択します。
8. 選択したファイルの詳細が右側に表示されるので、ファイルのURLという項目を見つけます。
その下にクリップボードにコピーというボタンがあるので押します。
9. URLのコピーが行えました。
10. メディアファイルの画面をクローズします。
ここではURLをコピーするのみで他の作業はありません。
11. 先ほど本文に入力したテキスト（または画像）を選択します
12. エディタ上のリンク設定のアイコンをクリックします
13. URLを入力するフォームが出てきます。
ここで先ほど取得した書類のURLを入力（ペースト）します。
14. 決定ボタン（歯車ではない方のボタン）を押します。
15. エディターのメニューバーにある機能の「表示」をクリックし、ソースコードを選択します。
16. <a>タグの中にdownloadという属性を追加します。
ソースコードはHTMLという言語で表示されています。記述を誤ると正しく動作しません。今回の場合 <a ～ > までが<a>のタグ内のHTMLとなっています。hrefという属性の後 "～" の間には先ほど入力したURLが入っています。このダブルクォートの後ろに下記のように半角スペースを空けて download と記載します。
※スペースが全角になったり閉じカッコを消したりしないようご注意ください。
17. 記述したらOKボタンを押して保存します。
18. このテキストリンクをボタンリンクに変更します。
この時点でもリンクは完成していますが、見た目がテキストリンク（文字に下線が付いただけのもの、または文字だけのもの）の状態なので、ボタンのような枠を付けます。
リンクを貼ったテキストを再度選択した状態にし、スタイルのドロップダウンメニューを押します。
19. 出てきたメニューから、リンクボタンを選択します。
20. 上記の設定が終わったら公開パネルにあるUpdateボタンにて更新します。
更新しないと反映されませんので、必ず押してください。
21. プレビューで実際の画面を確認してみましょう。
22. サイドバーのフリーエリア領域にボタンが追加されています。
ボタンを押してみましょう。ページが遷移することなく書類がダウンロードされることが確認できるかと思います。これでダウンロードボタンの設置は完了です！
先にお伝えしている通り、他のフリーエリアも基本的には同じ仕様です。
サイドバーでの設置であれば全ページフォローできるので、今回はこちらを選択してみましたが、ご都合に合わせて他ページも同様に対応できるかと思います。是非お試しください。
