3603日くらい過ぎています。年で言ったら9.87年くらいです。情報が古くなってる可能性もあるので参考程度に御覧ください。ウェブサイトを作る人やウェブアプリを開発する人にとって開発用機能は長い付き合いになるツールだと思います。そこで、自分好みにいろいろと手を加えてみて、より使いやすくしてみましょう、というお話です。書いていたら長くなってきたので2回に分けました。表示周りの様々な所がHTMLでつくられているため、結構自分好みにいじれるようです。いう、DIV要素のあとからテーブルでソースが書かれているのがわかります。このテーブルに対してスタイルシートを書いていけば、見た目を自由に変更できるわけですね。スタイルシートの保存場所じゃあどこにスタイルシートを書くのかというと、Chromeのリソースの中にCustom.cssというものがあります。StylesSheets\にあります。見つけたら、あとで何か合った時に元に戻せるようはじめから入ってるCSSをまずコピーして、別の名前にリネームしておきましょう。((といってもデフォルトだと空のCSSファイルだし、ファイルが無ければ自動的に作られるようですのでそこまで神経質になることもないですが...。))ソースビューワの見た目をいじる実はこのCustom.cssですが、ソースビューワとデベロッパーツール、両方の見た目を定義しています。(もしかしたら他のHTMLで書かれている部分もここで定義してるかもわかりません)なので、一部だけにCSSを適用したい場合は、クラス指定などをして特定の箇所にだけ効かせないといけませんが、先程も見たように、コードを表示しているテーブルにはクラスがありません。class="webkit-line-gutter-backdrop"></div>というDIV要素があります。.webkit-line-content:hover{}という風にすればよさそうな感じですね。自分はこんなかんじにカスタマイズしました。((tab-sizeプロパティはまだ実験段階のプロパティらしいですが、一応Chromeはバージョン21から対応していますし、どうせここはChromeからしか見られませんので使ってみました。rgb(245,245,245);}今はこれをベースに少し使っては調整して、自分なりの最適な設定を模索中です。因みにこの時点での見た目のサンプルはは冒頭のスクリーンショットをご覧下さい。デベロッパーツールの見た目をいじる前述のように、このCustom.cssではソースビューワ以外に、デベロッパーツールの見た目も変更できます。当たり前ですがデベロッパーツールの中で更にデベロッパーツールを開くことはできませんので、このままでどの要素を選択すればいいのかがわかりません。世の中にはこれらをいじるためのCSSを用意してくれている人がいて、様々な配色のテーマを公開してくれています。devthemezですので、これらのテーマから気に入ったものを探してみて、そこから改造していくのがいいかもしれません。テーマの導入は自己責任でお願いします。先にソースビューワのCSSをいじっている場合、当然それらのCSSは上書きされてしまいますので、変更をバックアップしておくか、先にデベロッパーツールのテーマを固めてからソースビューワの方をいじると良いと思います。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。