MarsEditのリアルタイムプレビューにブログデザインを反映すると超便利

僕はgori.meを日々更新するのに欠かせないツールがある。それは「MarsEdit」。これが無ければ記事更新スピードは相当遅くなってしまうだろう。

ただ、つい最近までやっていなかったことがある。それは「MarsEdit」のリアルタイムプレビューにブログデザインを反映する、ということ。必ず一度ウェブ上で確認するから不要だと思っていたが、デザインが反映されていることに越したことは無いと思い、ようやく重い腰を上げて実装することに！

Cross Mode Lifeやあかめ女子のwebメモを参考に無事デザインを反映することができたので、やり方を紹介しておく！

空の記事を作成し、そのソースコードをテンプレートに貼り付け

意外と手間が掛かるだろうな、と勝手に思い込んでいたが、ブログデザインを反映すること自体は非常に簡単。

まず、適当に新規記事を作成し、タイトルに「#title#」、本文に「#body##extended#」を入力。

上記記事をそのままプレビュー表示し、ページのソースを表示する。Macの「Google Chrome」の場合、右クリックで下記のようなメニューが表示されるはず。

表示されるソースコードをすべて選択し、コピーしておく。

続いて「MarsEdit」を開き、自分のブログを右クリック。「Edit Preview Template」を選択。

表示されている内容をすべて消し、先ほどコピーした内容を貼り付ける。万が一想定通りの表示にならない場合、「Restore Default」をクリックすることによって初期設定に戻るのでご安心を。

リアルタイムプレビューにブログデザインを反映できることによって実際にブラウザで確認する前に本番に近い見た目で確認できるのはやはりとても便利だ。また、オフラインで作業をしなければならない時も重宝している。

ただ、上記の設定のままではまだ未完成だ。というのも、リアルタイムプレビューをする上で全く必要のないコードが多数含まれている状態だからだ。

確認すべき内容は大きく分けて3つ。

プレビューした記事のコードを貼り付けた際に、ソースコードの中にGoogle Analyticsのタグが含まれているあ可能性がある。プレビュー画面を表示する度にカウントされてしまうため、「UA-」で始まるコードが無いか、確認しておきましょう。無ければ問題なし。あれば、削除しましょう。

リアルタイムプレビューにGoogle Adsenseを表示する必要もない。Google Analytics同様に余計なインプレッションとしてカウントされてしまうので、「adsbygoogle」などで検索し、削除しましょう。

ソースコードを貼り付けただけではリアルタイムプレビューが発狂するほど重いはず。これはプレビュー画面が読み込み直す度に必要のないパーツを読み込んでいることが原因だ。

サイドバーやフッター、関連記事や新着記事など、書いている記事のリアルタイムプレビューには関係のないコードは徹底的に削除するべし！僕のMarsEditのリアルタイムプレビューと実際の表示を比較するとどれほど徹底的に削ぎ落としているか分かるだろう。

リアルタイムプレビューはあくまでも書いている記事を確認するためのもの。快適に使用するためには余計なものを消しましょう！

それでは皆さん、快適な「MarsEdit」ライフを！