[ Google Chrome ] ソース表示の見た目を CSS で変更する

↓この記事が気に入ったら、ぜひシェアをお願いします!

Google Chrome で、ウェブページのソースを表示する時の見た目を CSS で変更する方法がわかったのでシェア。 ずっと、等幅フォントで、小さい文字にしたかったんですよね〜。

chrome-custom-css

▲ スタイル適用前と適用後

スポンサーリンク

ソース表示の見た目を変更する方法

ソース表示の見た目を変更するには、次のファイルを編集します。

~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

スタイルはお好みで。例えば、次のような感じです。

/* ソース表示 */
.webkit-line-gutter-backdrop + table {
    font-size: 12px;
    line-height :1.5;
    }
.webkit-line-gutter-backdrop + table .webkit-line-content {
    font-family: Osaka-Mono, monospace;
    white-space: pre;
    }

今回、試してみた環境

  • Google Chrome 26.0.1410.43
  • Mac OS 10.8.3

参考にさせてもらったページ

ありがとうございます!

スポンサーリンク