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

WordPress

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

volume

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

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

アイコンが表示されない

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

Web.config

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

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
</system.webServer>
</configuration>

view raw
gistfile1.xml
hosted with ❤ by GitHub

.htaccess

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

AddType image/svg+xml svg

view raw
gistfile1.apacheconf
hosted with ❤ by GitHub

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

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

volume

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

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

.mejs-inner span {
font-family: Helvetica,Arial;
}

view raw
gistfile1.css
hosted with ❤ by GitHub

WordPress

Posted by jz5