[Codrops]楽器サイト作り方 ギター編

前回の記事でピアノのページを製作しました。今度は男性ユーザーの多いギターも紹介します。

ライセンスに関しましては、前回の記事をご覧ください。

[toc]


Interactive Musical Instrument

[toc]

実践動画

コードの解読

ギター本体のデザインはCSS : instrument.cssで編集で可能です。

ギター本体の色を変えたい時は、style.css で編集します。

CSS

style.css  /* ギターの本体色を変える場合*/

.content–guitar {
background: #dad4c3;  
}

.content–guitar .content__title,
.content–guitar .link-more {
color: #d06315;
}

 

instrument.css   /*ストリング(弦)を変える場合*/

/* Guitar */  61行目
.guitar__body {    
fill: #cac3b0;
stroke: #fbdac8;
stroke-width: 1px;
}

.guitar__neck,
.guitar__stringcut {
fill: #b7b09f;
}

.guitar__middle {
fill: #afa99a;
}

.guitar__string {
pointer-events: none;
stroke: #e6e3d9;
stroke-width: 1.5px;
}

.guitar__string-hover {
pointer-events: visible;
fill: none;
}

 

作成したページ(画像をクリックで開く)

 

HTML

ギターの本体のコードはindex.htmlにあり、何も触らなくてOKです。

ギター以外のコードを削除することでシンプルなギターのページが完成します。

この時の注意点ですが、なぜかピアノのクラスを消すとギターの音が出ないです。

なので、以下のソースを残すことで音が出せる様になります。(なぜそうなっているのか、理由までは解読出来ませんでした。ごめんなさい・・・)

See the Pen invisible piano by Yukyco (@yukyco) on CodePen.

ギターの本体のコードは、bodyタグの真ん中あたりにある

See the Pen For explanation my blog by Yukyco (@yukyco) on CodePen.

以上のタグまで(長いので割愛させて頂きます。)
およそ43行が必要です。
(※申し訳ありませんがスマホやiPadでは弾けません。また対応方法も分かりません。)

JavaScript

最後にフッターにある色々ある JavaScript :  guitar.js は必須です。

 

他のも消さない方がいいです。消すと音が出なかったりします。

に記述がありますので、これを絶対に消さない様に編集します。

See the Pen
For explanation my blog
by Yukyco (@yukyco)
on CodePen.

codropのコピーライト(著作権)も削除してはいけません。

最後までご覧いただきありがとうございました。

サイト制作のご依頼はコンタクトページから

受付中です!(土日除く)

Liked Liked
No Comments