Elementor SoundCloudウィジェットの使い方

サイトで音楽を再生させたいときは、『SoundCloud』ウィジェットを使ってみてはいかがですか?

SoundCloud(サウンドクラウド)ウィジェットは、『soundcloud.com』というサービスと連携し、音楽を再生することのできるElementorの一般ウィジェットです。

soundcloud.comでは音楽をアップロードやダウンロードができ、売買も可能なサービスで、無料でダウンロードできる音楽も結構たくさんあります。

SoundCloudオーディオプレイヤーのサンプル

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

また、SoundCloudウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ!

SoundCloudウィジェットの挿入

SoundCloudウィジェットの挿入

『SoundCloud』ウィジェットをドラッグ&ドロップでカラムに挿入します。

SoundCloudウィジェット挿入後の表示画面

こちらは『SoundCloud』ウィジェット挿入後の表示画面です。

デフォルトで『John Coltrane – 1963 – My Favorite Things』が挿入されます。

SoundCloudウィジェットのエディター

なお、SoundCloudウィジェットのエディターには『コンテンツ』と『高度な設定』のみで『スタイル』は存在しません。

リンク・指定の楽曲を挿入する方法

サイトにSoundCloudで見つけた楽曲をウィジェットを通してサイトに挿入する方法を以下で説明します。

①SOUNDCLOUD.COMにアクセスする

soundcloud.comのホームページ

まず、『soundcloud.com』にアクセスします。

②自分の好きな楽曲のページを開きURLをコピーする

欲しい楽曲のページのURLをコピー

soundcloud.com内で、自分のサイトに挿入したい楽曲のページを開き、そのページのリンク(URL)をコピーします。

③エディターの『リンク』にURLをペーストする

エディターの『リンク』にコピーしたURLをペースト

SoundCloudウィジェットのエディターの『リンク』のプレイスホルダーにコピーしたURLをペーストします。

すると、画面上の楽曲が自分が指定したものに変更されます。

ビジュアルプレイヤー

ビジュアルプレイヤーのオプション一覧と違いを比較したサンプル表示

『ビジュアルプレイヤー』は『はい』または『いいえ』を選択するかで表示されるカバーの見た目とサイズが変わります。

お好きな方を選択してください。

追加オプション

エディターの『追加オプション』一覧

自動再生

『自動再生』は再生プレイヤーを自動再生するかどうかの選択です。

※デフォルトは『いいえ』に設定されています。

購入ボタン

『購入ボタン』の説明と購入ボタンを示した画像

『購入ボタン』はカートのマーク(購入ボタン)を表示させるかどうかの選択です。

※デフォルトでは『表示』に設定されています。

ただし、無料の曲には最初から購入ボタンの表示はありません。

いいねボタン

『いいねボタン』はいいねボタンを表示させるかどうかの選択のようですが、現時点でカバー内にいいねボタンが存在していませんのでこのセクションは無視してください。

ダウンロードボタン

『ダウンロードボタン』はダウンロードボタンを表示させるかどうかの選択のようですが、現時点でカバー内にダウンロードボタンが存在していませんのでこのセクションは無視してください。

アートワーク

アートワークを表示/非表示にしたときの比較画像

『アートワーク』は曲のディスクジャケットを表示させるかどうかの選択です。

※デフォルトでは『表示』に設定されています。

なお、このオプションはビジュアルプレイヤーを『いいえ』にしたのときのみ表示されます。

シェアボタン

『シェアボタン』の説明・シェアボタンがどれかを示した画像

『シェアボタン』は『Share』ボタンを表示させるかどうかの選択です。

※デフォルトでは『表示』に設定されています。

コメント

『コメント』はコメントを表示させるかどうかの選択のようですが、現時点でカバー内にコメントが存在していませんのでこのセクションは無視してください。

再生回数

『再生回数』の説明と再生回数がどれかを示した画像

『再生回数』は再生回数を表示させるかどうかの選択です。

※デフォルトでは『表示』に設定されています。

ユーザー名

『ユーザー名』の説明とどれがユーザー名かを示した画像

『ユーザーネーム』は再生ボタンのすぐ横の曲名の上に表示されたテキストを表示させるかどうかの選択です。

このユーザーネームに当たる部分は歌手名であったり、そうでなかったりと、パッケージにより様々です。

※デフォルトは『表示』に設定されています。

色の管理

色の管理で再生ボタンのアイコンの色を変更した後の画像

『色の管理』では再生ボタンの背景色の色をカラーピッカーより自由に変更することができます。


『SoundCloud』ウィジェットを使用すれば気軽に音楽の再生プレイヤーをサイトに挿入することができます。

soundcloud.comという外部サイトと連携をしているのでスタイルの変更など、あまり見た目を大きくいじることができませんが、その代わりにたくさんの楽曲が集約されており、試聴だけならどれも無料なので手軽でいいですね!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

「Elementor SoundCloudウィジェットの使い方」への4件のフィードバック

  1. くろちゃん

    大変ためになるブログ、ありがとうございます。
    いつも参考にさせて頂いております。
    ところでお聞きしたいのですが、スマホやタブレットでsoundcloudがあるページを開くと「アプリで聞く」、その下に小さく「ブラウザで聞く」という表示が出ますが、この表示を無くしてパソコンで開いた時と同じようにブラウザのみで聞くだけにすることはできないのでしょうか?

  2. エレメンターでサウンドクラウドのBGMを使っていますが今までは自動再生できていたのですが最近できません。
    どうしてなのかわからないのです。教えていただけますか?

    1. 音や映像はユーザーが許可しない限り自動再生はされないように、クロムを含め多くのブラウザが制限するようになったからだと思います。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通