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

 

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

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

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

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする