2017/09/22

マーズエディット(MarsEdit)のプレビュー画面にブログのCSSを完全反映させるやり方

 

この記事を書いている人 - WRITER -
和歌山で「地方美容師」の活きる道を開拓したいと思ってます。美容師という概念ではなく多方面にも動いていこうとしてます! 個人メディアも運営していて、ブログも毎日更新してます、見てくれると嬉しいです。

こんにちは、岸(@bwave_kishi)です。

どうもAppleをこよなく愛しAppleにたよりブログを書き続けている美容師です。普段はMacBookかiPhoneでブログを書いているのですが、MacBookで書いている時はマーズエディットというアプリを8割ほど使用していて、ブラウザではほとんど書いていることはありません、最終のチェック程度です。

なぜ8割もアプリで書いているのかというと「書きながらプレビュー画面が見れる」という究極のヌルヌルテキストエディットだからです。

↑こんな感じです、現在書いている最中のリアルな状態です。これがあるおかげでかなりブログのスピードが上がり効率化に成功しています。むしろこれがなければMacを使う必要はあまりないと思います。(ブログに関して)

しかし、設定をしなければCSSは反映されていないので、

こんな雑な感じです。これでもないよりはマシですが、完全に反映させた方がとても書きやすいですね。

なので、今回はマーズエディットのプレビュー画面を自分のブログに完全反映させるやり方をメモとして残しておきます。

メモメモ。

マーズエディットのプレビュー画面にCSSを完全反映させるやり方

するべきことは2つあります。

  1. 自分のブログのCSSソースを入手する
  2. マーズエディットに設定する

この2つになります、結構簡単なので慣れたら5分でできるようになります。

まずは下準備から

まずは、WordPressブラウザでタイトル部分に「▼タイトル」と入力、

本文部分に「▼本文」と入力します。▼は結構大事です。

保存はしなくても良いので、プレビュー画面にいきます。

そして自分のブログのソースを全部まるまるコビーします。

それを、テキストエディットにペーストしておきます。ここでは先程の▼タイトルを検索して置き換えます。

「▼タイトル」を検索して「#title#」に置き換えます。空白があると完全に反映されないので、注意してください。

次に「▼本文」を検索して「#body##extended#」に置き換えます。これでひとまず準備は完了です。

テキストエディットをまるまるコピーしましょう。

マーズエディットの設定

ここでは簡単で下準備でつくったソースをペーストするだけです。

設定にあるBligにある「Edit Preview Template」にいきます、そこにプレビューソースがあるので全て削除して、さきほどのソースをまるまるペーストすれば完成です。

一度、記事を作成してみると、自分のブログに完全反映させることができました!

この機能がはめちゃくちゃ便利で、もはやなくてはならないものになっています。モブログもかなり便利になり、手軽さを考えるとiPhoneで書いてしまうのですが、気合の入った記事を書く時は、どうしてもマーズエディットに頼ってしまいます。

かなり便利なこの機能、使い出すと魅力が分かると思うので、ぜひ試してみで下さい。

ぜひ、参考に。

運営者のプロフィール

とりあえず読むべき記事10選

 




チェックエントリー

シャンプー剤の教科書

くせ毛の教科書

スタイリング剤

洗い流さないトリートメント



 
この記事を書いている人 - WRITER -
和歌山で「地方美容師」の活きる道を開拓したいと思ってます。美容師という概念ではなく多方面にも動いていこうとしてます! 個人メディアも運営していて、ブログも毎日更新してます、見てくれると嬉しいです。

Copyright© きしろぐ , 2017 All Rights Reserved.