2014.07.15
Macでブログを書く時に利用しているMarsEdit。高いですが、抜群の使いやすさで手放せません。
このMarsEditは2年ほど前から利用しているみたいですね。はるか彼方の記憶。。。
MarsEditの凄い所にリアルタイムプレビューがあります。
エディタで記述したものがリアルタイムでプレビューに反映されます。
書きながら見た目を確認する事が出来るので、この機能だけで一目惚れして購入したほどです。
さらにさらに言えば、MarsEditが使いたいがためにMacを購入したほどです。
このリアルタイムプレビューは自分のブログのCSSを適用できるということは1年前くらいに知りました。
しかし試した所うまくいかなくて挫折しました。
それから何年経った事でしょう。1年ですね。
webサーフィンして色んなリンクをたどっていた所、以下の記事にたどり着きました。
MarsEditのプレビューを簡単に自分のブログのデザインにする方法 | 経験知
そこで、もう1度挑戦してみよう!ということになり、MarsEditで自分のブログのCSSが適用できるか試してみました。
試行錯誤すると、概ね自分のブログのプレビューに出来ましたので、その過程を残しておこうと思います。
FC2ブログでMarsEditを利用している人向けのエントリーとなります。


▲FC2ブログで新規作成を選択し、タイトルに「#title#」、本文に、「#body##extended#」と入力し、プレビューを選択します。

▲すると、プレビューが表示されます。このブログではページが崩れています。とりあえず気にせず、Google Chromeにおいて右クリックして「ページのソースを表示」を選択します。

▲ソースを全コピーします。
続いて、MarsEditを起動します。

▲ブログ名を右クリックし、「Edit Preview Template」を選択します。

▲ここに、先ほど全コピーしたページのソースを貼付けます。
貼付けたら、少し編集を加えます。具体的に行った編集は以下の通りです。
いらないタグなどは、ここで除いてしまいましょう。

▲変更が完了したら、「Save Changes」を選択します。
これで、自分のブログがおおよそ反映されました。

▲正直、プレビューとは思えません。実際のページかと勘違いしてしまうほど。
でも、一部問題もありました。

▲それは、リンク(aタグ)が黒塗りになってしまうことです。これは直し方がよくわからないので、放っておくことにします。
ページ上部右側はリンクタグを削除し、文字だけにして見栄えをよくしました。
明らかにプレビューできた方が書きやすいです。
1年ぶりにトライしてみるキッカケをつくってくれたエントリに感謝です。
MacのMarsEdit・テキストエディットで特定のHTMLタグを削除する方法
Macで現在の年月日時刻を簡単に取得する方法
Macなら必須!コマンドランチャーアプリ Alfredの使い方
Macのブログエディタ「MarsEdit」で文字を置換する方法
Macでブログを書くならばMarsEditだという理由を熱く熱く書く
ブログ執筆アプリMarsEditでくらった意外な制限
MarsEdit用AppleScriptを使って作成したリンクが別タブで開くようにした
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました
▼このカテゴリの最新記事
このMarsEditは2年ほど前から利用しているみたいですね。はるか彼方の記憶。。。
MarsEditの凄い所にリアルタイムプレビューがあります。
エディタで記述したものがリアルタイムでプレビューに反映されます。
書きながら見た目を確認する事が出来るので、この機能だけで一目惚れして購入したほどです。
さらにさらに言えば、MarsEditが使いたいがためにMacを購入したほどです。
このリアルタイムプレビューは自分のブログのCSSを適用できるということは1年前くらいに知りました。
しかし試した所うまくいかなくて挫折しました。
それから何年経った事でしょう。1年ですね。
webサーフィンして色んなリンクをたどっていた所、以下の記事にたどり着きました。
MarsEditのプレビューを簡単に自分のブログのデザインにする方法 | 経験知
そこで、もう1度挑戦してみよう!ということになり、MarsEditで自分のブログのCSSが適用できるか試してみました。
試行錯誤すると、概ね自分のブログのプレビューに出来ましたので、その過程を残しておこうと思います。
FC2ブログでMarsEditを利用している人向けのエントリーとなります。

スポンサーリンク
MarsEditのプレビューで自分のブログのHTML,CSSを適用させる方法

▲FC2ブログで新規作成を選択し、タイトルに「#title#」、本文に、「#body##extended#」と入力し、プレビューを選択します。

▲すると、プレビューが表示されます。このブログではページが崩れています。とりあえず気にせず、Google Chromeにおいて右クリックして「ページのソースを表示」を選択します。

▲ソースを全コピーします。
続いて、MarsEditを起動します。

▲ブログ名を右クリックし、「Edit Preview Template」を選択します。

▲ここに、先ほど全コピーしたページのソースを貼付けます。
貼付けたら、少し編集を加えます。具体的に行った編集は以下の通りです。
- GoogleAnalytics(アクセス解析)用のタグを削除
- Chartbeat(リアルタイムアクセス解析)用のタグを削除
- GoogleAdsense(広告)のタグを削除
- サイドバーのデザインの崩れを修正
いらないタグなどは、ここで除いてしまいましょう。

▲変更が完了したら、「Save Changes」を選択します。
これで、自分のブログがおおよそ反映されました。
MarsEditでのプレビュー画面
変更後のプレビューは以下のようになりました。
▲正直、プレビューとは思えません。実際のページかと勘違いしてしまうほど。
でも、一部問題もありました。

▲それは、リンク(aタグ)が黒塗りになってしまうことです。これは直し方がよくわからないので、放っておくことにします。
ページ上部右側はリンクタグを削除し、文字だけにして見栄えをよくしました。
まとめ
書いてからプレビューが反映されるまでに時間がかかることもなく、快適にリアルタイムプレビューが行えます。明らかにプレビューできた方が書きやすいです。
1年ぶりにトライしてみるキッカケをつくってくれたエントリに感謝です。
![]() | MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. ![]() | |
カテゴリ: | ソーシャルネットワーキング | |
価格: | ¥4,000(記事掲載時点) | |
バージョン: | 3.6.5 | |
リリース日: | 2010/12/16 | |
AppStoreで詳細をみる |
関連記事







スポンサーリンク
過去記事セレクション
当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
▼このカテゴリの最新記事
- Macのプレビューアプリから矢印を書き加える方法
- AppCleanerを利用してMacアプリをアンインストールする方法
- Mac版Textwellのアクションにショートカットを設定する方法
- Macの複数画像一括リネームアプリ「Rename It」の使い方
- Mac版TextwellでiPhoneのアクションをインポートする方法
- Mac版Textwellが登場!基本的な機能を紹介!
- Macで複数画像を一括リサイズ出来るTh-MakerXの使い方
- MacアプリSkitchで任意の大きさにリサイズする方法
- Macで明るさをもっと暗くするためのアプリ「Shady」
- MacでアウトラインをまとめるならTreeアプリがオススメ!
- MarsEditのプレビューで自分のブログのHTML,CSSを適用させる方法
- Pixelmatorで角丸アイコンを作成する方法
- Pixelmatorで写真の背景を取り除く方法
- Excelデータを綺麗にグラフ化できる「MjoGraph」をダウンロードする方法
- FTPクライアントアプリ「Cyberduck」をインストールする方法
Relate Entry
Entry TAG