ダウンロードボタンを実装するHTMLコード【Googleアドセンス風】

WordPress公式のAMPプラグインとの不具合が発覚し、以前使っていた「Simple Download Monitor」というダウンロードボタンのプラグインが使えなくなってしまいました。

そこで、いっそカスタムHTMLのコードで作ることに変更。

クリックカウンターがなくなったのは残念ですが、仕上がりはいい感じです。見ての通りアドセンス風ボタン。簡単で目立つボタンといえばこれですよね。

このダウンロードボタンを使いたい方がいたら、下記のコードをそのままコピペしてみてください。Wordpressでの使い方は下記にて説明します。

WordPressのカスタムHTMLでダウンロードボタンを実装

WordPressの投稿画面には、カスタムHTMLを追加することができる機能があります。テキストを追加する項目にある「カスタムHTML」です。（下の図のマーク）

これを使うと、HTMLコードを直接入力して自分のオリジナル項目を作ることができます。ダウンロードボタンをプラグイン以外で設置するにはコードが一番です。（画像を貼り付けてリンクする方法もあるけど綺麗じゃない）

私のブログ内の「ダウンロードコーナー」に設置しているのがカスタムHTMLで作ったダウンロードブロックです。以下のコードをコピペすれば、同じようなレイアウトが出来上がるはずなので、興味のある方は一度お試しくださいませ。（日本語で書いてあるところは自分で変更するところです）

<div class="flexcard">

<section class="download">
<img src="画像のURLを入れる" alt="画像の名前を入れる">
</section>

<section class="download">
<p>
ここに説明文を入れる
</p>

<a href="ファイルのURLを入れる">
<div class="dlb">
ダウンロードボタン
</div>
</a>
</section>

</div>

「画像のURL」箇所に入れるURLは、Wordpressメニューの「メディア > ライブラリ」から確認できます。使いたい画像をクリックし、次の画面に出てくる右側の「リンクをコピー」のところです。http〜から始まるURLがあればそれだと思ってもらっていいです。

「画像の名前を入れる」箇所は、あってもなくてもいいです。もし画像がリンク切れを起こしたときに、代わりに表示される名前です。クローラーへのお知らせにもなります。SEO的にはあった方がいいですが、なくても大きな不具合はありません。

「ここに説明文を入れる」箇所は、ダウンロードボタンの上にくる説明テキストです。これも必要な人だけ追加すれば大丈夫です。

「ファイルのURLを入れる」箇所は、ダウンロードさせるファイルのURLを入れます。これも画像と同じ要領で入れてください。

「ダウンロードボタン」箇所には、ボタンの文字を入れます。「Download」でも「こちらをクリック」でも何でもどうぞ。（長すぎるとモバイルビューで2行になるので短い方が良い）

このボタンは、クリックすると自動的にダウンロードが始まる仕組みです。

CSSでボタンと枠のデザインを作る

カスタムHTMLだけではまだまだボタンには程遠いですが、ここにCSSというデザイン要素を追加してあげることで、見た目にわかりやすいボタンに変わります。

WordPressメニューの「外観 > カスタマイズ > 追加CSS」に、以下のコードを追加してください。

.flexcard{
 padding:15px;
 display:flex;
 align-items: center;
 border:1px solid #285EA0;
 }

 .download{
 width:400px;
 height:auto;
 margin:0 15px;
 text-align:center;
 }

 .download a{
     text-decoration:none;
 }

 .dlb{
 color:#fff;
 text-align:center;
 padding:5px;
 margin-top:15px;
 background-color:#126df4;
 border-radius: 50px;
 box-shadow:0px 2px 2px #999;
 }

.flexcardは、囲い枠とグループ化の役割を担っています。

.downloadは、左右に分かれている画像と文字情報に対して大きさと余白を設定しています。ついでにセンター合わせもしています。

.download aは、リンクの下線を消すためのものです。

.dlbは、ボタンの色付け、シャドウ、角丸などのデザイン要素です。

以上で一丁あがり！

ダウンロードボタンだけの実装

外のブロック要素はいらない、ダウンロードボタンだけ欲しい！という方は、下記のコードだけでも大丈夫だと思います。

【カスタムHTML】

<section class="download">
<a href="ファイルのURLを入れる">
<div class="dlb">
ダウンロードボタンに入れたい文字を入れる
</div>
</a>
</section>

【追加CSS】

.download a{
     text-decoration:none;
 }

 .dlb{
 color:#fff;
 text-align:center;
 padding:5px;
 margin-top:15px;
 background-color:#126df4;
 border-radius: 50px;
 box-shadow:0px 2px 2px #999;
 }

それぞれのテーマやCSSにもよりますが、多分これでいけるはずです。

例えばこんなブロックボタンも作れます↓

See the Pen BazMMBd by officehojo (@officehojo) on CodePen.

今はブロック機能のデフォルトでダウンロードボタンが作れるので、WordPressではあまり需要はないのかもしれないですね。。

では！