Amazon 初売り

« 軌跡シリーズの「ねんぷち」がメリークリスマス | トップページ | Windows 10 「ファイルシステムのエラーです(-2147416359)」の修復方法 »

2019.12.27

SyntaxHighlighterのスタイル変更

| |コメント (0)

 このエントリーをはてなブックマークに追加

どうも、かげさんです(^^)/

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

 


 このエントリーをはてなブックマークに追加

| |コメント (0)

このエントリーへのリンク

このエントリーのリンクを入れるHTML:

コメント

このブログの新着コメントをRSSリーダに登録する為のxml




←名前とメールアドレスは必須です。
URLも記入すれば、URLのみが公開されます。
メールアドレスのみですと、メールアドレスが公開されてしまいますので、御注意ください。

↓コメント本文では、「a href」「b」「i」「br/」「p」「strong」「em」「ul」「ol」「li」「blockquote」「pre」のタグが使えます。絵文字をクリックすると、本文にタグを挿入できます。