musicWebTemplate

ミュージシャンやアーティストが音楽を宣伝し、視聴者とつながるために構築された無料の Web サイト テンプレート。

特徴

• カスタマイズ可能なヒーロー画像とレスポンシブ画像モーダル
• ページ読み込み用に最適化された Javascript ベースの音楽プレーヤーと YouTube サムネイル ジェネレーター
• 検証とバックエンド統合を備えたメーリング リストと問い合わせフォーム
• 概要、グッズ、ニュースプレス、ショーセクションを含む追加セクション
• プロジェクト コードは HTML および CSS W3C 検証準拠を満たしています (白黒 CSS スキンを除く)

はじめる

注: 完全なテスト機能には、php でセットアップされたローカル Web サーバーとメール サーバーを使用することをお勧めします。

ヘッダーとナビゲーションを編集するには:

1. ID「ロゴ」をアーティスト/バンド名に置き換えます
2. ナビゲーション リンクを独自のものに更新します

ホームセクションを編集するには:

1. style.cssのクラス「hero」の画像名を置き換えます。
2. Index.html のクラス「home」内のキャッチフレーズ、CTA、CTA リンクを編集します。

メーリングリストを編集するには:

1. David McCoy によるチュートリアルに従って、独自の Google スプレッドシート メーリング リストを作成します: https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms- b833952cc175
2. mailingList.js の「url」を介して、新しく作成した Google スプレッドシートのリンクを置き換えます。
3. Index.html 内の行動喚起とキャッチフレーズを置き換えます。

about セクションを編集するには:

1. ソーシャルメディアのリンクを自分のものに変更する
2. Index.html のクラス「About」を編集する

グッズセクションを編集するには:

1. 画像を圧縮してピクセルを減らし、読み込み時間を最適化します
2. 写真を /pictures/merch ディレクトリにコピーします
3. style.css のクラス「.a、.b、.c」などの画像名を置き換えます。
4. Index.html のクラス「grid」内の画像名を置き換えます。

音楽セクションを編集するには:

1. Index.html のクラス「Music」を編集する
2. 音楽リンクを独自のものに変更する
3. style.css のクラス「music-hero」の画像名を置き換えます。

注目の曲を追加するには:

1. DAW を使用して曲を 30 秒のクリップ プレビューに編集し、ロード時間とストリーミング時間を最適化します。
2. /music ディレクトリに曲を置きます
3. musPlayer.js の配列変数「files」を編集する
4. 配列に曲を追加するには、「Your Song Title.mp3」形式を使用します。

ニュースセクションを編集するには:

1. 画像を圧縮してピクセルを減らし、読み込み時間を最適化します
2. 写真を /pictures/blog ディレクトリにコピーします
3. style.css のクラス「.a、.b、.c」などの画像名を置き換えます。
4. Index.html のクラス「grid」に写真の名前とブログのタイトルを置き換えます。
5. blog_(page) HTML ページにブログ投稿を書きます。

プレスセクションを編集するには:

Index.html のクラス「Press」を編集します。

ビデオセクションを編集するには:

1. 紹介したい YouTube 動画に移動します
2. YouTube リンクの「v=」の後のテキストをコピーします。
3. データ ID テキストを、index.html のクラス「Video」のクラス「youtube-player」に貼り付けます。

番組セクションを編集するには:

Index.html のクラス「Shows」を編集します。

写真セクションを編集するには:

1. 画像を圧縮して読み込み時間を最適化する
2. 写真を /pictures/gallery ディレクトリにコピーします
3. style.css のクラス「.a、.b、.c」などの画像名を置き換えます。
4. Index.html のクラス「grid」内の画像名を置き換えます。

お問い合わせフォームを編集するには:

1. form.phpにメールアドレスを入力してください
2. form.php で応答メッセージをカスタマイズする

フッターを編集するには:

1. フッターのリンクを独自のものに更新します
2. terms.html 内のアーティスト/バンド名に置き換えます。

スキンでカスタマイズ！

新しい白黒テーマが利用可能になりました。

1. css/style_black_white.css の名前を css/style_black_white に変更します

または

1. すべての HTML ドキュメントのヘッダーの href リンクを css/style_black_white.css に変更します。

で構築

• HTML5
• CSS3
• jQuery/JavaScript/AJAX
• PHP5

貢献する

このリポジトリに貢献するときは、フォークしてプル リクエストを送信できます。何をしているのかの説明を追加してください。確認します。

バージョン管理

バージョン2.3.0

著者

• マシュー・ウォルドロン- (http://waldronmatthew.com)

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE.md ファイルを参照してください。

利用規約とウェブサイトのクレジットページを遵守してください。

謝辞

MIT ライセンス コードを使用したすべての開発者に多大な感謝を申し上げます。それらは「ウェブサイトのクレジット」ページにリストされています。