国道58号線をのんびりと行く

WordPressの本文（記事内）でHTMLやCSS、PHPなどのソースをきれいに表示するプラグインはいくつかあるのですがこのブログで使っているのはSyntax Highlighter for WordPress。

Syntax Highlighter for WordPressのダウンロード先（ http://wppluginsj.sourceforge…….ghlighter/ ）からzipファイルをダウンロードして解凍。
プラグインフォルダにアップロード後、使用開始すればいいだけという、誰にでも簡単にはじめられるプラグインです。

Syntax Highlighter系のプラグインは他にもたくさんあるのですが、テーマとの絡みでしょうか。
このブログにはSyntax Highlighter for WordPressが一番しっくり来ました。

本文内では半角の大カッコ [] で［css］とか［html］とか［php］とかを括ってソースを記述し、最後に［/css］や［/html］、［/php］などで閉じるだけ。

具体的にはこんな感じで記述。

［css］ .hogehoge {background-color : #FFF ;}［/css］

記事本文の［css］などは全角の大カッコ使ってますのでコピペすると動かないので注意して下さい。
［css］などの必要タグはAdd Quick Tagプラグインを導入して、登録しておくと記事の作成が楽になります。

この先は自分のちょっとCSSカスタマイズメモ。
デフォルトに#e3e3e3の外枠を付けてみました。

syntax-highlighter/css/shThemeDefault.css にボーダーを追加します。
shThemeDefault.cssの冒頭を以下に変更。

.syntaxhighlighter
{
	background-color: #fff !important;
}

↓

.syntaxhighlighter
{
	background-color: #fff !important;
	border:1px solid #e3e3e3 !important;
}

以上、これだけでだいぶ見やすくなります。

ちなみにフォントサイズやスタイルを変更するには syntax-highlighter/css/shCore.css を触ります。
このブログではフォントファミリーにMS ゴシックを追加しています。

font-family: "ＭＳ ゴシック", "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;

新着アイコンを表示させるPHP

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a><?php
$days=3;
$today=date('U'); $entry=get_the_time('U');
$diff1=date('U',($today - $entry))/86400;
if ($days > $diff1) {
echo '<img src="/images/icon_new.gif" alt="New" />';
}
?></h2>