こんにちは。サイト管理人のデルタです。本記事では、素材ページに追加したファイルダウンロードボタンについてご紹介します。
ダウンロードボタンについて
今回追加したボタンはこちらです。
本記事執筆時点では、素材（PNG形式とSVG形式）を保存したZIPファイルをダウンロードできるようになっています。順次各ページにボタンを設置する予定です。
※ボタンが無いページでも画像を右クリックしていただければPNG形式の画像であれば保存できます。
ボタン実装方法の紹介
ダウンロードボタンを作る方法はいくつかあります。
メジャーな方法は、ブロックエディタのボタン、もしくはファイルを設置して画像のURLを設定する方法か、プラグインを使う方法かと思います。
今回ブロックエディタを試しましたが、外観の調整がうまく行きませんでした。そこで今回は、カスタムHTMLを使用しました。以下に使用したコードを書いておきます。
<div class="dl-button" style="text-align:center;">
<a href="https://deltadailyblog.com/wp-content/uploads/2025/05/mail.zip" <!--ファイルのURL-->
class="zip-link"
style="background:#f9f9f9f0;
border-color:#32373c;
border:solid #32373c 1px;<!--ボタンの縁の形・色・太さ-->
border-radius:2rem;<!--ボタンの角のRの半径-->
padding:10px 20px;
transition: .2s;<!--色が変わる時間-->
text-decoration:none;<!--リンクの下線を消す-->
color:#32373c;" <!--文字の色-->
<!--カーソルがボタンから外れたときのボタンの外観-->
onMouseOut="this.style.background='#f9f9f9f0';this.style.color='#32373c';"
<!--カーソルがボタンに乗っているときのボタンの外観-->
onMouseOver="this.style.background='#32373c';this.style.color='#f9f9f9f0';">
ダウンロード
</a>
</div>divやaにclassを設定してカスタムCSSにCSSを書いても、CocoonのCSSに上書きされるためか反映されませんでした。これをカスタムHTMLにCSSをすべて記述することで解決しました。コードの管理や可読性などの観点では非推奨かもしれません。ただ、各ページにこのコードを1つ置けばボタンが完成すると考えれば、選択肢の1つとしてはアリかと思います。
何か質問等ありましたらお気軽にコメント、お問い合わせからどうぞ！
最後まで読んでいただきありがとうございました！
コメントを残す