<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:admin="http://webns.net/mvcb/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>monolog...</title>
<link>http://monolog.devgiri.org/index.php</link>
<pubDate>Mon, 18 Jan 2010 19:45:00 +0900</pubDate>
<description>monolog...</description>
<language>ja</language>
<generator>Loggix</generator>
<item>
<title>SIDE BAR のカスタマイズ</title>
<guid isPermaLink="true">http://monolog.devgiri.org/index.php?id=112</guid>
<pubDate>Mon, 18 Jan 2010 19:45:00 +0900</pubDate>
<description><p>WordPressで運用中のGanesha's Field Notebook.へのリンクを SIDE BAR に表示したい、ということでちまちまカスタマイズ。<br />まず、./theme/navigation.html を以下のように修正。これだ...</p>
</description>
<content:encoded>
<![CDATA[
<p>WordPressで運用中の<a href="http://wp.devgiri.org/">Ganesha's Field Notebook.</a>へのリンクを SIDE BAR に表示したい、ということでちまちまカスタマイズ。</p>
<p>まず、./theme/navigation.html を以下のように修正。これだけで一応、目的は達成できる。</p>
<div class="command">
<pre>
&lt;h2&gt;Ext.&lt;/h2&gt;
&lt;ul class="menu"&gt;
&lt;li id="ext1"&gt;&lt;a href="URI" title="リンク先の説明"&gt;Ganesha's Field Notebook.&lt;/a&gt;&lt;/li&gt;
&lt;li id="ext2"&gt;&lt;a href="URI" title="リンク先の説明"&gt;Ganesha's monolog.&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
<p>class属性だけでなくid属性も付与したのは、後で説明する思惑があったから。ちなみに見出しを"Ext."としたのは<a href="http://jamlog.podzone.org/">JAM LOG</a>のパクリ。たぶん、extensionかextendの略語だと思う。（英語にはまったく自信がない）</p>
<p>さて、これだけでは寂しいのでアイコンを付けることにした。Loggixにデフォルトで添付されている tango-icon のセットの中には気に入ったのが見つからなかったので、考えた末に使っているCMSツールのアイコンにしようと思いついた。つまり、WordPressとLoggixのアイコンだ。</p>
<p>
<a href="http://monolog.devgiri.org/data/resources/wordpress-icon.png" class="colorbox">
<img src="http://monolog.devgiri.org/data/resources/wordpress-icon.png" width="72" height="72" alt="WordPressのアイコン" />
</a>
<a href="http://monolog.devgiri.org/data/resources/loggix-icon.png" class="colorbox">
<img src="http://monolog.devgiri.org/data/resources/loggix-icon.png" width="72" height="72" alt="Loggixのアイコン" />
</a>
</p>
<p>このアイコンを SIDE BAR に配置したリンクの左側に表示させるため、CSSを次のように修正（追記）した。修正したCSSファイルは、もちろんuser_custom.cssだ。</p>
<div class="command">
<pre>
li#ext1 a {
    padding: 1.2em 0.5em 0.2em 1.6em;
    background: url(./images/wordpress-icon32.png) no-repeat 5px 50%;
}
li#ext2 a {
    padding: 1.2em 0.5em 0.2em 1.6em;
    background: url(./images/loggix-icon32.png) no-repeat 5px 50%;
}
</pre>
</div>
<p>そして、32×32pixelに加工したアイコンを./theme/css/default/imagesにアップロードした。結果はご覧のとおり。</p>
<p>
<a href="http://monolog.devgiri.org/data/resources/cap_20100118.png" class="colorbox">
<img src="http://monolog.devgiri.org/data/resources/cap_20100118.png" width="520" height="286" alt="Sleipnirでキャプチャした画像" />
</a>
</p>
<p>ちょっと心配なのがWordPressとLoggixのアイコンを勝手に加工してること。ライセンス的に…問題ないことを祈ろう。問題ないですよね？</p>
]]>
</content:encoded>
</item>
</channel>
</rss>
