【WordPressサイト製作】レスポンシブ左右ボックスとaudioで、音楽素材サイトを作る

今回は、WordPressを利用して、新しいサイトを作ってみたときの話題です。 テーマは『stinger新しいバージョン』を選択。レスポンシブ左右ボックスとaudioタグ機能で音楽素材サイトを作ってみました。ポイントとなる部分を見ていきます。

■audioタグを利用して、音源を視聴できるようにする

■mp3ファイルを記事内に入れる

まずは、片っ端から楽曲を作成し、mp3にします（320Kbps）。管理人の環境では、WordPressのファイル容量が20メガまでなので、wavだとオーバーしますが、320Kbpsのmp3なら、音質・容量共にクリアします。これらをメディアにアップし・・ 固定ページ（または個別記事）編集上部のメディア追加を。

そこで、 アップしてあったmp3を選択します。

■オーディオ要素は、HTML上ではどうなっているの？

音声データを入れた場所には『audio』のタグが入ります。これはHTML5から追加された要素だったと思います。最近のブラウザでのサポートはされています。勝手に新バージョンになるGoogleChromeはおいといて、 古いバージョンのIEなどでは動作サポート外ですが、横に直接リンクのバナーがあるので、大丈夫かもしれません。

■ audioタグを貼った場合のブラウザ表示は？

このサイトでもちょくちょくつかっているようなプレイヤーがブラウザに表示されます。矢印を表示しているところを押すだけなので、操作は簡単。

■レスポンシブ左右ボックスで、説明・ダウンロードバナー・プレイヤーを分ける

オーディオデータは載りましたが、こんどはそれを『ＰＣ・スマートフォンどちらでも見やすいレイアウト』に調整します。レスポンシブテーブルの組み方は覚えましたけど（メディアクエリのＳＰ部分に書いたり）、stingerの機能で簡単に実装できるようです。

■レスポンシブボックスを、記事内に挿入する

メディアクエリｃｓｓなどをエディットしなくても、記事編集の上部メニューにある『ＰＣ用左右ボックス』を。これで（初期状態は４０：６０）ボーダー０の表が入ります。ｃｓｓエディットできる方は、『lbox/rbox』それぞれのパーセント調整してもokです。

■ＰＣ表示した場合

ダウンロードボタンと、プレイヤー・説明が横に並んで表示されます。

■スマートフォンなど、縦型デバイスで表示した場合

右ボックスが下に落ちて、縦型に表示されます。指で横にスライド・縮小みたいな動作をしなくてよいので、スマートフォンでの視認性は高くなりました。『フリー音楽素材使う方ってＰＣユーザー多いんじゃ？』というツッコミは不要です（笑）

■肝心のフリー音楽素材サイトへのリンクは？

こちらです。（ssフリーミュージック・2018リニューアルしました） スタイリッシュな無料・著作権フリー曲はss-freemusic

まだ曲は４０曲くらいしかないですけど、今後とも追加してまいります。WordPressでもこういうことができる、みたいな事例になれば幸いです。