この記事を書いてる人: 
tea

HexoブログでSound Cloudの投稿記事を埋め込めるようにするプラグイン「hexo-tag-soundcloud」を作りました。投稿記事のmarkdownファイルにsoundcloudタグを入れると、Sound Cloudのトラックを埋め込む事ができます。

今回はsoundcloudツイートの一般的な埋め込み方法も触れながら、プラグインの使い方を解説していきたいと思います。

playing the music | Sony a7 + SIGMA 35mm F1.4 DG HSM Art
 playing the music | Sony a7 + SIGMA 35mm F1.4 DG HSM Art  photo by tea ©
Ads

目次

プラグインの使用例

まずはプラグインを使用した時の表示例を説明したいと思います。hexoのmarkdownで以下のように記述します。以下の例ではmedasinのDaydream ft.JOBAをブログに埋め込んだ例です。

your-posts-markdown.md
1
2
3
4
5
6
7
8
9
10
11
{% soundcloud https://soundcloud.com/officialmedasin/daydream-ft-joba-1 %}
または
{% soundcloud officialmedasin/daydream-ft-joba-1 %}
または
{% soundcloud 275308631 %}
275308631はトラックID。Sound Cloudの埋め込みメニューで確認できる。

例えば上記のように書くと、こんな感じで表示されます。

hexo-tag-soundcloudの使い方

話を本題に戻します。次にHexoでSound Cloudを埋め込むプラグインの使い方を解説したいと思います。

インストール

まずは、npmからインストールしてください。

bash
1
$ npm install hexo-tag-soundcloud --save

Pull Requestやissueも歓迎しておりますので、煮るなり焼くなりご自由にお使いくださいませ(^^)

プレイヤーのカスタマイズ

当プラグインでは、埋め込んだSound Cloudのプレイヤーの見た目をカスタマイズできます。カスタマイズするには以下のようなオプションを_config.ymlに追加します。

_config.yml
1
2
3
4
5
6
7
8
9
10
11
# hexo-tag-soundcloudのオプション指定例
# こちらで指定したオプションは、全ての投稿に含まれるsoundcloudタグに適用されます。
soundcloud:
height: 300 # プレイヤーの高さ。ビジュアルモードのデフォルト値は450。シンプルモードのデフォルト値は166です。
visual: true # プレイヤーをビジュアルモードにするか否か(デフォルトはtrue)
color: c0f000 # プレイヤーのボタンスキンの色。デフォルトはff5500(シンプルモードのみ有効なオプション).
related: false # デフォルト値はtrue
comments: false # デフォルト値はtrue
user: false # デフォルト値はtrue
reposts: false # デフォルト値はfalse
autoplay: false # デフォルト値はfalse

上記は、全ての投稿に含まれるsoundcloudタグに適用されますが、個別に見た目をカスタマイズしたいときには、{% soundcloud %}タグへオプションを追記します。

your-markdown.md
1
{% soundcloud https://soundcloud.com/officialmedasin/daydream-ft-joba-1 166 false ffff00 false false false false false %}

上記の指定例は、_config.ymlで指定したオプションを上書きしたものが適用されます。

いかがだったでしょうか

ということで、今回はSound CloudのトラックをHexoブログに埋め込むプラグインをご紹介しました。こちらのプラグインで生成したSound CloudはAMP HTMLにも対応しています。もし宜しければ使ってみてくださいね。それでは!

Ads
 記事を書いてる人
gravatar
tea (てぃー)

ゆるふわポートレートや自然風景を撮影しています。その他の趣味は音楽制作/メダカの鑑賞/web。撮影や写真掲載・寄稿等のご依頼もお待ちしてます。お問い合わせは以下のフォームまたはSNSよりお願い致します。

 お問い合わせ

 撮影のご依頼

 ポートフォリオ

 各作例のご紹介

 シェアする
 記事名とURLをコピーする

ブログでSound Cloudの投稿記事を埋め込むプラグインを作った - TPB
https://photo-tea.com/p/hexo-tag-soundcloud/

 おすすめ記事
Ads
 作例掲載