WordPressサイトで簡単にBGMを流す方法
WordPressサイトで簡単にBGMを流す方法

WordPressサイトで簡単にBGMを流す方法

2014.06.17
  • WordPress
WordPressサイトで簡単にBGMを流す方法

2014/6/17 2020/11/19 約 3 分で読めます

  • 2
  • 4
  • 5
  • 0

先日、所属サークルサイトで「無料BGMダウンロード」を開始しました。 結構な数のダウンロードをして頂いており、BGMの需要の高さを改めて認識しています。

本日は、BGMをWordPressサイト内で簡単に流す方法をご紹介します！

関連記事無料で使えるBGM・効果音のダウンロードサイト紹介

スポンサーリンク

目次

  • WordPressでBGMを流す方法
    • WordPressの基本機能で再生を行う
    • 再生したいデータをメディアに追加する
    • プレイリストを作成する
  • まとめ

WordPressでBGMを流す方法

ここではわかりやすく「BGMを流す方法」としていますが、BGM以外にもSE（効果音）やボイスなども再生可能です。音楽制作サイトだけでなく、声優さんのサイトなどでも活躍する機能となっています。

WordPressの基本機能で再生を行う

WordPress 3.6から音声を再生する機能が導入されています。そのため、もっともシンプルな方法はプラグインなしでWordPressの基本機能で音声を再生させる方法です。

http://fcmegabu.com/free-download/bgmfcmegabu.com

こちらのページはプラグインなしの方法でプレイヤーを表示しています。

sourceforge.jpFind the best information and most relevant links on all topics related to This domain may be for sale!wpdocs.sourceforge.jp

それでは具体的な方法を解説していきます。

再生したいデータをメディアに追加する

投稿記事や固定ページの「メディアを追加」もしくは管理ページのサイドバー「メディア→新規追加」で選択します。

mp3データを追加した様子です。

添付ファイルの表示設定で「メディアプレイヤーを埋め込む」を選択します。 埋め込み用にショートコードが生成されるので、プレビューで確認してみましょう。

https://o3-web.com/wp-content/uploads/2014/06/op01.mp3

上記のようなプレイヤーが記事に表示されているはずです。 シンプルでなかなかカッコいいプレイヤーが挿入されます！

プレイリストを作成する

WordPress 3.9からプレイリストも手軽に作成可能になりました。 手順を簡単に説明していきます。

「メディアを追加」→「リストに加えたいデータを選択」→「音声プレイリストを作成」をクリックします。

選択した音声データの一覧が表示されます。問題がなければ「プレイリストを新規作成」をクリックします。

プレイリスト表示に関しての表示情報などの修正や追加が可能です。

これが完成したプレイリストです。オシャレな感じです。

上記のように画像を表示したい場合は管理画面のサイドバー「メディア」→「ライブラリ」でアイキャッチを挿入したい音声を選択して「アイキャッチ画像」で画像を設定してください。

プレイリストを製作時に一曲だけ選択することで、上記のような表示方法も可能です。 好みに合わせて通常表示と使い分けてみてください。

表示デザインに関しては、CSSを調整することで変更が可能なようです。

http://fcmegabu.com/pickup-musicfcmegabu.com

オススメの5選をピックアップしてみました！ よろしければ視聴をしてみてください！

まとめ

WordPressサイトで簡単にBGMを流す方法いかがだったでしょうか？ プラグインなしで導入出来るのが手軽で嬉しいところです。

http://nekonomemo.net/wordpress3-9-music-playlist/nekonomemo.net

今回参考にさせて頂いた記事です。より詳しく設置の方法などが掲載されています！ それでは失礼します。

LITTLE BUSTERS created by Rinker キングレコード
  • Amazon
  • 楽天市場
Pickup
  • 【作者情報表示】VK Post Author Displayのカスタマイズ方法
  • カスタム投稿タイプにAddQuicktagを適応させる方法
  • 【Simplicityカスタマイズ】サムネイルにSNS共有数を表示する方法
  • 僕とStinger3-カスタマイズ箇所と参考サイト様-
  • 【Simplicityカスタマイズ】TOPページで綺麗に記事を整列する方法
この記事をお届けしたO3 WEBの最新ニュース情報を、いいねしてチェックしよう！ スポンサーリンク
  • 2
  • 4
  • 5
  • 0

WordPress カスタマイズ @pre_muneoka

関連記事 カスタム投稿タイプにAddQuicktagを適応させる方法

タグや定型文を追加できる「AddQuicktag」。使用方法とカスタム投稿タイプにも適応させる方法を解説。

記事を読む

【Simplicity】子テーマのfunctions.phpに追加した内容

当サイトの子テーマfunctions.phpに追加した内容を参考サイト様と共に掲載しています。

記事を読む

SimplicityでSNSのカウントに！が出た際の対処法【ロリポップ】

SimplicityでSNSのカウントに「！」が出た際の対処法を書いています。ロリポップ使用者向けになっています。

記事を読む

WordPressでRSSがエラーを起こした際の対処法

突如見まわれたRSSのエラー。エラー画像とエラーの対処方法に関して紹介をしています。

記事を読む

FacebookページとWordPressサイトの連動方法

FacebookページとWordPressの連動をJetpackプラグインを使って行っています。Jetpackの導入方法や機能に関しても解説しています。

記事を読む

【歴史に学べ】孫氏の兵法に学ぶ蚊の撃退方法

【※閲覧注意】歴史に蠢く危険な二つ名・異名【未解決事件編】

  1. 当サイトでダウンロード可能なオススメBGM【5選】 | FCめがぶーWEBページ より: 2014年6月20日 3:41 PM

    […] WordPressサイトで簡単にBGMを流す方法 […]

    返信
📎📎📎📎📎📎📎📎📎📎
BOT