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

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

…

…なんか…

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

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

ところで、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そのものは不要な記述が減ってすっきりしていじりやすくなってていい感じでした。

FireFoxで半角英数を折り返すには？

はじめまして。今年9月に入社しました、新人の【おはぎ】です。

隣のミツノブさんにしごかれながら日々頑張ってます。
疲労困憊で晩ごはんが作れません！私はとっても自炊がしたいのにっ！　　　　　・・・・えっ？ｗ

さて、自慢の機器とか周辺機器にこだわりとかもあんまないので、ここでは仕事上で覚えたことを備忘録として書き込んでいこうかと思います。

サイトの最新情報とかでよくある、「日付・トピックス」というこの構成。
実はこの日付の部分に大きな罠がありました。
（日付をすべで半角英数にした場合）文字サイズを拡大すると、FireFoxで日付が折り返さず突き抜けていくんですね。どこまでも。

この件に関しては、珍しくIEのほうに軍配があがりました。
そもそも英語圏だと折り返さないほうが正しいのかもしれないんですが。IEはCSSでなんとかなるしそこは置いといて。

そこで、今回利用させていただいたのが、「wordBreak.js」というJavaScriptです。

FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」（to-R様）

使い方は簡単で、まずheadにこのjsを読み込んで、日付が入っているタグにclass="wordBreak"を入れるだけ。

to-R様のjsはtableの使用時を想定したコードになっているので、ｄｔタグに使いたい場合は少しカスタマイズを。

jsの中身で「table」とある箇所をすべて使いたいタグ（今回はdt）に置換します。

これで、文字可変にも対応できるようになりました。

めでたしめでたし

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !