Movable Type 備忘録

 リストの背景／文字の色を交互に変えてみる for MT4

こんばんわ^^

今は夜中の 1:50 です。もぅすぐ丑三つ時 (;￣∇￣A
訪問者さんと約束したスクリプトをせっせと作る中、たまに浮気してプラグインを試したりして遊んでます。

さっき友人からメールがあって、リストの背景を交互に変えたいとのことだったので、以前ご紹介したリストの背景／文字の色を交互に変えてみるを教えてあげたんですけど、プラグインなしでやりたい･･･とのことだったので、サンプル作って送り返したら返事がない（。－ω－）

どぅやら、人に作らせておいて自分はとっとと寝たっぽいです Σ(￣Д￣；)!!

なので、同様のことを他にもやりたい人がいるかもしれないということで、記事にしておきます。
ちょっと眠いから文章がいつも以上におっかしいかもです。

ここでご紹介する方法は Movable Type 4 でお使いになれます。それより前のバージョンでは使えませんのでご注意ください。

リストの背景／文字の色を交互に変える

交互に背景を変えるには、__odd__、__even__ 変数を使えばカンタンにできます。

  1. <MTEntries lastn="10">
  2. <MTEntriesHeader><ul class="widget_list"></MTEntriesHeader>
  3.  
  4. <li class="widget_list_item <MTIf name="__odd__">odd<MTElse>eve</MTIf>"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a> <$MTEntryDate format="%y/%m/%d"$></li>
  5.  
  6. <MTEntriesFooter></ul></MTEntriesFooter>
  7. </MTEntries>

具体的には赤い字の部分を追加するだけです。
で、以下が CSS になります。

  1. ul.widget_list li.odd {
  2.     background-color: #fffffc;
  3. }
  4. ul.widget_list li.eve {
  5.     background-color: #fdeff2;
  6. }

ね、カンタンでしょ (￣∇￣)b

 Trackback Pings(0)

No trackbacks found.

 Comments(4)

#1: Posted by conan @ February 10, 2008 [REPLY]
user-pic

あせあせいつもエントリーを興味深く拝見させて頂いております。
そこで
コメントが記事とは違うのですが少し質問で申し訳ないのですが
時々他のBlogで見かけるのですが記事の最初の文字だけ大きくしている
記事を見かけます。
また、http://kslabo.wonder-mix.com/のように最初の文字を大きくして
装飾するにはどのようにすれば良いのでしょうか？
もし良ければまた、エントリーして頂ければ幸いです。
宜しくお願いします。

 
#2: Posted by Author Profile Page bzbell @ February 11, 2008 [REPLY]
user-pic

>>1 conan さん

こんばんわ^^

かわぐちさんところがどのようにしてるのか分かりませんが、first-letter 擬似プロパティを使用すれば最初の 1 文字を大文字にすることができます。 

<p class="capitalize">すっかり雪が溶けてしまいました。</p>

以下のようにスタイルしてあげれば OK です。 

p.capitalize:first-letter {
margin-right: .2em;
padding: .5em .1em;
height: 1.4em;
line-height: 1.4em;
float: left;
display: block;
font-weight: 700;
font-size: 160%;
color: #fdeff2;
background-color: #a22041;
border: 1px solid #640125;
}

スタイルは適当なので、conan さんのお好みで変更してくださいチュ！

- 追記 -
ご参考までに、この記事で例を示しました。

 
#3: Posted by conan @ February 11, 2008 [REPLY]
user-pic

>> bzbell さん
早速のご回答ありがとうございます。
参考ソースをアップして頂いたのですがテストできる環境がないのと只今ルータを導入したおかげで
「FFFTP」ソフトが正常に動作しないので参考ソースもイメージできないままです。
実際のイメージを表示して頂ければ幸いなのですがそこまでご無理言えないと思いますので
また、機会があればイメージさせてみようと思います。

追記
ちなみにコメント欄のRESをクリックしても動作しませんね
もしかして不具合でしょうか？

 
#4: Posted by Author Profile Page bzbell @ February 11, 2008 [REPLY]
user-pic

>>3 conan さん

こんにちわ^^

> 実際のイメージを表示して頂ければ幸いなのですがそこまでご無理言えないと思いますのでまた、機会があればイメージさせてみようと思います。

>>2 で追記してますが、このエントリ内だけ使用してますので参考になればと思いますあせあせ

> ちなみにコメント欄のRESをクリックしても動作しませんね
> もしかして不具合でしょうか？

えっ!!キャハハ
わたし使えてるのですが･･･ありがとうございます。確認してみますもじもじ

 

 Post a Comment

 

コメント用フィード