MarsEditのプレビューをサイトとほとんど同じにする方法

MarsEditを使うことのメリットはライブプレビュー（記事を書いている時にリアルタイムでサイトのプレビューが見れること）です。その時に自身のサイトと違う見た目ではプレビューの意味がありません。そこで、プレビューをサイトとほとんど同じにする方法を紹介します。

見出し

1 基本的なプレビューテンプレートを作成する方法①MarsEditの読み込み機能を使う
- 1.1 MarsEditのプレビュー画面から読み込む
2 基本的なプレビューテンプレートを作成する方法②自分でHTMLを作る
3 プレビューテンプレートを調整する
4 実際にプレビューしながら記事を書いて見る
5 最後に
6 環境
- 6.1 関連記事

基本的なプレビューテンプレートを作成する方法①MarsEditの読み込み機能を使う

MarsEditのプレビュー画面から読み込む

「Blog->Edit Preview Template…」からプレビュー画面を表示し、「Download Template…」をクリックします。

うまくいけばこれでブログから自動的にHTMLを読み込んでテンプレートを作成してくれます。

基本的なプレビューテンプレートを作成する方法②自分でHTMLを作る

方法①でうまくいかない場合は、自分で作成しましょう。

まず雛形となるページを作る

いつもやっている通りにWordPressの投稿から記事を作成します。この時にタイトルを「#title#」、コンテンツを「#body##extended#」と記載します。このタグはMarsEditがプレビューする時に使っているもので、ここで入力しておくと後でテンプレート編集が楽になります。

HTMLのソースコードをコピーする

雛形ページを「プレビュー」で表示します。私のサイトの場合はこんな感じになりました。

その後、プレビュー画面で、ブラウザがChromeであれば「Option+Command+U」でHTMLのソースコードが表示できますので、それをまるっとコピーします。

プレビューテンプレートを編集する

ここでやっとMarsEditを起動し、対象のサイトをクリックした状態で上部のメニューから「Blog -> Edit Preview Template…」を選択します。

そうするとデフォルトのテンプレーが表示されます。

このHTMLが書かれている箇所に、先程コピーしてきたサイトのHTMLソースコードを全て貼り付けます。これで概ね完成です。

プレビューテンプレートを調整する

単にHTMLを貼り付けただけだと、表示が少し崩れたり、重くてプレビューに時間がかかったりしてしまう場合があるため、調整が必要です。それでは、ポイントを押さえながら一つずつやっていきましょう。

ポイント1 必須のタグの調整

貼り付けたHTMLのタグが正しく設定されているかプレビューテンプレートを検索して確認します。

タイトルは「<title>#title#</title>」となっているか？
コンテンツは「<div>#body##extended#</div>」となっているか？

ポイント2 不要な要素の削除

使用しているWordpressのテーマによるのですが、だいたい「<nav></nav>」と「<header></header>」、Wordpressの管理者用の項目を表示している部分は削除しても影響が無いと思いますので、プレビューで確認しながら削除して下さい。

ポイント3 必要に応じてタグを追加する

今回最初に作ったプレビューテンプレートでは#title#、#body#、#extended#の3つのタグしか使っていませんでしたが、実はもっと種類があります。なので、プレビューに反映させたいものがあれば、必要に応じて使ってみて下さい。以下が一覧になります。

MarsEditのプレビューテンプレートで使えるタグ一覧

タグ	内容
#title#	タイトル
#url#	URL
#body#	コンテンツの内容
#categories#	カテゴリ
#tags#	タグ
#extended#	拡張
#excerpt#	抜粋
#weblogName#	プログ名
#weblogURL#	ブログURL

ちなみに、私の場合は#categories#と#tags#を追加で設定しています。

実際にプレビューしながら記事を書いて見る

私の場合はこんな感じの仕上がりになりました。ばっちりですね。

最後に

思い通りにライブプレビューできましたか？せっかくMarsEditを買ったのですから、ここまで設定しないと損ですよ。では、また。

環境

MarsEdit : 4.0.4
WordPress : 4.9.1

この記事を書いた人
最新の記事

Keid

カナダを拠点に活躍する（予定の）フルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、日本のIT業界のスピードの遅さに落胆し、海外への挑戦を決意。海外に行きたくても英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。（写真は旅行先のラスベガス）