1. ホーム > 
  2. Webサイト制作 > 
  3. サイト制作のヒント > 
  4. MarsEditのプレビュー表示をカスタマイズする方法

MarsEditのプレビュー表示をカスタマイズする方法

今までこのブログの更新は、ウェブブラウザを使って更新をしていましたが、最近MarsEditというブログエディタを使って更新しています。 これが非常に便利なので、 […]

  • 2015/7/5
  • 2012/5/27

今までこのブログの更新は、ウェブブラウザを使って更新をしていましたが、最近MarsEditというブログエディタを使って更新しています。
これが非常に便利なので、ぜひMacを使っているブロガーさんには使ってほしいなと思います。
インターフェイスは残念ながら英語なのですが、日本語のブログを更新しても「文字化け」などもなくきちんと使用する事ができます。

プレビュー表示をカスタマイズする

さてMarsEditの特徴に「リアルタイム表示されるプレビュー機能」があります。
文字通り、書いているそばからプレビューが書き変わっていく機能なのですが、このプレビュー画面は標準では(当然ですが)各自のブログの表示スタイルにはなっていません。

プレビュー表示がブログの表示スタイルと一致していると、いちいちブラウザでの確認などを行わずとも、画像の位置や文章の改行などをコントロールすることができるので、とっても便利です。

それでは具体的にプレビュー表示をカスタマイズする方法をご紹介していきましょう。

  • まずは記事のプレビュー画面を開き、画面の下にある「Edit Template」ボタンをクリックします。
  • 別のウィンドウでプレビュー表示のHTMLが表示されますので、ブログで使っているCSSファイルへのリンク部分を、<head>内にコピーします。
  • 「#body#」の部分がブログの本文ですので、この周りを実際のブログと同じようにタグで階層化します。
    当ブログでは、本文は以下の3つのidとclassを使ったdivタグで階層化されていますので、それを
    MarsEditのプレビュー用HTMLでも再現します。

    <div id=”main-contents”>
    <div class=”contents”>
    <div class=”post”>
    #body#(ここに本文が入る)
    </div>
    </div>
    </div>

    最後のHTMLの階層化を再現しておかないと、CSSがうまく適用されずブログの表示スタイルが完全に再現されない可能性があります。

カスタマイズした時の注意点

MarsEditを使えばオフラインでもブログ記事を書くことができますが、この方法を使った場合はオフラインの時にはブログの表示スタイルは再現できません。
オフラインの場合にはCSSの読み込みができないからです。
もしオフラインでブログを書く機会が多いという人は、Mac本体のWebサーバを起動しておいて、CSSファイルを本体に保存しておきましょう。
これでどこに行ってもブログの表示スタイルを再現しながら記事が書けるはずです。

「役にたった」と思ったらシェアお願いします