HOME   »   Macアプリ  »  MarsEditのプレビューで自分のブログのHTML,CSSを適用させる方法
RSSフィード
Macでブログを書く時に利用しているMarsEdit。高いですが、抜群の使いやすさで手放せません。

このMarsEditは2年ほど前から利用しているみたいですね。はるか彼方の記憶。。。


MarsEditの凄い所にリアルタイムプレビューがあります。

エディタで記述したものがリアルタイムでプレビューに反映されます。

書きながら見た目を確認する事が出来るので、この機能だけで一目惚れして購入したほどです。

さらにさらに言えば、MarsEditが使いたいがためにMacを購入したほどです。

このリアルタイムプレビューは自分のブログのCSSを適用できるということは1年前くらいに知りました。

しかし試した所うまくいかなくて挫折しました。

それから何年経った事でしょう。1年ですね。

webサーフィンして色んなリンクをたどっていた所、以下の記事にたどり着きました。
MarsEditのプレビューを簡単に自分のブログのデザインにする方法 | 経験知

そこで、もう1度挑戦してみよう!ということになり、MarsEditで自分のブログのCSSが適用できるか試してみました。

試行錯誤すると、概ね自分のブログのプレビューに出来ましたので、その過程を残しておこうと思います。

FC2ブログでMarsEditを利用している人向けのエントリーとなります。
marsedit

スポンサーリンク

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

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

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

marsedit-css
▲ソースを全コピーします。

続いて、MarsEditを起動します。

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

marsedit-css
▲ここに、先ほど全コピーしたページのソースを貼付けます。

貼付けたら、少し編集を加えます。具体的に行った編集は以下の通りです。
  • GoogleAnalytics(アクセス解析)用のタグを削除
  • Chartbeat(リアルタイムアクセス解析)用のタグを削除
  • GoogleAdsense(広告)のタグを削除
  • サイドバーのデザインの崩れを修正
特に、アクセス解析を残したままにしてしまうと、MarsEditで編集するたびにアクセスされる可能性が高まります。(特に、外出先で編集する場合)

いらないタグなどは、ここで除いてしまいましょう。

marsedit-css
▲変更が完了したら、「Save Changes」を選択します。

これで、自分のブログがおおよそ反映されました。

MarsEditでのプレビュー画面

変更後のプレビューは以下のようになりました。

marsedi-css
▲正直、プレビューとは思えません。実際のページかと勘違いしてしまうほど。

でも、一部問題もありました。

marsedi-css
▲それは、リンク(aタグ)が黒塗りになってしまうことです。これは直し方がよくわからないので、放っておくことにします。

ページ上部右側はリンクタグを削除し、文字だけにして見栄えをよくしました。

まとめ

書いてからプレビューが反映されるまでに時間がかかることもなく、快適にリアルタイムプレビューが行えます。

明らかにプレビューできた方が書きやすいです。

1年ぶりにトライしてみるキッカケをつくってくれたエントリに感謝です。

MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. App
カテゴリ:ソーシャルネットワーキング
価格:¥4,000(記事掲載時点)
バージョン: 3.6.5
リリース日:2010/12/16
AppStoreで詳細をみる


関連記事

MacのMarsEdit・テキストエディットで特定のHTMLタグを削除する方法

Macで現在の年月日時刻を簡単に取得する方法

Macなら必須!コマンドランチャーアプリ Alfredの使い方

Macのブログエディタ「MarsEdit」で文字を置換する方法

Macでブログを書くならばMarsEditだという理由を熱く熱く書く

ブログ執筆アプリMarsEditでくらった意外な制限

MarsEdit用AppleScriptを使って作成したリンクが別タブで開くようにした

スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
MarsEdit   ブログ   MacApp  
Comment
Trackback
Comment form
スポンサードリンク
楽天
2014年7月現在使用しているブログ用iPhoneアプリ16個
iPhoneホーム画面
人気エントリー
先月の人気記事
第1位(→0)
iPhoneにある写真(画像)をセブンイレブンで現像する方法

第2位(→4)
総計290個以上掲載!iPhoneアプリのURLスキーム一覧

第3位(↗︎2)
【iPhone】秘密の質問を忘れたのでAppleのサポートに電話してリセットしてもらった

第4位(↘︎2)
理系大学生なら絶対覚えておくべきWordの数式のショートカット

第5位(↘︎1)
iPhoneのパスコードを10回間違えると再入力までに60分必要

第6位(↘︎1)
SoftbankのiPhone4s→iPhone5sへ機種変更した時の料金試算

第7位(↗︎3)
iPhoneの画面を録画できるMac・Windowsアプリ「Reflector」のインストール方法・使い方

第8位(↘︎4)
iPhone/iPadのパスコードロックを10回間違えた時のデータ消去機能を実行してみた

第9位(↗︎4)
xRecというiPhone画面を録画できるアプリが再び登場!

第10位(↘︎2)
【iPhone】秘密の質問を忘れて間違えすぎるとApple IDが8時間ロックされる

第11位(→0)
iPhoneの写真を1枚5円で現像出来るネットプリントジャパン!

第12位(→0)
パラメータ有りiPhoneアプリのURLスキーム一覧

第13位(↗︎30)
青春18切符で東京から大阪へ~東海道線を突っ走る旅(1日目)

第14位(↗︎55)
青春18切符を利用した旅行時に活躍したiPhoneアプリのまとめ

第15位(↗︎16)
セリアでiPhoneの防水ケースを購入!風呂場で使うときに便利!

全記事表示リンク
サイト内検索
プロフィール

nasimeya

Author:nasimeya
Twitterアカウント→@nasimeya
iPhone5S/iPad3/iPad mini/MacBookAir13inch/Nexus5を現在所持しており、アプリとか紹介を主にしています。LAMYなど文房具もちょくちょく。ブログは楽しく書くことを心掛けております。

日にの観察ブログの更新は停止しています。

新しいブログはこちら⇒なしめやブログ(http://nasimeyablog.com

2013年5月現在利用している主力iPhoneアプリ26個
iPhoneホーム画面
2013年5月現在利用しているブログ用iPhoneアプリ13個
iPhoneホーム画面
iPad mini用おすすめアプリ8選

PAGE TOP