MarsEditのプレビューを自分のブログと同じ見た目にする方法

Marsedit preview same style my blog
どうも、でこいです。

昨日に続きMarsEditネタを。

MarsEditはかなり便利なアプリですが、プレビューが自分のブログと同じになっていないと、改行とか文字の数なんかが実際と違っちゃって後から修正しなければならなかったりして面倒です。

そこで、今回はタイトルの通りMarsEditのプレビューを自分のブログと同じ見た目にする方法をご紹介。

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more. App
カテゴリ: ソーシャルネットワーキング
価格: ¥3,450


ソースコードを弄る

タイトルと本文だけの投稿を作ってプレビュー

新規投稿で、タイトルを「#タイトル#」、本文を「#本文#」にしたものを作ってプレビューします。
Marsedit preview same style my blog 1

するとまぁこんな感じになります。
Marsedit preview same style my blog 2

開発ツールを使って弄る

このままだとサイドバーとか色々邪魔なのでそれらを消していきましょう。
そんなソース、修正してやる!

ブラウザの開発ツールを起動させます。Chromeなら「command+option+i」ですね。

コードの部分にカーソルを動かすと、該当部分にこのように色がつきます
Marsedit preview same style my blog 3

邪魔な部分のコードを選択して、右クリックから「Delete Node」で削除!
Marsedit preview same style my blog 4

同じ要領でどんどんいらない部分を消していくとこんな感じに。
Marsedit preview same style my blog 5

HTMLの要素をコピー

HTMLの要素を選択して、右クリックから「Copy as HTML」でそのページのHTMLをコピーします。
Marsedit preview same style my blog 6

コピーしたものを適当なテキストエディタに貼付けます。

「#タイトル#」を「#title#」に、「#本文#」を「#body##extended#」にそれぞれ置換します。

Marsedit preview same style my blog 7Marsedit preview same style my blog 8

プレビューに適用させる

MarsEditを起動し、プレビューを表示させます。

下にある「Edit Template」をクリックしてテンプレートを表示させます。
Marsedit preview same style my blog 9

デフォルトはこんな感じ。
Marsedit preview same style my blog 10

ここに、先ほど編集した自分のブログのHTMLを丸っと貼付け。
Marsedit preview same style my blog 11

「Save Changes」をクリックすれば完了です!

 

プレビューを見てみるとこんな感じになってます
Marsedit preview same style my blog 12

自分のブログと同じ見た目になりました。

これで実際の見た目を頭に入れながら記事を書くことができます。

デフォルトより読み込むものが多くなるのでちょっと表示には時間がかかってしまいますが、それ以上に得られるものは大きいと思います。

MarsEditのプレビューと実際の表示の差にお悩みの方は試す価値ありですよ!

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more. App
カテゴリ: ソーシャルネットワーキング
価格: ¥3,450

関連記事

ブログをフォロー

コメントを残す