wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)

   

こんにちは、管理人@SS_mshpです。

今回は、お仕事で対応したWebサイトの事例があって、お取引先さまより『ぜひ紹介してくれ』といわれたので、ご紹介いたします。

バンドなど音楽活動に役立てられるコンテンツを、今後追加していける&読みやすいようにしてみました。

■作ったサイト~enjoy your bandえんばん(ミュージックサロンp+luckさま)

本サイト(音楽教室サイト)の姉妹サイトという位置付けです。教室ブログが基本的にレッスン実施内容に特化なのに対し(内部・すでに受講してる方向け)、外部の方にも、『バンドやり方情報・ギターやベースなど楽器の弾き方などの動画コンテンツ』などをお届けする狙いで提案しました。

また、1記事あたりの密度を上げてメインのアメブロなどが拾いきれなかったバンドや楽器関連のキーワードも、将来的に記事を増やして対応できるようにしました。

現在のところ『ギターやベース弾き方動画・バンドのリハーサルや打ち上げ、控え室・音楽活動向けツール』などを取り上げています。

enjoy your bandえんばんURL https://blog.p-plus-luck.com

■技術情報(レイアウトや動画読み込みなど)

■レスポンシブワードプレスサイト・見出しなどで読みやすさ上昇

将来的にはどんどん関連情報を追加していくオウンドメディアサイトにするため、更新しやすいワードプレスタイプにしました。

それに伴い、スマホ対応レスポンシブに。モバイル環境下でもサクッと読める&見出しなども大きめにつけて、視認性や検索ユーザーへの届きやすさも向上できたかと思います。

■動画読み込みエラーを避けるため、videoタグにpreloadを

楽器を弾く手元の動画があると、よりわかりやすくなります。そこで、代表さまより送っていただいた動画などもサーバーアップし、HTML5・videoタグで埋め込みました。
そのまま埋め込むと、サーバーの関係か、再生テスト時に動画が少し止まる感じがあったので、パラメーターに『preload』をつけて読み込んでおくようにしました。autoで自動で、事前読み込みをする感じになります。

これにより『読み込みが間に合わなくて途中で止まる』みたいな点が解消されました。少しトリミングをして、サイズを小さくしておくと、読み込み速度低下を避けられます。
(コード例<video src=”動画ファイル.mp4″ preload=”auto”></video>)

今後も音楽活動情報があがると思うので、興味ありましたらみていただけると幸いです。

enjoy your bandえんばんURL https://blog.p-plus-luck.com



【カテゴリ】 - webサイト制作, 音楽制作 【タグ】 - ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【WPプラグイン】PDFで、ワードプレスを電子書籍風にできる『PDF light viewer』

今回は、ワードプレス&WPプラグインを使って、めくれる電子書籍風のページを実装したサイトを作ってみます。 使用するプラグインは『PDF light viewer …

ワードプレスサイトを、プラグインでサクッとSSL化する方法

今回は、セキュリティの観点からも重要なサイトSSL(暗号化接続)を、ワードプレスを使って、サクッと導入します。 twitterでも話題になったhttpページ(S …

このサイトでPVを15倍(月間1480pv→22500pv・1年半の間)にした、seo・スマホ・記事話題の対策

今回は、いろいろエディットやチューニングをしていたら、アクセスが増えてPVが上がってしまったこのサイトの状況についてお話いたします。 googleアナリティクス …

ワードプレスの子テーマって、なぜ必要なの?

今回は、ワードプレスサイトを作るときにたまに話題になる『子テーマ』について取り上げます。 『必要だ』といわれていますが、どんなときに必要か・子テーマを入れないこ …

ワードプレスサイトの独自ドメイン解除方法

今回は、以前『ワードプレスに独自ドメインを設定する方法』を書きましたが、その逆もやってみたのでお伝えします。 需要があるかはわかりませんが、『構造を知る』とか、 …

fc2ブログでSSL対応開始!設定方法や注意点をチェック!

今回は、管理人も使っている大手ブログサービス(fc2)で、ブログ本体もSSL暗号化接続が可能になったのでやってみます。 社会的信用はいまいちだけど(fc2動画の …

【wpプラグイン】ワードプレスサイトで、スマホアクセス時だけ軽量テーマに切り替える方法

今回は、スマホでみるとワードプレスサイトがちょっと重い件について対策してみます。 紹介するプラグインは『デバイスに応じてテーマ切り替え』という機能。軽量テーマと …

スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動してしまうという症状が発生したので、それにCSSの修正で対処してみます。 元のテーマは『wp …

サイト制作お仕事事例~WPで仮想通貨投資情報サイトを(justiceクリプトカレンシーズ・AID LLCさま)

今回は、お仕事で対応したWebサイトの事例があって、お取引先さまより『ぜひ紹介してくれ』といわれたので、ご紹介いたします。 AID LLCさまよりご依頼いただい …

ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法

今回はプラグインで一発SSL化ができるワードプレスではなく、通常のwebサイトをSSL(暗号化通信)してみた話題です。 正しく表示させ、かつ保護された接続を保持 …