音楽サイト制作におすすめのHTML5テンプレート


CDジャケット並べてプレイヤーで視聴できるかっちょいい音楽サイトを作りたい!(あるいは作ってくれと頼まれた)方にオススメの、HTML5+jQueryを使用した超簡単なテンプレートをご紹介したいと思います。

Music Portfolio Template with HTML5 and jQuery

え~、実際使用してサイトを制作してみましたが(下のほう参照)、
極端な話、必要なのはHTMLの知識のみで、10分あればできます(笑)。

技術的にはいろいろやってるんですが、そこは他のブログにおまかせして、
ここでは、時間が無い&難しいことはよくわからん&アップできればそれでいい、という方のために、
最短コース(初心者用)を簡単にご説明したいと思います。

1.テンプレートをダウンロード
まずこちらのページからMusic Portfolio Templateをダウンロードします。

2.画像を入れ替える
まず、背景画像を入れ替えちゃいましょう。
「images」フォルダの中に「1.jpg」というのがあります。
背景に使いたい画像を用意して、めんどくさいので同じファイル名で上書きしちゃいましょう。
(画像サイズは何でもOK。小さい場合はリピートされます。)

3.CDアルバムジャケットを入れ替える
次に「music」フォルダの中に「album1」「album2」とありますが、
その中のalbum.jpgとthumb.jpgを入れ替えます。
203x203pxと110x110pxの画像を用意して、こちらも同じファイル名で上書きします。

4.音楽ファイル&テキストを入れ替える
最後に音楽ファイルと曲のタイトル等を入れ替えますが、mp3ファイルとoggファイルの両方を用意して、「album1」「album2」にアップします。(mp3とogg両方必要な理由はブラウザによって対応しているファイル形式が異なるためと思われます。ちゃんと調べてないですが・・・)
たとえばsample-music1.mp3とsample-music1.oggを用意した場合、
「album1」フォルダの中に両ファイルをアップ。
index.htmlをdreamweaverとかテキストエディタとかで開いて、

mp3とoggのファイル名を書き換え、
アルバム名、アルバムの説明、曲名を書き換えます。
2曲目も同様に書き換え、3曲目を追加したい場合は、2曲目と囲ってある<div>~</div>をコピーして追加します。
※注意:アップしたmp3ファイルはhtmlを読める人ならだれでもダウンロードできてしまいます。フルバージョンをダウンロードさせたくない場合は短い曲のサンプル等を用意してアップするなどしましょう。

5.サーバにアップする
はい。あとはサーバにアップして出来上がりです。
これでもうできあがり。すばらしいですね。

□■□■□ サンプルページ □■□■□
んで、上記をちょちょっといじって、ドメインを取得してから半年以上ほったらかし(笑)にしていた、
自主レーベルのサイトを作ってみました。
 ↓↓↓
http://lambchoplabel.com/

上記の作業にプラスして、
タイトルの追加、フッターの追加、iTunesボタンの追加、Twitter Follow meボタンの追加、右サイド下にリンク追加、などをプラスしました。
もしこのテンプレートを見つけなかったらこのサイトの存在は永遠に無かったかもしれません(笑)。
忙しい中、このテンプレートのおかげで数時間でサイトアップできました。感謝感謝。


2 Comments

Add a Comment

メールアドレスが公開されることはありません。

CAPTCHA


This blog is kept spam free by WP-SpamFree.