MarsEditのプレビュー画面を実際のデザインと同じにさせる方法

ブログを書くのに欠かせないモノと言えば「エディタ」です。ブラウザでも書けるっちゃ書けるけど、ミスって消えてしまったら1万文字書いてても一瞬でパーになるんでオススメしません。僕も昔に何度かやらかして、心折れたことがあります・・・

そういったトラブルを解消するために、オフラインで書いておいてコピペする方法もあるんですが、どうせならブログエディタを使って、オフラインで執筆してそのまま投稿するのが楽で良いです。

僕は4~5年前から『MrasEdit』という高機能なブログエディタを使ってて、「もうこれなしではブログは書けない」ってぐらい重宝しています。

MarsEditはMac専用のブログエディタ（多分）で、WordPress等と同期させて使います。画像なんかもドラッグ＆ドロップで挿入できたりしてメチャクチャ便利なんですが、やっぱり1番の特徴は何と言っても「プレビュー画面」です。

書いてる側からリアルタイムでプレビュー画面が更新されて、常にどんな感じになってるか確認しながら執筆することができます。

しかも自分のブログのデザインをそのまま反映できるから、まさに執筆後ページにアクセスして見えるそのままの状態を確認することができるんです。

分かりやすく言うと、WordPressで「プレビュー」ボタンを押すと表示される、あの画面を常にリアルタイムで確認できるってことです。

ってことで、このページではMarsEditのプレビュー画面のテンプレートを編集して、ブログのデザインをそっくりそのまま反映させる方法を解説していきます。

１．ブログのソースコードを取得する

まずはブログのデザインを反映させるために実際のソースコードを取得します。

1-1. ワードプレスで新規投稿ページを開く

ブラウザから自分のワードプレスにログインして「新規投稿」のページを開きます。

1−2. タイトルと本文に記述する

新規投稿ページが開けたら、タイトルと本文にそれぞれ
＃タイトル＃と＃本文＃と記述します。まぁ別に何でも良いんですけど、とりあえずその記事が表示されるページに同じ文字列が無ければOKです。

なので、おそらく過去に

＃タイトル＃
＃本文＃

って書いてることはないと思うんで、こうしておいてください。

　

＃タイトル＃と＃本文＃と入力

1−3. 「プレビュー」画面からソースコードをコピーする

タイトルに＃タイトル＃、本文に＃本文＃と記述できたら、プレビューボタンを押してプレビュー画面を開きます（たぶん新しいタブで開くと思います）。

開いたら、ページのソースコードを表示させます。Chromeだったら右クリックすれば「ページのソースを表示」ってのがあるからそれをクリックします。☟

プレビュー画面で右クリック

表示させたら、それをとりあえず全部コピーしてください。⌘＋Aで全選択して⌘＋Cでコピーです。

ソースコードを全部コピー

２．コピーしたソースコードを編集する

無事プレビューページのソースが取得できたら、次はそれを編集していきます。編集って言ってもやることは簡単なんで、心配いりません。

2-2. テキストエディターにコピーしたコードを貼り付ける

テキストエディターを開きます。これは何でも良いです。普段コーディングやプログラミングに使ってるテキストエディタでOK。開けたらさっきコピーしたソースコードをペーストしてやってください。

※Macに純正で入ってる『テキストエディット』を使う場合は、環境設定でフォーマットを「標準テキスト」に変更しておいてください。リッチテキストになっているとトラブルになります。

2-2. 置換を使ってタイトルと本文を書き換える

テキストエディタには必ず『置換』って機能があるから、それを使って、
＃タイトル＃と＃本文＃を書き換えます。

具体的には・・・

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

と、置換します。ち…か…ん…します（笑）

＃タイトル＃を#title#に置換

＃本文＃を#body##extended#に置換

置換できれば、またそのソースコードを全選択してコピーしておいてください。

３．コピーしたコードを貼り付けて完了

後はコピーし直したソースをMarsEditのプレビューテンプレートに貼り付ければ完了です。

3−1. MarsEditのテンプレート編集画面を開く

MarsEdhitを開いたら、編集したいブログ名を選択します。次に上部メニューバーの「Blog」から「Edit Preview template…」を選択してください。

メニューバーからBlog、Edit Preview Template…

そしたらテンプレートの編集ウィンドウが開くから、さっきコピーしたコードを貼り付けて、右下の「Save Changes」をクリックして終了です。

コードを貼り付ける

これであなたのブログのデザインがそのまんま反映されたプレビュー画面が表示されます。見た目通りに投稿できるから、常に完成図を見て字の大きさやら、色やバランスを確認しながら編集できます。

上級テクニック

これはある程度ウェブデザインの事を理解している人じゃないと危険なんだけど、僕はテンプレートファイルを極限までシンプルにして、本文内のCSSだけを確認できるようにしています。

っていうのも、ページのソースをそのままコピペしてしまうと、SNSのシェアボタンやら、FacebookやTwitterのタイムラインなんかもそのまま反映されて、重くなってしまうんですよ。

正直、執筆中に確認したいのは、文字の大きさやら、色、画像の配置ぐらいだから、ページをそのまま表示させる必要はないと思ってるんですよ。

だから僕の場合は、SNS系の表示からサイドバー、フッターなんかも全部消して、本文とそれに隣接する要素だけを表示させるようにしてます。あっ！あとロゴと。

こうすることでメチャクチャ軽くできるし、本文は実際の表示と同じにできるからオススメです。

極限までシンプルにしたプレビュー画面

実際に「ここを消して・・・」ってレクチャーできれば良いんですけど、ブログによってソースコードは全然違うから、具体的な説明はできないのが残念です。

まぁ勉強がてら、色々消していって確認するのもありですよ。訳わからん事になったら、上記の手順で、初めからやり直せばいいだけですから。

まとめ

MarsEditを使えば、簡単に実際のデザインをプレビューに反映できて、メッチャおすすめ。

でも、ページをそのまま表示するのは重くなるし必要ないから、出来るだけ無駄を削ぎ落として、シンプルにすると見た目も確認できるし軽くて軽快なのでとってもオススメです。

ぜひチャレンジしてみてください。