MarsEditのプレビューを実際のデザインで表示させる方法

Macでブログを書くならリアルタイムにプレビューを表示してくれる「MarsEdit」がおすすめです。
ただしデフォルトではデザインが実際の表示ではありません。プレビューテンプレートを編集してデザインを合わせてみましょう。

リアルタイムプレビュー

実際にプレビューをしてみるとこうなります。

デザインも本番と同じになりますし、入力したものがすぐに反映されるのでかなり書きやすくなります。プラグインの設定は反映されないので注意。

下書きのソースコードをコピーする

まずブログの下書きからソースコードを取得します。

投稿を新規追加します。タイトルと本文には以下のように入力しておきます。

• タイトル→#タイトル#
• 記事内→#本文#

[下書きとして保存]をしたら[プレビュー]を表示します。

副クリックまたはoption+command+U(Chrome)で[ページのソースを表示]させ、ソースコードはすべてコピーしておきます。

テキストエディタで編集する

コピーしたソースコードはテキストエディタアプリにペーストします。

下書きで入力しておいた#タイトル#と#本文#を以下のようにすべて検索・置換します。

• #タイトル#→#title#
• #本文#→#body##extended#

編集したソースコードはコピーしておきます。

プレビューテンプレートを変更する

編集したブログを選択して[Edit Preview Template]をクリックします。

編集したソースコードを上書きします。

[Save Changes]をクリックして設定を保存します。

プレビューを確認すると実際のデザインになっていると思います。

不要なコードを削除する

サイドバーやフッターなどを表示したくない場合はその部分のコードを削除してしまいましょう。Google Analyticsのコードは削除しておいた方がいいですね。
コードが減るとその分プレビュー時の読み込みも速くなります。できる範囲で削除しておきましょう。