Gonくんのお散歩ソング『お散歩しよう Gonちゃん』を Bloggerで流す上で、Bloggerのエディタの仕様変更でネット情報が一部非現行となっており少々手こずりました。
次回への自身の手がかりとしてメモを残すことにしました。
BloggerではMP3の音楽ファイルを直接アップできません。
そこで、iframeというHTMLのタグを使って、今回は私のアカウントのGoogleドライブ上に置いたMP3の音楽ファイルをBloggerのページに埋め込みました。
その方法は、
1. GoogleドライブにMP3をアップロードする
• まず対象のMP3ファイルをGoogleドライブにアップロードします。
2. 共有設定を「リンクを知る全員」に変更する
• アップロードしたファイルを右クリックして [共有] から、一般的なアクセス権を「リンクを知る全員」に変更します。
3. 埋め込みコード(iframe)を取得する
ここが少々手こずったところです。
• まず、上記2.で設定したGoogleドライブ上のファイルをダブルクリックでプレイヤーを開きます。PC上で音楽が流れると思います。
この状態ではまだレイヤーのメニューバー『ファイル』→『共有』に『埋め込みリンクを取得』がありません。
• レイヤーのメニューバー『ファイル』→『開く』から『新しいタブで開く』で再度開きます。新しく開いたプレーヤーのメニューバー『ファイル』→『共有』には『埋め込みリンクを取得』が表示されてきます。
• レイヤーのメニューバー『ファイル』→『共有』→『埋め込みリンクを取得』をクリックすると埋め込みタグが表示されるのでこれをコピーします。
こんな感じ(↓)
<iframe src="https://drive.google.com/++++/+/++++++++++++++++++++++/preview" width="640" height="480"></iframe>
※width="640" height="480"は埋め込まれるフレームのサイズですので、適当に変更します。
4. Bloggerの左隅の『鉛筆マーク』でHTMLビューに切り替え、貼り付ける
• Bloggerの投稿作成画面で、左上隅の『鉛筆マーク』で編集モードを [HTMLビュー] に切り替えます。
• コピーしたiframeタグを任意の場所に貼り付け、通常の作成ビューに戻して位置やサイズを確認し完成です。
iframeタグを貼り付ける前に、通常の作成ビューでブログの文章などを編集しておくと自分の文章を手がかりにできるので、貼り付け位置の目安がつきやすいでしょう。
• コピーしたiframeタグを任意の場所に貼り付け、通常の作成ビューに戻して位置やサイズを確認し、公開します。


コメント
コメントを投稿