<?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/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>DesignWalker &#187; 交互</title>
	<atom:link href="http://www.designwalker.com/tag/%e4%ba%a4%e4%ba%92/feed" rel="self" type="application/rss+xml" />
	<link>http://www.designwalker.com</link>
	<description>ロサンゼルスで働くウェブデザイナーの日記。</description>
	<lastBuildDate>Wed, 29 Jun 2011 06:24:51 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/tag/%e4%ba%a4%e4%ba%92/feed" />
		<item>
		<title>ムーバブルタイプでコメント欄の色を交互に変えるプラグイン</title>
		<link>http://www.designwalker.com/2006/12/stripecommentcolor.html</link>
		<comments>http://www.designwalker.com/2006/12/stripecommentcolor.html#comments</comments>
		<pubDate>Tue, 12 Dec 2006 17:56:54 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[インストール方法を伝える男]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[しましま]]></category>
		<category><![CDATA[しましまコメントプラグイン]]></category>
		<category><![CDATA[コメント]]></category>
		<category><![CDATA[コメント欄]]></category>
		<category><![CDATA[プラグイン]]></category>
		<category><![CDATA[交互]]></category>

		<guid isPermaLink="false">http://new.designwalker.com/2006/12/%e3%83%a0%e3%83%bc%e3%83%90%e3%83%96%e3%83%ab%e3%82%bf%e3%82%a4%e3%83%97%e3%81%a7%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e6%ac%84%e3%81%ae%e8%89%b2%e3%82%92%e4%ba%a4%e4%ba%92%e3%81%ab%e5%a4%89%e3%81%88.html</guid>
		<description><![CDATA[
			
				
			
		
以前から、やりたかったコメント欄の色を交互に変えるプラグインを見つけたので、このブログにも先日導入したので、そのプラグインのご紹介と導入方法をメモ。
具体的にどういったことをしたかったの [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.designwalker.com%2F2006%2F12%2Fstripecommentcolor.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2006%2F12%2Fstripecommentcolor.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>以前から、やりたかったコメント欄の色を交互に変えるプラグインを見つけたので、このブログにも先日導入したので、そのプラグインのご紹介と導入方法をメモ。</p>
<p>具体的にどういったことをしたかったのかといいますと。。。</p>
<div align="center">
<a href="http://www.designwalker.com/img/striped_comment.gif" rel="lightbox" title="こんな風にしましまにコメント欄の色を変えたかっただけ。。。"><img src="http://www.designwalker.com/img/striped_comment-thumb.gif" width="200" height="274" alt="" /></a>
</div>
<p>こんな風に↑しましまにコメント欄の色を変えたかっただけ。。。でございます・・・</p>
<p>コメントの数が増えてくると、結構読みづらかったので、導入してみました。意外と簡単どえす。</p>
<p><strong>1. プラグインをダウンロードする</strong></p>
<div style="float: left; margin: 0 10px 10px 0;">
<a href="http://nlogn.ath.cx/plugins/stripecommentcolor/" target="blank"><img src="http://img.simpleapi.net/small/http://nlogn.ath.cx/plugins/stripecommentcolor/" alt="" width="128" height="128" hspace="4" vspace="4" align="left" border="0" /></a>
</div>
<p>このプラグインを配布されている<a href="http://nlogn.ath.cx/plugins/stripecommentcolor/" target="blank">nlog(n)</a>さんのサイトからプラグインをダウンロードする。</p>
<div style="clear: both"></div>
<p><strong>2. プラグインをアップロードする。</strong><br />
ダウンロードしたファイルを解凍してムーバブルタイプのpluginsディレクトリにアップロードします。<br />
ムーバブルタイプの管理画面のプラグインのところに</p>
<div align="center">
<img alt="stripecommentcolor.gif" src="http://www.designwalker.com/img/stripecommentcolor.gif" width="355" height="60" />
</div>
<p>こんなん↑出てたらとりあえずインストール完了で。</p>
<p><strong>3. テンプレートにタグを入れる</strong><br />
いろいろ、やり方ありますが、CSSを交互に表示するやり方が一番いい感じかと思われるので、そのやり方を。。テンプレートの&lt;MTComments&gt;から&lt;/MTComments&gt;で囲まれてる部分を・・・</p>
<div class="textarea_bg">
<pre>
&lt;MTComments&gt;
&lt;div class="&lt;$MTStripeCommentColor oddnumcolor="comments_odd"
evennumcolor="comments_even"$&lt;"&lt;
&lt;$MTCommentBody$&lt;
&lt;span class="&lt;$MTStripeCommentColor oddnumcolor="comments-post-1"
evennumcolor="comments-post-2"$&lt;"&lt;
Posted by &lt;$MTCommentAuthorLink spam_protect="1"$&lt;
at &lt;$MTCommentDate$&lt;
&lt;/span&lt;
&lt;/div&lt;
&lt;/MTComments&lt;
</pre>
</div>
<p>こんな風に↑テンプレート書き換えて、CSSに&#8221;comments_odd&#8221;と&#8221;comments_even&#8221;を書き加えたらええわけです。</p>
<p>ちなみにこのブログではCSSは</p>
<div class="textarea_bg">
<pre>
.comments_odd {
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #F2F2F2;
background: #FFF;
}

.comments_even {
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #F2F2F2;
background: #F8FFE9;
}
</pre>
</div>
<p>こんな風に↑CSSを付け足してみました。これで、偶数番目のコメントの背景は白。奇数番目のコメントは<br />
薄いグリーンになるわけです。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2006/12/stripecommentcolor.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2006/12/stripecommentcolor.html" />
	</item>
	</channel>
</rss>

