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

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

Google Chrome で、ウェブページのソースを表示する時の見た目を 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

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

• Google Chrome のソースビューアを Komodo Edit（Dark Chalkboard）風にするカスタマイズ｜mattintosh note

ありがとうございます！

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。