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

Macでブログを書くならリアルタイムにプレビューを表示してくれる「MarsEdit」がおすすめです。
ただしデフォルトではデザインが実際の表示ではありません。プレビューテンプレートを編集してデザインを合わせてみましょう。
sponsored link
リアルタイムプレビュー
実際にプレビューをしてみるとこうなります。
デザインも本番と同じになりますし、入力したものがすぐに反映されるのでかなり書きやすくなります。プラグインの設定は反映されないので注意。
下書きのソースコードをコピーする
まずブログの下書きからソースコードを取得します。
投稿を新規追加します。タイトルと本文には以下のように入力しておきます。
- タイトル→#タイトル#
- 記事内→#本文#
[下書きとして保存]をしたら[プレビュー]を表示します。
副クリックまたはoption+command+U(Chrome)で[ページのソースを表示]させ、ソースコードはすべてコピーしておきます。
テキストエディタで編集する
コピーしたソースコードはテキストエディタアプリにペーストします。
下書きで入力しておいた#タイトル#と#本文#を以下のようにすべて検索・置換します。
- #タイトル#→#title#
- #本文#→#body##extended#
編集したソースコードはコピーしておきます。
プレビューテンプレートを変更する
編集したブログを選択して[Edit Preview Template]をクリックします。
編集したソースコードを上書きします。
[Save Changes]をクリックして設定を保存します。
プレビューを確認すると実際のデザインになっていると思います。
不要なコードを削除する
サイドバーやフッターなどを表示したくない場合はその部分のコードを削除してしまいましょう。Google Analyticsのコードは削除しておいた方がいいですね。
コードが減るとその分プレビュー時の読み込みも速くなります。できる範囲で削除しておきましょう。