wordpress＋SyntaxHighlighterで少しだけスタイルを変更する

wordpress＋SyntaxHighlighterで少しだけスタイルを変更したいときの方法。

元々のスタイルをベースにちょっとだけ修正を行いたい場合のやり方。

今回は、当サイトのように記事の背景が白でdefaultのスタイルを使いたい。。。

でも使うと、ソースの部分を記事との見分けが付きにくく何とかしたい。という状況に陥ったので、その改善方法をさぐります。

テーマの取得

現在使用しているテーマのcssファイルを取得します。

ftpでwordpressに接続しているサーバにアクセスして、、、

「(wordpressをインストールしたディレクトリ)/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles」の下に「shTheme(テーマ名).css」というファイルがあるので、自分がベースにするテーマをローカルにダウンロードします。

私の場合はデフォルトをベースにする予定なので「shThemeDefault.css」をダウンロードしました。

テーマの修正

実際にテーマの修正を行います。

ここでは、cssの詳しい説明は行わないので、もっと詳しく知りたい方はググるか・・・右に私がcssを少しかじるために購入した書籍を貼っていますので(2014/03/15時点)参考にどうぞ。おススメはXHTML/HTML+CSSスーパーレシピブックです。

修正は自身のページのcssファイルに追記を行うことで実現できます。(これは設定しているテーマによって変化します。ここでは詳しくは取り上げません。)

何を修正するのかによって修正個所が変化するわけですが・・・

私の場合は、背景色と枠線を付ける。という修正を行いたいと思います。

まずは、先ほどダウンロードした「shThemeDefault.css」をテキストエディタで開いて以下の修正を行います。

.syntaxhighlighter {
  background-color: white;
}
.syntaxhighlighter .line.alt1 {
  background-color: white;
}
.syntaxhighlighter .line.alt2 {
  background-color: white;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0;
}

何を修正したかと言いますと、ハイライトしている行の最後に付いていた「!important」の記述を削除しました。「!important」は優先にする。という効果があり自分のスタイルシートの効果が反映されなかったため、この部分を削除しました。
(なお、背景色、枠線の修正だけなら、ここに直接修正を加えても良いと思います。)

修正を行ったのは、syntaxhighlighterの背景色、ソースの奇数行、偶数行の背景色、ハイライト時の背景色です。(あれ、枠線は？と思うかもしれませんが、枠線は元々設定されていないため、この時点では特に修正不要です)

修正を行ったファイルは、サーバの同じ場所に上書きアップデートしてください。

次は実際に自分が管理しているスタイルシートの修正を行います。

スタイルシートには以下の修正(追記)を行います。

.syntaxhighlighter {
  padding: 5px 0 !important;
  width: auto !important;
  border: dotted 1px #C4B397 !important;
  background-color: #FAF8F3 !important;
  border-radius: 5px !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: #FAF8F3 !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: #FAF8F3 !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}

何をやっているのか簡単に説明すると、

1行目～7行目： コードの枠と背景色の設定、コードの枠の角に丸みを付けて点線を付加。
8行目～13行目： 奇数行、偶数行の背景色の設定。
14行目～16行目： ハイライト行の背景色の設定。

ローカルでのデバッグ方法

既にSyntaxHighlighterを使って作成した記事があれば実際の状態を確認しながら修正ができます。

もし、なければSyntaxHighlighterの設定画面でも構いません。

1. 確認を行うページを保存します。

保存時は、「ファイルの種類(T)：」で「webページ、HTMLのみ(*.htm;*.html)」を選択。
保存したwebページのファイル(ここでは、仮にpage.htmlとします)と「shThemeDefault.css」とサイトのスタイルファイルを同一フォルダに保存します。

2. page.htm(page.html)を修正します。

修正個所は2か所です。以下に修正個所の例を書いておきます。

(修正前) <link rel="stylesheet" href="http://www.cross-ring.net/web/DPOW/style/style.css" type="text/css" media="screen" />
(修正後) <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />

(修正前)    var themecssurl = "http://www.cross-ring.net/cgi-bin/blog_engine/cross_wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css?ver=3.0.83c";
(修正後)    var themecssurl = "./shThemeDefault.css?ver=3.0.83c";

それぞれ、上の行が修正前、下のハイライトしている行が修正後です。
どちらもローカルのcssファイルを読みだすように修正したものです。

3. 実際にcssファイルを修正

cssファイルに対して「テーマの修正」で行ったような修正を行います。

4. ブラウザで確認

page.htmをブラウザにドラッグアンドドロップしてページの結果を確認します。その後cssファイルに修正したときはブラウザの更新を行う(もちろん、ドラッグアンドドロップを毎回実施しても構いません)。なお、当サイトのようにgoogle adやtwitterをサイドバーに表示している場合は、page.htmの該当行から消してしまった方が良いと思います。
自分の好きなスタイルになるようにcssファイルを修正してください。
終われば、page.htm以外のcssファイルを適切なディレクトリにアップすれば完了です。