MarsEditで一部CSSが読み込まれない件


MarsEditロゴ
リアルタイムプレビューができるMac用のブログエディタのMarsEditですが、リアルタイムプレビューに一部CSSが反映されていないことに気付きました。

CSSが反映されない場合に試してもらいたい方法と、一部読み込まないCSSがありましたので紹介します。

※プレビューを自分のブログと同じデザインにする方法は「MarsEditのプレビューを簡単に自分のブログのデザインにする方法」で。

【こちらの記事も要チェック!】
MarsEditでmeta.phpを変更せずにAll in One SEO Packのフィールドを追加する方法
MarsEditで画像挿入時にimgタグの属性など、スタイルを変える方法
MarsEditでブログを書く時にお気に入りのエディタを使う方法
Create LinkのリンクがMarsEditへ貼り付けられない問題の解決策
YosemiteでMarsEditの行間が詰まって読みにくい件の対応策
MarsEditに画像を挿入すると「width」と「height」が半分になる問題の解決策
MarsEditで作成した記事のトラックバックをオンにする方法
WordPressとMarsEditでbrタグが消える現象の解決策
SkitchからMarsEditへ画像を挿入する時のファイル名をユニークな英数字にする方法
MarsEditで過去の記事を30件以上取得する方法

スポンサーリンク

CSSのリンクが正しいか確かめる

読み込むCSSのリンクが正しいか確かめる。

MarsEdit上部メニューの「Preview」をクリックしプレビューを表示させる。
プレビューをクリック

プレビュー左下の「Edit Template」をクリック。
Edit Templateをクリック

ソースコードが表示されるのでCSSファイルのURLをコピーしブラウザでアクセスしてちゃんとCSSが表示されるか確認する。

表示されない場合は正しいURLに変更してソースコード右下の「Save Changes」をクリック。

CSSを再読込する

ブログのCSSファイルを更新した後、プレビュー画面で表示されない場合がある。

MarsEditが以前のファイルを一時保存していてそのファイルを使っている可能性があるので再読み込みさせる。

上記で紹介した方法のプレビュー画面左下の「Edit Template」をクリック。ソースコードが表示されたら、どの場所でも、どの文字でも良いので1字打ち込みすぐ消す。

こうすることで、ソースコードが変更されたと認識して全体を再読込するので新しいCSSが反映されるようになる。

子セレクタは対応していない

MarsEditはCSSの子セレクタに対応していないようで、子セレクタで書いたCSSは反映されないようだ。

子セレクタについては「CSSの子セレクタ「>」の意味について」で。

スポンサーリンク

おわりに

プレビュー画面にCSSが反映されずいろいろ試してみましたが、今回僕がぶつかった問題はMarsEditは子セレクタに対応していないようだ。ということで片付けました。

一部だけ反映されていなかったのでもどかしいですが、記事を書くのに支障はないのでとりあえず放置します。


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク