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

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

sponsored link

リアルタイムプレビュー

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

リアルタイムプレビュー

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

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

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

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

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

[下書きとして保存]をしたら[プレビュー]を表示します。
タイトルと本文を入力、プレビューする

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

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

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

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

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

検索・置換します
編集したソースコードはコピーしておきます。

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

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

編集したソースコードを上書きします。
ソースコードを上書きする
[Save Changes]をクリックして設定を保存します。

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

不要なコードを削除する

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