MarsEditのプレビューでブログと同じ表示にする設定（主にFC2ブログ用）

2018-05-02 (水) 23:29　Mac Tips 　

MarsEditのプレビューでブログと同じ表示にする設定（主にFC2ブログ用）についてです。厳密には同じ表示ではなく似た表示となります。

今回紹介するのはFC2ブログ用ですが、他のブログでも使えるかもしれません。なおスタイルシート（CSS）についてある程度の知識が必要です。

ネットでググって出てくる設定はほとんどがワードプレス用で、FC2ブログのようなブログサービスには直接対応していないものばかりなので今回紹介することにしました。参考にしてみてください。

設定方法（主にFC2ブログ用）

1. ブラウザでFC2ブログの設定画面から「テンプレートの設定」を開きます。

2. 表示されている「スタイルシート編集」にカーソルを置き、全て選択しコピーします（コマンド+A→コマンド+C）。

180503 0003

3. MarsEditで「Edit Preview Template」からプレビューのテンプレートを開き、標準のテンプレートの下記の＃extended＃</div>の後に<style> </style>を追記します（下記の12〜13行目）。

<head>
<title>＃weblogName＃: ＃title＃</title>
</head>
<body style="margin:0; background-color:#FFF;">
<div style="padding:10px 20px; color:#DDD; background-color:#333; margin:0;">
<span style="font-size:2em;”>＃title＃</span>
</div>
<div style="padding:10px 20px;">
＃body＃
＃extended＃
</div>
<style>
</style>
</body>
</html>

4. 追記した<style> </style>の中に2.でコピーしたものを貼り付けます。

5. 貼り付けただけではうまくいかない場合があるので、クラス属性などの箇所を除去していきます。

例

　.entry_body h1 {

　　↓（entry_body属性を除去）

　h1 {

このようにすることで、プレビュー画面でブログに近い表示になりますね。