MarsEditのプレビュー表示をWordPressテーマと一致させる方法

双子の女の赤ちゃん

MarsEditプレビュー画面を、連携させているWordPressのテーマと同じデザインにする方法をまとめています。

もちろん、MarsEditのデフォルトプレビュー画面でも使えなくはないですが、Wordpressで使用しているCSS(例えば赤字や蛍光ペンなどテキスト装飾など)は、反映されません。これでは、いちいちWordpressに記事投稿した後でしか、正確な更新結果がわかりません。

MarsEditとWordpressのプレビュー画面を一致させておくと、Wordpressへ記事をアップロードする前に、MarsEditのプレビュー画面上で正確な反映結果を確認することができます。

WordPressのプレビュー画面ソースコードをコピーする

Marsedit wordpress theme preview 01

最初にWordpressで記事を作成し、その記事のソースコードをコピーしてくる必要があります。

ソースコードコピー用の記事には、タイトルに「#title#」、本文のところに「#body##extended#」と入力してください。ビジュアル編集画面ではなく、テキスト編集画面で入力してください。

 

Marsedit wordpress theme preview 02

ソースコードコピー用の記事が作成できたら、プレビューボタンを押してプレビュー画面を表示させます。

 

Marsedit wordpress theme preview 03

Google Chromeを使っている場合、「表示>開発/管理>ソースを表示」でソースコードを表示させることができます。

 

Marsedit wordpress theme preview 04

ソースコードを表示させると、ズラズラーっとマトリックスのオープニングっぽい文字文字した画面が表示されます。

この画面に表示されているテキストを全てコピーします。Control+Aでテキストを全選択したあと、Control+Cで全コピーできます。

 

MarsEditのプレビュー画面にソースコードをコピペする

Marsedit wordpress theme preview 05

MarsEditでプレビュー画面をカスタマイズします。

「Blog>Edit preview template」をクリックします。

 

Marsedit wordpress theme preview 06

MarsEditのプレビューテンプレートが表示されます。ここに表示されているテキストを全て削除した後、さきほどコピーしたWordpressのソースコードをペーストします。

ペーストできたら、「Save Changes」をクリックします。

 

Marsedit wordpress theme preview 07

MarsEditでプレビューしてみてください。プレビュー画面が正確に変更されているでしょうか?Wordpressのテーマと同じになっていればOKです。

最後に、プレビューするたびGoogleアナリティクスにカウントされてしまわないよう、Googleアナリティクスのコードを削除しておきましょう。

 

Googleアナリティクスのコードを削除する

Marsedit wordpress theme preview 08

All in one SEOプラグインにGoogleアナリティクスコードを入力している場合であれば、All in one SEOのタグを削除すればいいだけです。

MarsEditの「Blog>Edit preview template」からプレビューテンプレート編集画面を表示し、All in one SEOタグで囲まれた部分を削除し、Save Changesをクリックします。

これで何度プレビューしてもアクセス数がカウントされることはありません。

 

以上で「MarsEditのプレビュー表示をWordpressテーマと一致させる方法」は完了です。お疲れ様でした!

MarsEditでブログ管理すると記事を書くスピードが格段に上がります。もし使っていないなら、ぜひ一度お試しあれ。

MarsEdit – for WordPress, Tumblr, Blogger, etc.