同人音楽特設用テンプレート

同人音楽特設用テンプレート以外のテンプレートはこちらにあります

同人音楽特設用テンプレート


≫ サンプルページ(全デザイン確認できます)

2013/02/07 サンプルページの見出し(h1)部分のテキストを「Circle name etc.」に変更しました。
クリエイティブ・コモンズ・ライセンス 同人音楽特設用テンプレート by OzoneAsterisk is licensed under a Creative Commons 表示 2.1 日本 License.

同人音楽の特設用ページのテンプレートです。
基本的なものはいれてありますが、Flashプレイヤー等は組み込んでいません。
どうしても視聴や試聴をFlashにしたい、SoundCloudにしたいという方はご自分で組み込んでいただきますようお願いいたします。xfds(クロスフェーズ)という同人音楽向けのクロスフェードサンプル共有サービスもあるようです。

画像やテキストを置き換えるだけで特設サイトができます。
CSSがいじれる方はカスタマイズして戴いて構いません。

使用されている画像については、このテンプレートを使用する場合のみ無許可で構いません。
他の方が作られたテンプレートや、テンプレートを使用していないページに使用する場合はご連絡ください。

使用についての条件は、最下部の著作表示を消さないことだけです。
※同人音楽の特設用に作っているので、一般的な同人サイト用のテンプレートではありませんが、同人音楽以外の特設でもお使いいただけます。

様々なところでご紹介を戴いておりますが、これが特設のスタンダードというわけではありません。
あくまでも「特設を作りたいけど、 HTMLがわからない/時間がないから 作れない……」といったような方々への同人音楽特設に特化したチートシートです。
このテンプレートを通じて、サークルそれぞれの独自性を表現するためにHTMLやCSSを学んでみたい、と思っていただければ幸いです。

デザインは気まぐれに減ったり増えたりします。

イベント用のPOPテンプレートもよければどうぞ。

HTMLをいじる際には

スタイルシートを適用する場合は、index.htmlの6行目にある、
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”all” />
のstyle部分を、該当の名前に変更してください。

Adobe Dreamweaver CS5(Macintosh)で制作しています。文字コードはUTF-8です。
編集の際は、WindowsであればEmEditorTeraPad等、Macintoshであればmiなどのテキストエディタを利用してください。
メモ帳では文字コードや改行コードの問題で正確に表示できない場合があります。

何か分からないことがあれば

Twitterの@o3asterisk_infoか、メールフォームからご連絡ください。
簡単なQ&Aやstyle.cssの説明などはこちらのカテゴリにあります。随時追加します。

基本テンプレート

Base Template

Base Template

White
初期デザイン

基本テンプレートです。
こちらをダウンロードしてから他デザインをお選びください。

=> Download

CSSデザインテンプレート

上にあるベースをダウンロードした上で、各スタイル・素材ファイルをダウンロードしてください。
CSSは気が向くと増殖します。 2013/02/07 4つ追加。

style2

style2

Black/Dia
カスタム例01
少しゴシック調/黒/灰/白(背景画像あり)

=> Download

style3

style3

White/Gray/CSS3Radius,Shadow
カスタム例02
角丸/白/灰(CSS3/背景画像あり)

=> Download

style4

style4

Lace/Girlie/Cake
カスタム例03
レース/少女/お菓子(背景画像あり)

=> Download

style5

style5

Plant/Pink/White
カスタム例04
植物カリグラフィック/ピンク/白(背景画像あり)

=> Download

style6

style6

Chic/Mossgreen/Black
カスタム例05 シック/モスグリーン/黒/白

=>Download

style7

style7

Pop/Cyan/Yellow/Orange
カスタム例06
ポップ/シアン/黄/オレンジ(背景画像あり)

=> Download

style8

style8

Natural/Brown/Cream
カスタム例07
ナチュラル/茶(背景画像あり)

=> Download

style9

style9

Black/LightGreen
カスタム例08
黒/白/ライトグリーン(CSS3)

=> Download

style10

style10

Pink/Cream/Girlie
カスタム例09
リボン/ガーリー(CSS3/背景画像あり)

=> Download

style11

style11

White/Urban
カスタム例10
白/灰/都会的/シンプル(CSS3/背景画像あり)

=> Download

style12

style12

Japanese/Blue
カスタム例11
麻の葉模様/和風/シンプル(CSS3/背景画像あり)

=> Download

style13

style13

White/Gray/Simple/Square
カスタム例12
灰/白/シンプル/スクエア

=> Download

style14

style14

White/Simple/Square
カスタム例13
白/灰/シンプル/スクエア/横二段組

=> Download

style15

style15

Gray/Fake flame
カスタム例14
灰/トラックリスト固定の擬似フレーム

=> Download

style16

style16

Yellow/Round
カスタム例15
レモンタルト/黄/シンプル
=> Download

style17

style17

Pink/Web Font
カスタム例16
女性的/ピンク/マゼンタ/Webフォント
=> Download

style18

style18

Natural/Brown/Web Font
カスタム例17
ナチュラル/茶/Webフォント
=> Download

style19

style19

Punk/BlackYellow/Web Font
カスタム例18
パンク/黒/黄/Webフォント
=> Download