wordpressの音声プレイヤーMediaElement.jsでリキッドレイアウトが崩れるときの対処

Web/デザインIT, 仕事

久しぶりにWebサイトを作っています。

WordPressで音声データ(MP3)を挿入したら、リキッドレイアウトが微妙におかしくなりました。
あんまり情報がなかったので残しておきます。

WordPressデフォルトの「MediaElement.js」をカスタマイズ

カスタマイズするのは、WordPressにデフォルトで組みこまれている「MediaElement.js」です。
「メディア」から音声データを挿入すれば、勝手に綺麗に出してくれるやつですね。

  

これが正常な状態。2カラムです。

 

MediaElement.jsのカスタマイズ

ウィンドウを縮めると、音声プレイヤーの入っている右のカラムが広がって、左のカラムが潰れます。
もちろんCSSでメディアクエリを設定しているので、一定のサイズからは綺麗に縦2段になるんですが、気持ちが悪い。

ということで、子テーマのCSSにコードを追加します。

.mejs-container{
width:80%!important;
margin:0 auto;
}

widthを指定してやれば解決しました。

max-width:100%とかでもダメです。きちんと指定する。
きっちりカラム分を伸ばしたければ、widthは100%で。
その場合、marginの設定はなくても大丈夫です。

 

ついでに音声プレイヤーの背景色を変える場合

ついでに、プレイヤーの背景色を変える場合。

.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body{
	background:#bee1e6!important;
}

背景色は、白にすると文字色も変えないといけなくなります。

 

ちなみに今回ベースに使っているテンプレートは、「Cocoon」です。
高速かつ軽量、カスタマイズのしやすさに惹かれて使いました。よいですね!

とある人気ナレーターの公式サイトですが、年明け早々にお目見えできるかなと。
とってもシンプルですけども。

自分のこのサイトも、新しくしたいよ~~~!