MarsEditのプレビューで自分のブログデザインを完全に反映させる方法

MarsEdit

ブログはMacのMarsEditで書いています。MarsEditはリアルタイムにプレビューしてくれるのでブログ書きがとても捗ります。

ただデフォルトだとプレビュー画面が真っ白なので公開時のイメージがつかみにくい!

せっかく新しいブログテーマにしてカスタマイズもちょっとしたので、その見た目でプレビュー出来たらと思っていました。

と、言うことでブログデザインをMarsEditへ「完全に!」反映させる方法がググってみたらあるようなので、早速試しました。

MarsEditのTemplateをカスタマイズ

MarsEditプレビュー 03 20140828 232157

MarsEditのプレビューウインドウの下の方に「Edit Template」とあるのでクリックします。

MarsEditプレビュー 06 20140828 232157

Templateのエディットウインドウが開きます。HTMLが書かれています。

MarsEditプレビュー 02 20140828 232157

<head>〜</head>の間に、自分のブログのCSSファイルへのリンクを記載します。

MarsEditプレビュー 05 20140828 232157

「#body#」「#extended#」部分が本文です。この部分を先ほどリンクした自分のブログのCSSが反映されるように階層化してあげます。ブログの本文が書かれている階層と同じくなるようにすればOKです。

MarsEditプレビュー 01 20140828 232157

これで、ブログの見た目のままのプレビューが出来るようになります。

メリットとデメリット

この方法のメリットは

  • ブログデザインを修正してもMarsEditへも即反映される

デメリットは

  • インターネットに繋がっていないとデザインが反映されない

ということです。

もし、ローカル環境にWordpressを構築しデザインのカスタマイズをしているのであれば、ローカル環境のCSSにリンクする事でネット環境がなくてもデザインを反映させてブログを書くことが可能になります。

参考:WordPressをローカルにインストール!参考になった3つのサイト | Taka’s Life

まとめ

やっぱり、プレビューもデザインされていたほうが公開時のイメージも掴みやすいですし、何より書いていて楽しいですよ!

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

こちらを参考にしました:MarsEditのプレビュー表示をカスタマイズする方法 | サイトフレームワークノート

コメント

タイトルとURLをコピーしました