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

OMP_Template_eye

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

Preview Markup in Browserテンプレートの編集

OMP_Preview_008

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

テンプレートの場所

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

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

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

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

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

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

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

設定の変更

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

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

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

変更結果

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

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

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

まとめ

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

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

Sublime Text – Download

スポンサーリンク







シェアする

フォローする