小粋空間  -  a cheap joke and a play on words site

Widget の CSS を修正する

Movable Type 3.3x より Widget Manager が標準装備されて Widget を利用される方も少なくないと思います。このエントリーでは Widget の中から見栄えに不満の残る、カレンダーおよび Technorati Search のCSSを若干修正してみました。
表示は Windows2000/XP+IE6.0/Firefox1.5/Opera9.0 で確認しています。

１．Widget カレンダー

デフォルトCSSでは左のスクリーンショットのように左寄りに表示されてしまっています。ということで、スタイルシート styles-site.css から 下記のセレクタを検索し、width プロパティ値を 14% から 20px に修正します。

.module-calendar .module-content th,
.module-calendar .module-content td {
    width: 20px;
    text-align: center;
}

この修正で左のようにほぼ等幅で表示されるようになります。

２．Widget テクノラティ

Widget テクノラティは テクノラティ検索結果を表示するためのもので、fieldset 要素による罫線が目新しいのですが、レイアウトが整然としない印象です。
ここでは Fieldset による罫線表示をそのまま利用したものと、通常の検索フォームに直したものの2種類をご紹介します。

２．１ Fieldset表示あり

デフォルトCSSでは左のスクリーンショットのように表示されます。まず Widget 全体を下記のものに入れ替えてください。

<div class="module-archives module">
  <h2 class="module-header">Technorati</h2>
  <div class="module-content">
    <div id="technorati">
      <form id="ts_s" method="post" action="http://technorati.com/search.php">
      <fieldset>
        <legend><a href='http://www.technorati.com/'>Technorati</a> search</legend>
        <input type="hidden" name="sub" value="searchlet" />
        <input type="text" id="ts_search" name="s" size="28" maxlength="255" value="" /><br />
        <input type="radio" checked="checked" name="from" id="ts_yb" value="http://hogehoge/" />
        <label for="ts_yb" title="First Weblog">このブログ</label>
        <input type="radio" name="from" id="ts_www" value="" /> <label for="ts_www">すべて</label>
        <input type="submit" class="btn" value="検索" />
      </fieldset>
      </form>
      <p id="ts_l" class="ts_l"><a href="http://technorati.com/search/http://hogehoge/" id="ts_lh">» ここにリンクしているブログ</a></p>
    </div>
  </div>
</div>

そして下記のCSSを追加します。

.module-archives fieldset {
    padding:5px;
}
.module-archives label {
    font-size:10px;
    _font-size:8px;
}
.module-archives input {
    font-size: 10px;
}
#ts_search {
    width:100px;
}

ラジオボタンの表記を短縮して、Fieldset との padding を設け、submit ボタンの表示も整えましたので、スッキリした感じになります。

２．２ Fieldset表示なし

こちらも Widget 全体を下記のものに入れ替えてください。

<div class="module-archives module">
  <h2 class="module-header">Technorati</h2>
  <div class="module-content">
    <div id="technorati">
      <form id="ts_s" method="post" action="http://technorati.com/search.php">
      <fieldset>
        <legend><a href='http://www.technorati.com/'>Technorati</a> search</legend>
        <input type="hidden" name="sub" value="searchlet" />
        <input type="text" id="ts_search" name="s" size="20" maxlength="255" value="" />
        <input type="submit" class="btn" value="検索" /><br />
        <input type="radio" checked="checked" name="from" id="ts_yb" value="http://hogehoge/" />
        <label for="ts_yb" title="First Weblog">このブログ</label>
        <input type="radio" name="from" id="ts_www" value="" /> <label for="ts_www">すべて</label>
      </fieldset>
      </form>
      <p id="ts_l" class="ts_l"><a href="http://technorati.com/search/http://hogehoge/" id="ts_lh">» ここにリンクしているブログ</a></p>
    </div>
  </div>
</div>

そして下記のCSSを追加します。fieldset 要素はそのままで非表示にするプロパティを追加しています。

.module-archives fieldset {
    border:none;
    margin:0;
    padding:0;
}
.module-archives label {
    font-size:10px;
    _font-size:8px;
}
.module-archives input {
    font-size: 10px;
}
#ts_search {
    width:100px;
}

これで Movable Type の検索フォームに近いレイアウトになります。