[WordPress] メディアプレイヤーの表示がくずれる

[WordPress] 音声ファイルの再生 | プログラミング生放送 で紹介したメディアプレイヤーの表示ですが、サーバーやテーマによっては正しく表示できない場合があります。

volume

当サイトでもつまづいた点を紹介します。

※ この投稿時点での WordPress のバージョンは 3.8.1 です。

アイコンが表示されない

再生ボタンやスピーカーのアイコンは SVG ファイルが使われています(表示するブラウザーによって PNG 画像と切り替わるようです)。サーバーによっては SVG ファイルにアクセスできるよう拡張子と MIME タイプを設定しておかないと表示されません。

Web.config

Windows Server (IIS) の場合、Web.config を編集します。

.htaccess

.htaccess ファイルを使う場合は、下記の内容の .htaccess ファイルをサーバーのディレクトリに配置します。SVG ファイルは、/wp-includes/js/mediaelement/ にあります。

ボリュームの位置がずれる

WordPress のテーマによってはメディアプレイヤーがくずれて表示されます。メディアプレイヤーの CSS 指定がもう少しテーマに堅牢であるといいのですが……。

volume

当サイトではまったのは、ボリュームの位置がおかしいというものです。これは span に font-family を指定しているとスライダーなどの幅が変わりボリューム部分がはみ出してしまう現象です。

次のようにメディアプレイヤーの時間表示と同じ font-family をメディアプレイヤー内の span に指定すると解決します。