【WordPress】自分で作った画像で「ダウンロードボタン」を簡単に作る方法

ブログ
目次

【WordPress】自分で作った画像で
「ダウンロードボタン」を簡単に作る方法

自分で作った「ダウンロードボタン」を表示させたいけど、
どうしたらいいんだろう？
今回は、以下のような「自作の画像をダウンロードボタンにする」方法をご紹介します。

ダウンロード

※筆者が作った「テロップベース」のデザイン（.png）がダウンロードされます。

筆者は「Telop.site」という、YouTubeなどの動画に使用できる「テロップベース」の無料素材配布サイトを運営しています。
テロップ.サイト
テロップ.サイト

無料かつ高品質な、YouTubeや広告で使用できるテロップやフレームダウンロードサイト。現役テレビ番組編集マンが心を込め…

そこでは、私が自分でデザインした「ダウンロードボタン」を組み込んでいます。

そのやり方をWordPress初心者でも分かりやすく画面静止画とともに解説していきます。
※「素材を無料で誰でもダウンロードできるボタン」の解説になります。

 

また、まだブログの開設ができていない方は、以下の記事を利用してサイトを作ってください!
分かりやすくまとめたので参考になればと思います!

自作デザインダウンロードボタンの作り方 手順

WordPressの画面の静画を元に説明していきます。

黄色の枠線をたどるとスムーズに完成できると思います!

1.「素材」を作る

まずは、「ダウンロードボタン」と「ユーザに届ける素材」を作りましょう。

今回はTelop.siteで使用している「1.ダウンロードボタン」と、仮で作った「2.テロップ素材」を準備します。

1.「ダウンロードボタン」※自作画像
2.「ユーザに届ける素材」
以下のHTMLを、自分のパソコンの「メモ」などにコピーしておきましょう。

<p>
<a href="ユーザに届ける素材URL" download="">
<img src="ダウンロードボタンURL" alt="ダウンロード" />
</a>
</p>

2.【ダウンロードボタンを追加】WordPressの「メディア」から「ライブラリ」をクリック

3.「新規追加」をクリック

4.まずは「ダウンロードボタン」をドラッグ&ドロップ

※「ファイルを選択」からも読み込みができます。

5.読み込んだデータをクリック

6.「ファイルのURL」を全てコピー

7.メモのHTMLの「ダウンロードボタンURL」に 6.のURLをペースト

「”」の全角半角の変換注意!

8. 【ユーザに届ける素材を追加】3.〜と同じように「ユーザに届ける素材」をドラッグ&ドロップ、データをクリック

※「ファイルを選択」からも読み込みができます。

9.「ファイルのURL」を全てコピー

10.メモの「素材URL」に9.のURLをペースト

「”」の全角半角の変換注意!

11.完成したHTMLを全てコピー

「”」の全角半角の変換注意!

12.「投稿」の「投稿一覧」をクリック

いよいよ投稿にダウンロードボタンを配置します。

13.「<>」のボタンをクリックし、コピーしたHTMLをペースト

※Classic Editorを使用した画面です。

14.配置完了

15.プレビュー画面で確認

まとめ

いかがでしたでしょうか？
とても簡単だったと思います。

これは完全フリー素材向けの内容なので、「有料」や「限定配布」、「ダウンロード数の計測」には少し向かないやり方です。

自分オリジナルの世界観を求める方は、非常に便利なHTMLなので、覚えていて損はないかと思います。

 

また、今後素材数・ページ数が増えても、HTMLを「ユーザに届ける素材」のURLだけ変更すれば、ずっと楽にダウンロードボタンが作れるます!

あなただけの素材配布サイトが完成しますようにー

ブログの最新記事8件