HOME   »   Sublime Text  »  OmniMarkupPreviewerのCSSを編集する方法
RSSフィード

前回の記事までで、Sublime Text 2のリアルタイムプレビュープラグイン「OmniMarkupPreviewer」の使い方について紹介しました。

OmniMarkupPreviewerのcommand+ option+ Oでプレビュー出来るのは良いのですが、もう少しプレビュー画面を自分のブログと近づけたいです。

例えば、赤い太文字や、キーボードコマンドにしたい時には、classを指定しています。

そこで今回は、OmniMarkupPreviewerでプレビューしたときのCSSを編集する方法について紹介します。

sublimetexticon
スポンサーリンク

OmniMarkupPreviewerのCSSを編集する方法

OmniMarkupPreviewer-css

▲OmniMarkupPreviewerをインストールして、何も設定しないままだと、文字をclass指定しても何も変わりません。

ここで、classに対して、任意のデザインを指定してみます。

OmniMarkupPreviewer-css

▲ライブラリ→Application Support→Sublime Text 2と進み、

OmniMarkupPreviewer-css

▲Sublime Text 2→Packages→OmniMarkupPreviewerと進み、

OmniMarkupPreviewer-css

▲OmniMarkupPreviewer→Public→github.cssをテキストエディタで開きます。(ここでは、Sublime Text 2で開く事にします。)

OmniMarkupPreviewer-css

▲github.cssファイルを開いたら、四角で囲んだ部分を追記します。(classがhutoakaに対して、赤色太文字になるようにしています。)

OmniMarkupPreviewer-css

▲そして再びプレビューしてみると、CSSで指定したように、赤色太文字で反映されました。(うまくいかない場合、キャッシュを削除してみると解決するかもしれません。)

まとめ

OmniMarkupPreviewerのプレビューは編集出来るので、なるべくブログのデザインを反映させたければ、詳細に凝る事は出来ます。

僕は、必要最低限の違いがわかれば十分かなと思い、赤文字やキーボードコマンド用のCSSだけ登録しておきました。

関連記事





スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
SublimeText   OmniMarkupPreviewer   テキストエディタ   CSS   プレビュー  
Comment
Trackback
Comment form
サイト内検索
全記事表示リンク

PAGE TOP