Macアプリ

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

追記 2018年3月2日

現在、MarsEdit 4がリリースされています。14日間の無料お試し期間後も利用する場合、6,000円のアプリ内課金が必要です。

MarsEdit 4
価格: 無料

Macでブログを書く時に利用しているMarsEdit。高いですが、抜群の使いやすさで手放せません。

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

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

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

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

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

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

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

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

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

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

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

FC2ブログで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 4
価格: 無料
スポンサーリンク
スポンサーリンク

関連記事

  1. pixelmator

    Macアプリ

    Pixelmatorで写真の背景を取り除く方法

    撮影した写真の背景だけを取り除きたい事があります。そんな時には、以前紹…

  2. shiftit

    Macアプリ

    ショートカットで画面ウィンドウの大きさを綺麗に半分、1/4に出来るMacアプリ「Shiftit」

    Macで作業をする時に複数ウィンドウになることが多いです。このような時…

  3. keyboard-cleaner
  4. ウィズダム英和・和英2
  5. previewアプリ

    Macアプリ

    Macのプレビューアプリから矢印を書き加える方法

    レポートで使用する図に矢印を入れたいと思いました。MacアプリのSki…

  6. cyberduck

    Macアプリ

    FTPクライアントアプリ「Cyberduck」をインストールする方法

    FC2ブログ(有料版)を使用していて、サーバーにファイルを送受信できる…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

カテゴリー

  1. scansnap

    ScanSnap

    授業ノート・プリントはscansnapで整理を実行開始
  2. marsedit4

    ブログ運営

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

    OS X Mountain Lion 初アップデート(v10.8.1)が来ました…
  4. 文房具

    リサイクルレザーの新書用ブックカバーが気に入ったので紹介
  5. iPhoneアプリ

    iPhoneの通信量を確認するアプリ「通信量チェッカー」で7GB制限を監視する
PAGE TOP