みなさんこんにちは。先日ブロガーに大人気のMarsEditを導入したのですが、早速MardEdit使いこなしとして、リアルタイムプレビューを自分のブログデザインと合わせてみました。これがあると、自分のブログのデザインで確認しながら記事を書くことができるので、かなり便利です。あまり知識のない私でもできたので、みなさんにもできると思います。
ダミー記事の投稿とソースの取得
まずは、ダミー記事をブログにアップして、そこからソースコードを取得しましょう。ダミー記事はこんな感じでいいのではないでしょうか。今回はタイトルを「テストタイトル」、本文を「テスト内容」としてあります。
Google Chromeであれば、下のようにすぐにソースコードを表示することができますが、他のブラウザでも出来るでしょう。Chrome以外のやり方は調べてください（笑）
表示されたソースコードをすべてコピーして、メモ帳か何かにペーストしてください。ここで、ソースコードを表示する時にWordPressでログインしたままにしてしまうと、上部の黒い管理バーもプレビューに含まれてしまうので、ログアウトしてからの方がいいと思います。
ソースコードの修正
メモ帳にペーストしたら、ソースコード内の単語の置換作業を行います。以下の様にタイトルにした文字列（今回は”テストタイトル”）を#titleにして、
本文の文字列（今回は”テスト内容”）を#body##extended#に置換します。
MarsEditに設定
置換が終わったら、そのソースコードをコピーして、MardEditのBlog→ Edit Preview Templeteを開いて、そこにペーストします。
コピペですね。
これでリアルタイムプレビューに自分のブログのデザインが反映されていると思います。いかかでしょう？
終わりに
MarsEditの売りの一つがこのリアルタイムプレビューだと思っていたので、それを実現できて一つ満足です！もっと難しいかと思いましたが、意外と簡単にできたので、拍子抜けしちゃいました。
今回参考にしたサイト様はこちらです。
記事はいかがでしたでしょうか？当ブログの管理人うらまつです。海外旅行とジャグリングが好きでこんなことやっております。ご覧になっていただければ嬉しいです。
