WordPressのサイドバーにSoundCloudの音源を埋め込む方法

Embedを選択して、「Code and preview」のコードをコピーする ブログに関する話

現在、当ブログのサイドバーのプロフィール欄には、いわゆる「プロフィール画像」を設定していない。では、ここに写っている画像は何かと言うと、SoundCloudの楽曲を設置していて、そちらのイメージ画像だ。これは我ながらいいアイデアだなと思っていて、何よりもプロフィール画像と自分の演奏の紹介ができて、都合いいことこの上ない。

というわけで、今回の記事では、WordPressのサイドバーに、SoundCloudの音源を貼り付ける方法について、解説。

なお、SoundCloudの下に設置してある、Twitterのフォローボタンの埋め込み方法については、こちらの記事を参照して欲しい。

WordPressのサイドバーに、ツイッターのフォローボタンとタイムラインを埋め込む方法
ツイッターのフォローボタンやタイムラインをWordPressブログのサイドバーに埋め込んでいる人は多いので、初心者の人の中でも、手探りながらすぐにそれらを設定したいと思っている人も多いかもしれない。今回は一つの行程ずつスクリーンショットも撮ったので、かなりわかりやすい記事を心掛けて記述した。

サイドバーにSoundCloudの楽曲を埋め込む方法

ウィジェットのテキストを配置

まずは、Twitterの時と同様、WordPressダッシュボードの「外観」→「ウィジェット」。
ウィジェットに「テキスト」を配置する。

外観のウィジェットを選択。

Twitterタイムライン用のテキストウィジェット。何も書かなくてもいい。

ブラウザからSoundCloudを開く

続いて、ブラウザでSoundCloudを開き、貼り付けたい楽曲のシェアボタンをクリック。

SoundCloudで埋め込めたいが曲を選んでシェアボタンをクリック

すると、「Share」「Embed」「Message」と表示が並んでいるので、「Embed」をクリック。
Embedを選択して、「Code and preview」のコードをコピーする

出力されるサイズを調整したければ、「More options」の三角をクリックすると、出力サイズを300px, 450px, 600pxの中から選択することができる。

出力するサイズを300px, 450px, 600pxから選ぶ
もしくは、コード内のwidth=”100%” height=”450″ の、それぞれの値を変更してあげると、より細かく大きさの調整ができる。

当ブログの場合は、サイドバーの幅を336pxに設定しているため、width=“100%” height=“336”に設定している。要するに、336pxの横幅に合わせ、画像が正方形になるよう、縦の長さも調整しているのだ。

また、More options項目の「Enable automatic play」は、サイトを開くと同時に、問答無用に再生される設定なので、よっぽど自己主張の強い人以外はチェックしない方が無難だと思う。

設定が済んだら「Code and preview」に記載されているコードをコピーする。

この時、コード横の「WordPress code」には、チェックしないこと

 

最後に、先ほどの「テキスト」のウィジェットに貼り付け、「ウィジェットを保存」をクリックし、完了。

終わりに

サイドバーのプロフィール欄といえば、サイトに訪れた人がすぐに目に入るであろう箇所なので、ここにSoundCloudを貼り付けることは、音楽家にとって大きなアピールになる。こんな美味しいスペースを下らない広告なんかで使ってしまうのは、とても勿体無い。よっぽどが「広告」がサイトの顔ならさておきね。

まあ、そんな嫌味はともかく、SoundCloud以外にも、YouTubeやTwitterの動画をサイドバーに貼り付けることも可能だと思うので、色々と試してみて欲しい。

コメント