<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>スタッフブログ｜dis-ドアズインターネットサービス｜WEB（ホームページ）制作、作成・SEO・FLASH・ビジネスブログ・ユーザビリティ・アクセシビリティ｜神戸・大阪 &#187; Tips</title>
	<atom:link href="http://dis.ne.jp/blog/tag/tips/feed" rel="self" type="application/rss+xml" />
	<link>http://dis.ne.jp/blog</link>
	<description>WEB（ホームページ）制作、作成・SEO・FLASH・ビジネスブログ・ユーザビリティ・アクセシビリティ</description>
	<lastBuildDate>Tue, 25 Oct 2011 06:22:48 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>SyntaxHighlighterのCSSをカスタマイズ</title>
		<link>http://dis.ne.jp/blog/coding/197.html</link>
		<comments>http://dis.ne.jp/blog/coding/197.html#comments</comments>
		<pubDate>Thu, 12 Nov 2009 11:53:10 +0000</pubDate>
		<dc:creator>nichol</dc:creator>
				<category><![CDATA[コーディングのこと]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://dis.ne.jp/blog/?p=197</guid>
		<description><![CDATA[こんにちわ、nicholです。 WordPressでソースコードを記事に表示させたいとき、便利なのがSyntaxHighlighter。 もちろんこのブログにも入ってます。 disBlogで使用しているのは、Syntax [...]]]></description>
			<content:encoded><![CDATA[<p>こんにちわ、nicholです。</p>
<p>WordPressでソースコードを記事に表示させたいとき、便利なのが<a href="http://code.google.com/p/syntaxhighlighter/" target="_blank">SyntaxHighlighter</a>。<br />
もちろんこのブログにも入ってます。<br />
disBlogで使用しているのは、<a href="http://wordpress.org/extend/plugins/syntaxhighlighter/" target="_blank">SyntaxHighlighter Evolved</a>というバージョン。</p>
<p>これを入れると、こんな感じ↓になるんですが、</p>
<p><img src="http://dis.ne.jp/blog/entryimg/nichol_091112_01.jpg" alt="nichol_091112_01" title="nichol_091112_01" width="540" height="172" class="alignnone size-full wp-image-198" /></p>
<p>…</p>
<p>…なんか…</p>
<p>…このビビッドな緑のラインが微妙…<br />
行間ももう少し空けた方が見やすい。</p>
<p>ということで、ちょっといじることにしました。</p>
<p><span id="more-197"></span></p>
<p>ところで、SyntaxHighlighterにはいくつかテーマがあります。<br />
上の画像はデフォルトですが、ダッシュボード→設定→SyntaxHighlighter→Defaultから、テーマ以外にもいろいろと設定がいじれます。<br />
「Miscellaneous」という項目から、ナンバリングを非表示にしたり、また、変更した状態をプレビューできたりするのでけっこう便利なんですが、あらかじめ設定された項目以外の変更は出来ない様子。<br />
ということは、CSSを変更するしかない。</p>
<p>CSSは、wp-content→plugins→syntaxhighlighter→syntaxhighlighter→stylesというところに、テーマ別で入っています。<br />
デフォルトの状態から変更したので、今回使ったcssは、</p>
<p>・shCore.css（基本css）<br />
・shThemeDefault.css（デフォルトテーマcss)</p>
<p>の2つ。<br />
この2つをダウンロードし、念のためバックアップをとる。</p>
<p>SyntaxHighlighterが表示されているページのキャプチャを取り、例の緑色をPhotoshopで抽出すると、「#6CE26C」っていう値をゲット。<br />
このカラーコードを元にCSS内で検索をかけてみると、</p>
<p>.syntaxhighlighter .line .content</p>
<p>を発見。好きな色に変える。</p>
<p>次は行間を変更する。<br />
shCore.cssの一番上の方に、</p>
<p>.syntaxhighlighter,<br />
.syntaxhighlighter div,<br />
.syntaxhighlighter code,<br />
.syntaxhighlighter table,<br />
.syntaxhighlighter table td,<br />
.syntaxhighlighter table tr,<br />
.syntaxhighlighter table tbody</p>
<p>っていうところがあるので、そこのline-height値をいじる。</p>
<p>…このように、普通にcssをいじる感じで好きなようにカスタマイズします。<br />
そして、完成したのがこれ↓</p>
<pre class="brush: php; title: ; notranslate">
&lt;?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-&gt;items, 0, $maxitems);
?&gt;
</pre>
<p>ところで、このエントリを書き終わったあと、ふと気づくとプラグインがバージョンアップされて↑に書いた設定すべてが消されてました。<br />
あわててローカルのcssをアップするも、バージョンアップに伴い仕様そのものが変わったもよう。<br />
仕方なく、本サイトから最新バージョンのプラグインをダウンロードしてきて、もう一度cssを修正しなおしました。<br />
というわけで、気合入れてカスタマイズしても、バージョンアップでふりだしに戻ることがあるので気をつけてください。</p>
<p>でも、cssそのものは不要な記述が減ってすっきりしていじりやすくなってていい感じでした。</p>
]]></content:encoded>
			<wfw:commentRss>http://dis.ne.jp/blog/coding/197.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hello world!</title>
		<link>http://dis.ne.jp/blog/topics/1.html</link>
		<comments>http://dis.ne.jp/blog/topics/1.html#comments</comments>
		<pubDate>Tue, 04 Aug 2009 07:01:46 +0000</pubDate>
		<dc:creator>doors</dc:creator>
				<category><![CDATA[トピックス]]></category>
		<category><![CDATA[Action Script]]></category>
		<category><![CDATA[ASP]]></category>
		<category><![CDATA[CMS]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Font]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[MovableType]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[おすすめ本]]></category>
		<category><![CDATA[ニュース]]></category>
		<category><![CDATA[携帯]]></category>
		<category><![CDATA[論じる]]></category>

		<guid isPermaLink="false">http://dis.ne.jp/blog/?p=1</guid>
		<description><![CDATA[WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !]]></description>
			<content:encoded><![CDATA[<p><a href="http://dis.ne.jp/blog/entryimg/zack.jpg" rel="lightbox[1]"><img src="http://dis.ne.jp/blog/entryimg/zack.jpg" alt="zack" title="zack" width="590" height="200" class="aligncenter size-full wp-image-64" /></a></p>
<p>WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !</p>
]]></content:encoded>
			<wfw:commentRss>http://dis.ne.jp/blog/topics/1.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

