SyntaxHighlighterのスタイル変更
どうも、かげさんです(^^)/
SyntaxHighlighterを使っていて、
見た目を変えたいところがあったので、変更しました。
どう変えたのか
変えたところは、下記の通り
- ソースのタイトル部分
- 偶数行と奇数行の色分け
変えたいと思った理由
ソースタイトルのところは、
ソースのタイトルとソース自体の背景色が同じで
タイトルとして目立たないので背景色を変えて、
タイトル下部に行番号との区切りと同じ赤線を引き
ソースのタイトルと分かりやすくしたかったのです。
また、ソースの行数が多い、
1行が長い時に偶数行と奇数行の色分けがあると
見易いのでこれも導入したかった。
具体的な変更内容
SyntaxHighlighter の CSS は、
これまで下記の2つを使っていました。
- shCore.css
- shThemeEmacs.css
SyntaxHighlighter の CSS には、この2つを1つにまとめた shCoreEmacs.css もあります。
今回は1つにまとめたものを改良することにしました。
ブログ表示の際にCSSが2つあると、2回ファイルにアクセスします。
CSS が1つだとファイルアクセスは1回で済みます。
最初にSyntaxHighlighterを使い始めた頃は
知らなかったのですが、
ファイルアクセス数は、ブログ表示の速度に影響します。
また、導入当時は、ファイルのアップロード先を変更できましたが
今のココログは、ブログの files ディレクトリにしか
アップロードできません。
既にブログの files ディレクトリ以外に
アップロード済みのファイルは、更新できないわけです。
files ディレクトリ以外に
改良したCSSをアップロードしたい場合、
既存のCSSファイルの格納場所指定の修正が必要になります。
修正してファイルをアップロードするなら
2つのCSSを1つにまとめたものをアップロードした方が
ブログ表示速度が速くなります。
それで1ファイルにまとめたものを改良し、アップロードすることにしました。
うまく修正できました(*´・ω・`)b
コメント
このブログの新着コメントをRSSリーダに登録する為のxml