音感弱者成長記録

音楽制作方面の活動記録。余談記事多め。

はてなブログにmp3データを貼り付ける方法(2019年7月14日時点)

f:id:phase_B:20190714213549p:plain

 

こんな人向け

はてなブログにmp3データを貼り付けたい

 

この記事からわかること

・この記事が投稿された時点(2019年7月14日)でのはてなブログにおけるmp3データの貼り付けかた

(他の方のブログ記事でも同じようなテーマで解説記事はありましたが、Dropboxはてなブログの仕様が変わっているためか、うまくいかないので今回私が実験して成功した例を紹介します。)

 

Dropbpxにアップロードして共有準備

まずDropboxに貼り付けたいmp3データをアップロードし、ファイルを右クリックして出る「共有・・・」からファイルのリンクをコピーします。

 

Dropboxの入手や登録をやっていない人は無料で便利なのでこの機会に登録しておきましょう。定番のオンラインストレージサービスです。

www.dropbox.com

 

はてなブログのHTML編集画面でコードを入力(ここが一番重要)

f:id:phase_B:20190714215243p:plain

 

はてなブログを書くと出る画面の左上に「HTML編集」というタブがあるのでクリックします。

 

そこで例えばコピーしたDropboxのリンクが

 

https://www.dropbox.com/s/vlsgnlp5xj2nn67/blogaudiotest01.mp3?dl=0

 

となっていた場合、

<p><audio src="https://dl.dropboxusercontent.com/s/vlsgnlp5xj2nn67/blogaudiotest01.mp3" controls="controls"> </audio></p>

 

と打ち込みます。(赤字は元のリンクから引用する部分を示しているだけで実際に赤字にする必要はありません)

 

うまくいくとこんな感じになります。

 

f:id:phase_B:20190714221943p:plain

うまくいったときのHTML編集画面のソースコード

 

これで終わりです。

 

ちなみにmp3を貼り付けた部分から通常の編集画面で下に改行ができなくなりますが、HTML編集画面でmp3貼り付けのソースコードの下の行に<p></p>と入力してやれば、通常通り下に行が追加されるので解決されます。

 

まとめ

Dropboxをでmp3ファイルを共有できる状態にし、貼り付けるためのソースコードを書けばはてなブログにmp3を貼り付けることができる!

 

 

 

この記事で私のようにmp3の貼り付けに迷走する人がひとりでも減ることを祈っています。(2時間くらい試行錯誤した)