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

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

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

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の埋め込みメニューで確認できる。

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

Ads

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 (てぃー)

自然風景や人物の写真撮影を行っています。その他は音楽や映像・メダカの鑑賞も好きです。ブログでは気になったことをメモ代わりにまとめていますので気軽にご覧ください(^^)

 お問い合わせ

 プロフィール

 ポートフォリオ

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

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

Ads
 おすすめ記事
 作例掲載