ブログでSound Cloudの投稿記事を埋め込むプラグインを作った

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

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

目次

PIONEER TORAIZ　SP-16 PROFESSIONAL (DJ サンプラー)

  Amazonでレビューを見る

プラグインの使用例

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

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からインストールしてください。

1

$ npm install hexo-tag-soundcloud --save

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

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

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

1

# 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 %｝タグへオプションを追記します。

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にも対応しています。もし宜しければ使ってみてくださいね。それでは！

ほったらかしでも月10万円! ミニサイトをつくって儲ける法

  Amazonでレビューを見る