2009.11.12

SyntaxHighlighterのCSSをカスタマイズ

AUTHOR

こんにちわ、nicholです。

WordPressでソースコードを記事に表示させたいとき、便利なのがSyntaxHighlighter
もちろんこのブログにも入ってます。
disBlogで使用しているのは、SyntaxHighlighter Evolvedというバージョン。

これを入れると、こんな感じ↓になるんですが、

nichol_091112_01

…なんか…

…このビビッドな緑のラインが微妙…
行間ももう少し空けた方が見やすい。

ということで、ちょっといじることにしました。

ところで、SyntaxHighlighterにはいくつかテーマがあります。
上の画像はデフォルトですが、ダッシュボード→設定→SyntaxHighlighter→Defaultから、テーマ以外にもいろいろと設定がいじれます。
「Miscellaneous」という項目から、ナンバリングを非表示にしたり、また、変更した状態をプレビューできたりするのでけっこう便利なんですが、あらかじめ設定された項目以外の変更は出来ない様子。
ということは、CSSを変更するしかない。

CSSは、wp-content→plugins→syntaxhighlighter→syntaxhighlighter→stylesというところに、テーマ別で入っています。
デフォルトの状態から変更したので、今回使ったcssは、

・shCore.css(基本css)
・shThemeDefault.css(デフォルトテーマcss)

の2つ。
この2つをダウンロードし、念のためバックアップをとる。

SyntaxHighlighterが表示されているページのキャプチャを取り、例の緑色をPhotoshopで抽出すると、「#6CE26C」っていう値をゲット。
このカラーコードを元にCSS内で検索をかけてみると、

.syntaxhighlighter .line .content

を発見。好きな色に変える。

次は行間を変更する。
shCore.cssの一番上の方に、

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody

っていうところがあるので、そこのline-height値をいじる。

…このように、普通にcssをいじる感じで好きなようにカスタマイズします。
そして、完成したのがこれ↓

<?php
include_once(ABSPATH . WPINC . '/rss.php');
define('MAGPIE_OUTPUT_ENCODING' , 'UTF-8');
define('MAGPIE_CACHE_DIR' , './cache');
define('MAGPIE_FETCH_TIME_OUT', 30);
define('MAGPIE_CACHE_AGE', 60*60);
$rss = fetch_rss('http://waratsuyoshi.jp/feed');
$maxitems = 3;
$items = array_slice($rss->items, 0, $maxitems);
?>

ところで、このエントリを書き終わったあと、ふと気づくとプラグインがバージョンアップされて↑に書いた設定すべてが消されてました。
あわててローカルのcssをアップするも、バージョンアップに伴い仕様そのものが変わったもよう。
仕方なく、本サイトから最新バージョンのプラグインをダウンロードしてきて、もう一度cssを修正しなおしました。
というわけで、気合入れてカスタマイズしても、バージョンアップでふりだしに戻ることがあるので気をつけてください。

でも、cssそのものは不要な記述が減ってすっきりしていじりやすくなってていい感じでした。

戸田@ドアズ社長ブログ

  • No items
PAGE TOP