OmniMarkupPreviewerのブラウザプレビューテンプレートを自分のブログに合わせて調整

デフォルトでも便利に使えますが、自分のブログテンプレートに合わせて横幅だけでも調整したいなと思い調べてみました。

まずは、OmniMarkupPreviewerのブラウザプレビュー用テンプレートがどこにあるか調べます。
テンプレートとは言えブラウザで表示されるのですから、HTMLとCSSファイルがあるはずです。

Sublime Text => Preferences => Package Settings => OmniMarkupPreviewer => Settings – Default を選択して開きます。

開いた設定ファイルの中から、テンプレートを指定する項目を見ると、HTMLファイルのファイル名が分かります。

設定ファイルに書かれている保存場所は、ユーザー独自設定を保存する場所で、デフォルトのHTMLファイルは別の場所にあります。
保存場所は以下になります。

user/ユーザー名/ライブラリ/Application Support/Sublime Text 3/Packages/OmniMarkupPreviewer/templates/

テンプレートHTMLファイルの中から、CSSファイルの情報を確認します。

user/ユーザー名/ライブラリ/Application Support/Sublime Text 3/Packages/OmniMarkupPreviewer/Public/

単純な見た目の変更だけですので、基本的にHTMLファイルは触らず、CSSを編集します。

当然ですが、デフォルトの中身は普通のCSSファイルです。
マークダウン記法で使ってる分には、まず使わないタグもありますが、余計な不具合を避けるために、コピーしてベースとして使います。

デフォルトでは、min-width 1020px に設定されていました。
ブログ用には、値が少し大きすぎますね。

自分のブログ設定に合わせて、width 500px の固定設定にしました。

設定前と設定後の変化は、こんな感じになりました。

変更前

MacBook Airで左右分割表示にすると、横に収まらずスライドバーが出ていました。

変更後

幅 500px 固定で、表示されるようになりました。

高機能な SublimeText 3 ですが、ブログエディタとして便利に使うには、いくつかの機能追加と設定変更は必須ですね。
若干手間ではありますが、手を入れれば入れるほど使い易さが増していき、自分だけのエディタになっていく感じがします。

ブログエディタとして使っていると、プレヴュー機能って意外と思っている以上に大事になってきています。
リアルタイムプレヴューができるって幸せですね。

ブログエディタとして有名なものはいくつかありますが、私はSublimeTextを使っています。本来はコードエディタとして有名なSublimeTextですが、パッケージが豊富に揃っているので、ブログエディタとしても設定次第で十分使いやすくなり

created by Rinker