モブログに挑戦したいと思いながらも新幹線で移動する時には、未だに MarsEdit を多用している @azur256 です。

MarsEdit ユーザの中にはプレビューに自分のブログのスタイルシートを適用している方も多いと思うのですが、これのスタイルシートの記載をちょっと工夫すると高速化できますよ、という内容をご紹介します。

MarsEdit のプレビューにスタイルを適用する方法

そもそも MarsEdit のプレビューにスタイルを適用するのは非常に簡単です。プレビューを表示すると、プレビューウィンドウの一番下に “Edit Template” というボタンがあるので、このボタンを押して表示されたウィンドウにスタイルを記述するだけ。



Edit Template を選ぶとテンプレートを編集できる画面が出てきます。デフォルトではこんなウィンドウのはず。



普通はココにこんな感じにCSSファイルへのリンクを書くと思います。



画像ではなくコードで書くとこんな感じ


あとは、本文の構造として指定されているDivのクラスなどをテンプレート側で合わせるだけ。これでも充分にプレビューに自分のサイトのスタイルを適用するという目的は達成できるのですが、もう一工夫すると更に良くなります。

スタイルをローカルで指定する

何をするのか、勘の良い方はお分かりになったと思いますが、スタイルをネットワーク越しではなく、ダイレクトにしてしましょうということ。

先ほどのスタイルシートの指定はこのようになっています。


これで確かにスタイルは指定されているのですが、適用されるスタイルがどこにあるかというと、自分のサーバにある CSS ファイルを読んでいるのです。つまり、ネットワーク越しに取ってきています。これだと、ネットワークの無いところで使う時に適用できなかったりします(キャッシュはしてくれているようなので、全くだめという訳では無さそうですが)。

そこで、この部分に bootstrap.min.css の中に書いてあることをそのまま記述します。



こうすることで、外部にアクセスしなくてもプレビュー画面の中だけでスタイルを解決することができるということです。

他にも沢山のファイルがあると思うのでそれぞれを展開します。手間が掛かりますのでコストと効果のトレードオフで判断すると良いと思います。私は新幹線や飛行機の中で書くことがあるので、ローカルに設定しています。
d

この仕組みのデメリット

この仕組みは良いことばかりではありません。CSS のコピーをローカルに持っているということは、サーバ側でカスタマイズをした場合には、その内容をローカルに反映させなければなりません。
したがって、頻繁にカスタマイズする方は、カスタマイズの反映のコストまで見込んで検討してください。

私はあまりスタイルはカスタマイズしないので、この方法で高速にプレビューが表示される環境を気に入っています。

よろしかったらお試しアレ

---

最後まで読んでいただきありがとうございます。

左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします

RSSリーダへの登録は こちら からどうぞ。