当サイトでは広告を含む記事があります。

当サイトでは広告を含む記事があります。

【WordPress】ダウンロードボタンの作り方|ファイル配布・設定手順まとめ

WordPress download button / Let's dive in

WordPressブログには、読者があなたのブログからファイルをダウンロードできる「ダウンロードボタン」機能があります。この記事では、その設定方法をまとめました。

いくみ
いくみ

「お役に立てるブログ作り」に大切ですね!

ダウンロードボタン挿入の手順

1.ブロックの右辺にプラスサインが表示されています。クリック。

以下のようになります。

WordPress ブロックメニューの選択

2. 検索ボックスに[ファイル]と入力して、表示された[ファイル]メニューをクリックします。

WordPressダウンロードボタンの手順、ファイルアイコンを検索

3.[アップロード]または[メディアライブラリ]から、ファイルを挿入します。

WordPressダウンロードボタンの手順、ファイルをアップロード

4.表示されたボタンを編集します。

  • 文字:「ダウンロード」のテキストをお好みで変更。
  • 位置:ツールバーの[配置]アイコンで調整。
  • 新しいタブで開く:右サイドバーのオン/オフで設定。
WordPressダウンロードボタンの手順、ボタンの編集

ボタンの左に、ファイル名が出ます。

このファイル名は「リンク」としてのみ機能します。

ダウンロードが実行されるのは、ボタンの方をクリックしたときだけです。

ファイル名のリンクをクリックし、右サイドバーで「メディアファイル」を選択しておくと、読者はダウンロード前にファイルの中身を確認できます。

いくみ
いくみ

ファイル名のリンクは、消去しておいても大丈夫です。

ダウンロードボタンは、編集画面では動作しません。

プレビュー画面で試します。

ダウンロードボタンのスタイル

ボタンテキストを入力すると、上にテキストを編集できるアイコンが出ますが、おすすめはしません。(蛍光ペン効果や文字色、サイズや太字・斜体など。)

WordPressダウンロードボタンの手順、ボタンテキストの編集

CSSで設定することをおススメします。

以下の記事で方法をまとめました。

できあがり例

「ファイル名リンク」を残した例です。ファイル名のリンクをクリックすると中身を確認できます。

「ボタン名」を長くすると、「スマホ表示」が見づらくなります。良くない例としてそのままにしました。

「ファイル名リンク」を削除するとこうなります。消しても、ダウンロードボタンはちゃんと機能します。お好みで。

おわりに

ブログを始めた当初、「ブログからファイルをダウンロードできる」ということが、とても高度なことのように感じていて、実は簡単にできると分かったとき、少し驚いたのを覚えています。

簡単とわかっていながらも、ちょっとすごいことをした気分になりました。

いくみ
いくみ

ファイルをもらえるというのは、お得感もありますよね。

ぜひ使ってみてください。

サンプルとして作成したPDFファイルでは、英語の「button」という言葉に関連する英語表現をまとめました。

その中で、花の挿絵を使わせていただいています。

クリエイターの方:無料イラスト・図案屋さんのイラスト

いくみ
いくみ

本当にきれいです。

ダウンロードボタンの色を右サイドバーで変更しようとすると、なぜかブロック全体に色が適用されてしまいます。

ということで、ダウンロードボタンを可愛くする方法を以下の記事でまとめています。

コメント

タイトルとURLをコピーしました