この記事で扱っているプラグインバージョンは、執筆時点のもの「1.9」です。
アップデートにより内容が変化する場合もあります。

少し前に話題になった「MP6」というプラグインがあります。

WordPress.comで採用されている新しい見た目のダッシュボードをインストール型でも利用できるもので、フラットなデザインでとても気に入っているのですが、先日のアップデートによって見出しの色が勝手に変わるようになってしまいました。

例えば、目立ったところだと見出しの文字色が勝手に青になってしまいます。特に自分はリンク色を青にしているため、なんだか気持ちが悪いです。

一応プレビューや過去記事を確認してみましたが、それらには影響はでてないようなので、管理画面内でのみ影響があるスタイルシートが増えているようです。

通常利用ではあまり気にならないのかもしれませんが、エディタスタイルを適用していて見た目を外と統一させている場合（特にクライアントワークで多いかも？）ですと、ちょっと困りますよね。 ((クライアントワークでMP6のようダッシュボードの見た目を入れ替えるタイプのプラグインを導入するかどうかは別ですが…。))

これを何とかしようと言うのが今回のお話です。

原因を探す

とりあえずおかしくなったところをデベロッパーツールでみてみると、こんなかんじになっていました。

style.cssは自分がテーマ内で使用しているh2のスタイルです。 ((エディタスタイルとして自分はstyle.cssをそのまま読ませています。))

そしてその下に、いつのまにか「tinymce-dialog.css」というものが増えています。

デベロッパーツールから、「color:#2B6FB6」の欄のチェックを外すと色が元に戻ったことからもおそらくここで間違いなさそうです。

では早速修正して行きましょう。

スタイルシートを修正する

今回は「hx」タグの修正を例に説明します。

方法は大きく２つあります。

１つは、今回追加された、「tinymce-dialog.css」を書き換えてしまう方法、もう１つは自分が用意したeditor-style（ない場合は用意してから）で指定を行う方法です。

方法１：プラグインファイルを弄る方法

管理画面から「プラグイン」→「プラグイン編集」からプラグイン編集画面を開き、MP6の「tinymce-dialog.css」を開きます（下図参照）

開いたら、Cmd+F（Ctrl+F）などでページ内を「h1」などで検索し、以下の場所を探します。

 そして「color:#2B6FB6;」の行を、削除するか、本来の色に戻します。

ただし、この方法は、プラグインがアップデートされた際に変更が上書きで巻き戻る可能性が高いため、なるべく次に紹介する、もう一つの方法でやったほうがいいでしょう。

方法２：エディタスタイルを変更する（こちらがおすすめ）

先ほどのデベロッパーツールのキャプチャをみても分かるように、「tinymce-dialog.css」とかぶっているセレクタに関しては、ユーザーが定義しているエディタスタイルのほうが優先度が高くなっています。

つまり、

エディタスタイルの h1 , h2 , h3 , h4 に対して color パラメータを明示的に指定してしまえばいい

だけなのです。

既にエディタスタイルを適用している方ならば、「h1」から「h4」までに文字色を設定しましょう。色が変わってしまう場合は大抵デフォルトの色（bodyのcolorやそもそも初期値のままなど）だと思いますので、その色を指定します ((影響を受けるのはビジュアルエディタ内だけですので、あまり細かいところまできにする必要はないと思いますが…。)) 。

エディタスタイルを適用していない場合は、まず「editor-style.css」というスタイルシートを作成して、そこに上記の設定などを書きます。

そして、テーマフォルダにアップロードし、最後に functions.php に

を追加します。

functions.phpで指定したファイル名と、作成したファイル名が一致していれば別にファイル名はなんでもいいんですが、デフォルト値がこれなのでこのまま使うことが多いようです。

あるいは、面倒ならば自分のように、表画面と同じCSSを読み込ませちゃってもOKです。

その際、例えば見出しを使う場所によってスタイルを分けるのに、 .article > h1 みたいな指定をしてる場合はビジュアルエディタ内にそのIDやクラスが無いため、 そのままじゃ適用できません。

なので、その場合はもう一工夫して、functions.php に

 という風に追加すると、ビジュアルエディタ領域にも同じクラスが割り振られるため、表示できるようになるはずです。

青い見出しにもやもやーっとしている方はよかったらお試しください。

因みに他の部分も似たような感じで上書きしていけばOKだと思います。

自分は今のところ気になるのはこの色の問題だけだったのですが、それ以外の部分も好みのデザインになるようにいろいろ改造してみてもいいかもしれませんね。

MP6プラグインの入手

WordPress › MP6 « WordPress Plugins