webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2021/02/16

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

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

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

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

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

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

201611084

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

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

201611085

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

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

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

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

201611086

メディアクエリcssなどをエディットしなくても、記事編集の上部メニューにある『PC用左右ボックス』を。これで(初期状態は40:60)ボーダー0の表が入ります。cssエディットできる方は、『lbox/rbox』それぞれのパーセント調整してもokです。

■PC表示した場合

201611087

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

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

201611088

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

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

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

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


【カテゴリ】 - wpサイト制作事例
【タグ】 -

  関連記事

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

今回は以前、管理人が『お取引先の会社のサイト(静的HTMLは持っ ...

【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)

今回は、管理人がお仕事のWPサイト開発で使ってみたテクをご紹介し ...

bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】

今回は、bulma.cssが、お仕事で扱ったお取引先のWordP ...

WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説

今回は、需要があるかもしれない『WordPressのカスタムフィ ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう

今回は、以前にちょっとお仕事で扱った、『ログインした会員が、コン ...

WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト

今回は、(twitterにもちょっと書いたんですけど)管理人が、 ...