はじめに

ブログを書くにあたって初めて導入、使用した「SyntaxHighlighter Evolved」というプラグインですが、どうもフォントサイズが小さいと思い、ちょこっといじってみました。

Contents

変更ファイルの場所

まず、プラグインのどのファイルを変更するのかを明確にしなければならないので、変更ファイルの場所を確認しましょう。
具体的な場所は、プラグインのフォルダ内の次の2箇所です。

syntaxhighlighter/syntaxhighlighter2/styles/shCore.css

syntaxhighlighter/syntaxhighlighter3/styles/shCore.css

おそらくVersion 2.xか3.xかの違いでしょうね。

では、目的のファイルが分かったところで、実際の変更箇所を見てみましょう。

変更箇所

shCore.cssファイルの30行目から次のように書かれていると思います。

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody
{
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: none !important;
	text-align: left !important;
	float: none !important;
	vertical-align: baseline !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	height: auto !important;
	width: auto !important;
	line-height: 1.1em !important;
	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
	font-weight: normal !important;
	font-style: normal !important;
	font-size: 1em !important;
	/*min-height: inherit !important; *//* For IE8, FF & WebKit */
	/*min-height: auto !important;*/ /* For IE7 */
	direction: ltr !important;
}

このfont-sizeを変えてあげればOKです。
デフォルトだと上の通り「1em」になっています。

今回の変更はフォントサイズのみですが、shCore.cssと同じディレクトリにテーマのcssファイルも入っているので、そちらを触っても面白いかもしれないですね。