MTRoundRobin:一覧表示で交互に背景・文字色をかえる

MTRoundRobin

あらかじめ定義したリストの中から要素を順に取り出して、さまざまな用途に使用することができます。

http://www.sixapart.jp/movabletype/plugins/mtroundRobin.html

導入・使い方はそれほど面倒ではありません。上記のサイトからプラグインをダウンロードして、pluginフォルダに落とすことで使えるようになります。

インストール方法

1. RoundRobinのソースコードをダウンロードします。
2. ［roundrobin.txt］を［roundrobin.pl］と名前変更し、Movable Typeの［plugins］ディレクトリにアップロードします。

使い方も上記のサイトから説明ページがありますので、読んでみてください。

RoundRobin参考コード

MTRoundRobinを使った参考コードをいくつか紹介しておきます。

背景色を交互に変える：Widget: 最近の投稿（デフォルトコード）

Widget: 最近の投稿（デフォルトコード）にMTRoundRobinタグを追加しておきます。グレイと白の交互にて背景が変わって表示されます。

<MTRoundRobin set="gray white">

の色を変えることで表示色を変えることができます。淡い色がおススメです。

※コード表示左上のview plainをクリックすると簡単に正規表示にてコードを取得することができます。別窓にてコードが表示されます。

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
      <ul class="module-list"><MTRoundRobin set="gray white">
      <MTEntries lastn="10">
         <li class="module-list-item" style="background: <MTRoundRobin>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
      </MTEntries>
      </ul>
   </div>
</div>

文字色を交互に変える：Widget: 最近の投稿（デフォルトコード）

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
      <ul class="module-list"><MTRoundRobin set="gray white">
      <MTEntries lastn="10">
         <li class="module-list-item" style="background:<MTRoundRobin>;color:<MTRoundRobin>;"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
      </MTEntries>
      </ul>
   </div>
</div>

背景と文字色を交互に変える：Widget: 最近の投稿（デフォルトコード）

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
      <ul class="module-list"><MTRoundRobin set="gray white white gray">
      <MTEntries lastn="10">
         <li class="module-list-item" style="color: <MTRoundRobin>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
      </MTEntries>
      </ul>
   </div>
</div>

背景色を交互に変える：Widget: 最近のコメント（デフォルトコード）

<div class="module-recent-comments module">
  <h2 class="module-header">最近のコメント</h2>
  <div class="module-content"><MTRoundRobin set="gray white">
<MTComments lastn="10" sort_order="descend">
    <div style="background:<MTRoundRobin>;"><a href="<MTCommentEntry><$MTEntryPermalink$></MTCommentEntry>#comment-<$MTCommentID$>"><$MTCommentAuthor$> on <MTCommentEntry><$MTEntryTitle$></MTCommentEntry></a>: <$MTCommentBody remove_html="1" trim_to="10"$></a></div>
</MTComments>
  </div>
</div>

背景色を交互に変える：検索結果ページ

テンプレート：システムの検索結果のタグの中で追加する部分のコードを取り出しておきます。以下の部分に追加することで検索結果も交互に表示色を変えることができます。

<MTIgnore>
    ##########  検索結果表示　　/---このコードの下あたり---/
</MTIgnore>

<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
	<p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
		<MTIfTagSearch>
			<div class="entry-tags">
				<h4 class="entry-tags-header">タグ:</h4> 
				<ul class="entry-tags-list">
					<MTEntryTags>
					<li class="entry-tag"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName></a></li>
					</MTEntryTags>
				</ul>
			</div>
		</MTIfTagSearch>
	<p class="entry-footer"><span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span></p>

上記がデフォルトのコードです。上記のコードに下記のコードを追加します。

<MTRoundRobin set="gray white"><div style="background:<MTRoundRobin>;"></div>

<MTRoundRobin set="gray white">
<div style="background:<MTRoundRobin>;">
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
	<p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
		<MTIfTagSearch>
			<div class="entry-tags">
				<h4 class="entry-tags-header">タグ:</h4> 
				<ul class="entry-tags-list">
					<MTEntryTags>
					<li class="entry-tag"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName></a></li>
					</MTEntryTags>
				</ul>
			</div>
		</MTIfTagSearch>
	<p class="entry-footer"><span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span></p>
</div>

背景色を交互に変える：アーカイブページ

テンプレート：インデックスのアーカイブページのタグの中で追加する部分のコードを取り出しておきます。以下の部分に追加することで検索結果も交互に表示色を変えることができます。

<h2 id="archive-title">アーカイブ</h2>
	<div class="archive-date-based archive">
		<div class="archive-content">
			<ul class="archive-list">
				<MTArchiveList archive_type="Individual"><MTRoundRobin set="gray white">
				<li class="archive-list-item" style="background: <MTRoundRobin>"><$MTArchiveDate format="%Y.%m.%d"$>: <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
				</MTArchiveList>
			</ul>
		</div>
	</div>

上記のようなコードの追加で交互に表示を変えることができます。背景色はできるだけ淡い色にすることをお勧めします。 カラーコードでの指定もできます。自分で気に入ったカラーの表示に変えてみてはどうでしょうか？
カラーコードは、こちらから取得するといいと思います。

500+ Colours：カラーサンプル・コード取得早見サイト

500+ Colours

http://cloford.com/resources/colours/500col.htm

参考サイト

シックスアパートMovableTypeプラグインディレクトリ：MTRoundRobin

http://www.sixapart.jp/movabletype/plugins/mtroundRobin.html