プラグインDownload Monitorのダウンロードボタンをカスタマイズ



普通のダウンロードボタンとしても使えます

プラグインDownload Monitorのダウンロードボタンは機能的ですが、ちょっとダサいので、

CSS でカスタマイズしてシンプルにしました。

スタイルシート (style.css)に次の CSS コードをコピペします(WordPress の場合は子テーマ)。

/* ダウンロードボタン */
.button{
display:block;
width:300px;
height:70px;
font-size:1.0em;
font-weight:400;
line-height:70px;
color:#FFFFFF;
text-decoration:none;
text-align:center;
background-color:#999999;
border-radius:5px;
transition: all 0.5s 0s ease;
}
.button:hover{
color:#f27e57; 
background-color:#FFDDAA;
}

記事には下記の HTML をコピペ。download 属性にはダウンロード時のファイル名を指定できます。

<div align="center">
<a class="button" href="URL" download="">ダウンロードはこちら</a>
</div>

transition プロパティを使っているので hover だけの時よりも滑らかな感じ。

transition: all 0.5s 0s ease;

プラグインDownload Monitor で指定する場合は、URL の欄にこのように記述します。

https://ドメイン/download/ID/