MarsEditでブログを書くことにした
WordPressでブログを始めるにあたってネットをいろいろと調べてみた結果、評判が高かったMarsEditをわたしも使ってみることにしました。（追記：現在は、FreewriteからWordpressへの連携を利用しています。詳細はこちらをどうぞ）特に気に入った点は以下の通りです。
サーバーの負荷の影響を受けない
わたしはさくらインターネットでサーバーを借りています。「スタンダード」というメニューを使っているのですが、WordPressで設定の変更や編集をやっていると、ときどき「負荷のためにセッションが切れました」というメッセージが出て更新がうまくできないときがあり、更新内容や変更内容を失ってしまうことがありました。
MarsEditを使えばクライアント側のソフトウェアなので、サーバーにどういう不具合が生じても下書きがMac上に残ることになります。
※ただし、この現象はSafariの場合によく発生し、Chromeだと今のところ起きたことがありません。もしかしたら、Safari特有の問題なのかも知れません。
プレビューがリアルタイム更新される
MarsEditは優れたプレビュー機能を持っていて、エディタで文字を書くとほぼリアルタイムでできあがりのイメージがプレビューで表示されます。直接WordPressで書いていると、いちいちプレビューボタンを押して表示を確認しなければなりませんし、上記の問題が発生するとプレビューすらできないという事態に陥ります。
MarsEditのプレビュー機能の限界？
上記の通り、MarsEditのプレビュー機能は素晴らしいのですが、そのままでは完全に本番サイトのイメージでのプレビューになりません。本番サイトと同じイメージにするためには、「Edit Preview Template」からプレビューのテンプレートを編集する必要があります。
ひとつめの方法
ネットで調べてみると一番多い方法は、ブラウザでタイトルを＃title＃、本文を＃body＃＃extended＃としたダミーの投稿を作成し（＃は表示上全角にしてありますが、実際に試すときは半角にしてください）、それをプレビューしたもののHTMLソースをコピーして上記のテンプレートに上書きする、という方法です。
これだと、確かにかなりの精度で本番サイトのデザインが再現されるのですが、CSSが複雑だったりHTMLが大きいとMarsEditのプレビューの更新に非常に時間がかかり、事実上リアルタイムのプレビュー更新が実現できません。その対応策として、上記のHTMLソースから必要の無いものを削除して（SEO対策で含まれているGoogle AnalyticsのトラッキングIDを削除するのは当然ですが）テンプレートを軽量化するといったことが上げられています。
本番サイトと同じデザインにするお薦めの方
もうひとつのやり方は、本番サイトで使用されているCSSをプレビューのテンプレートに反映させてしまうという方法です。これだと、必要なコードと不必要なコードを見極める必要もないですし、仮にオフラインであっても問題なくプレビューが可能になります（ひとつめの方法だと、CSSファイルへのリンクがテンプレートに記述されているために、オフラインだとCSSファイルを読むことができません）。
- ブラウザで「テーマの編集画面」を開き、スタイルシート（style.css）を表示させます（子テーマを使っている場合は、親テーマのスタイルシートを開いてください）。この内容を全てコピーします。
- MarsEditで「Edit Preview Template」からプレビューのテンプレートを開き、標準のテンプレートに以下の通り追記します。追記する文字列は＜style＞と＜/style＞です（＜＞は半角にしてください）。
<head> <title>＃weblogName＃: ＃title＃</title> </head> <body style="margin:0; background-color:#FFF;"> <div style="padding:10px 20px; color:#DDD; background-color:#333; margin:0;"> <span style="font-size:2em;”>＃title＃</span> </div> <div style="padding:10px 20px;"> ＃body＃ ＃extended＃ </div> <style> </style> </body> </html>
- ＜style＞と＜/style＞の間に、1でコピーした内容を貼り付けます。
これで本番サイトと完全に同じとまでは言えませんが、ほぼ同じデザインで、しかもストレスのないリアルタイムプレビュー更新が実現できます。
