エンジニアが調査してみた!MarsEditの記事部分のCSSが反映されない原因と解決する方法

あれ、CSSが反映されないぞ…。

記事の部分以外はちゃんとスタイルが適用されるのに、どういうこと!?

こんにちは!コウジ(@koojy3)です。

ブロガー御用達のMacのエディターMarsEditのバージョン4がリリースされましたね。

僕はブログ書くのにMarsEdit使っていなかったのですが、気分転換にMarsEdit使ってみるか!ということでプレビューのテンプレートを設定してさっそく書いてみました。

なぜか記事の部分(#body#)のところだけ、何もスタイルが当たらない現象に遭遇・・。

うわぁぁ、なんかすげぇモチベーション下がる、、使うのやめよっかな、、と思いつつエンジニアという職業をやっている身として、火がついて原因を調査してみました。

記事プレビューのスタイルはなぜ反映されないのか

MarsEditってテンプレートの#body#のところが、本文と入れ替わってプレビューされますよね。

先に原因を言ってしまうと、プレビューに出力されるHTMLが同じではないです!

プレビュー後のソースコードを見ることができませんが、原因を探ったところ恐らくこの推測があっています。

プレビューのHTMLは何が違う?

例えばテンプレートがこんな感じだとしましょう。

<div class="body">
#body#
</div>

この状態で本文で

こんにちは!コウジ(<a href="https://twitter.com/koojy3">@koojy3</a>)です。

って書いたら、こんな感じになって欲しいと思いません?

<div class="body">
こんにちは!コウジ(<a href="https://twitter.com/koojy3">@koojy3</a>)です。
</div>

ていうか普通そうだと思いますよね。

だけど、どうやらMarsEditのプレビューは期待通りの状態ではないっぽい・・。

HTMLが違う根拠と解決方法

僕はブログのテーマでは記事の部分はスタイルの影響範囲が小さいように下記のようにCSSを書いています。

.body > p {
  color: red;
}

bodyというクラスのすぐ直下のpタグにスタイル指定する方法です。
このCSSの意味はこんなHTMLがあったときに文字を赤にするという意味です。

<div class="body">
  <p>こんにちは!</p>
</div>

だけど、これだとMarsEditのプレビューは正しく動いてくれないんですよ、、

記事部分のCSS以外は適用されるのに、なんで記事だけ反映されないんだよ!

ってキーボードをカタカタ・・。

そこで閃いた!これもしかして、HTML違うんじゃ・・

試しにこんな風にCSSを書き換えてみました。

.body p {
  color: red;
}

そしてプレビューを更新してみると・・

きたぁぁぁぁぁぁぁぁぁ!!!!!!!

ちゃんとpタグの文字が赤くなったぞ!!

なんで解決したの?

CSSの「>」は指定したタグやクラスの直下でネストしている状態にだけ適用されます。

「>」を外してスタイルが反映されていたということは、どうやらMarsEditのプレビューがHTMLの構造を作り変えているっぽい。

具体的にはこんな感じが想像できる。

<div class="body">
    <div>
        <p>こんにちは!</p>
    </div>
</div>

どうしてMarsEditがこんなことしているのかっていうのは、なんとなく想像できるけど専門的すぎるので、ここでは書かないでおきます。

まとめ

バグでも仕様でもどっちでもいいから、こんな糞仕様のプレビューは早急に改善してほしいもんだよね。

プレビューは便利なだけに、同じ悩みを抱えている人がいそう・・

もし記事部分のスタイルが反映されないよ、って人は使っているテーマのCSSで「>」が使われていないか確認してみると、解決できるかもしれませんよ!