MarsEditのプレビューをブログデザインと同じようにしたい

色々なところで既に出ているMarsEditのプレビューを実際のブログと同じようにする手法。
1つ1つ微妙に書いてあることが違ったり不足している記述があったりしたので再度、自分が設定するときのために気づいたことをまとめてみました。

WordPress側での操作

この辺りはCross Mode Lifeさんで紹介している記事の通りです。

まずはタイトルに#タイトル#、本文に#本文#と入力します。そして下書きとして保存をクリックし、プレビューを押します。

mview001.jpg

するとこんな画面になるので右クリックしてページのソースを表示します。

mview002.jpg

このような画面が出てくるのですべて選択してコピーをします。
これでWordPress側での作業は終了です。

mview003.jpg

PC側での操作

HTMLの編集

さきほどコピーしたソースをテキストエディタに貼り付けます。
何もインストールしていなければPagesで大丈夫です。
これはPagesに貼り付けたところです。

mview004.jpg

置換を使って、「#タイトル#」を「#title#」、「#本文#」を「#body##extended#」に置き換えます。

mview006.jpg

GoogleAnalyticsのタグを追加している場合は削除する

こちらもCross Mode Lifeさんで紹介されていますが、GoogleAnalyticsのタグが入っていると、MarsEditのプレビュー画面を表示することで、GoogleAnalyticsへアクセスカウントが行くことになるそうです。

ということでこちらのタグもサクッと消しておきましょう。
先ほどの置換したソースに対して、さらに「UA-」あるいは自分のアナリティクスタグがわかっている人はピンポイントで検索してみましょう。

mview007.jpg

ちなみにUA-で検索するとこういうのがヒットするかもしれませんがこちらは削除しないようにしてください。

mview008.jpg

ALL IN ONE SEOのHTMLを削除

さらにALL IN ONE SEOを導入していると表示が崩れることがありますのでそちらを削除します。
このコメント行からコメント行までを丸々削除します。

mview009.jpg

不要なヘッダや広告を削除する

プレビューには不要であれば消してしまいましょう。

MarsEditへの反映

ここまで編集したHTMLをMarsEditへ反映します。
まず先ほどのHTMLを全て選択してコピーします。

次にMarsEditを開き、Blog→Edit Preview Templateをクリックします。
出てきた画面に先ほどコピーしたHTMLを貼り付け、SaveChangesをクリックすれば完成です。

mview010.jpg

このようにプレビュー画面で実際のブログデザインが出てくれば完成です。
この中では楽天のウィジェットが生きているままですね。

mview011.jpg

今日のまとめ

GoogleAnalyticsの内容が載っていなかったり、ALL IN ONE SEOの内容が載っていなかったりと自分がやりたいことがまとまっていなかったのでまとめておきました。
多くの人には既知の内容ですが、いつ再設定を行うかわからないので思い出せるようにしておくなり、編集したコードを保存しておくなどしておきたいですね。