Widget の CSS を修正する

Widget の CSS を修正する

Posted at July 15,2006 8:03 AM
Tag:[MovableType, Widget]

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

1.Widget カレンダー

カレンダーCSS修正前デフォルトCSSでは左のスクリーンショットのように左寄りに表示されてしまっています。ということで、スタイルシート styles-site.css から 下記のセレクタを検索し、width プロパティ値を 14% から 20px に修正します。
.module-calendar .module-content th,
.module-calendar .module-content td {
    width: 20px;
    text-align: center;
}
カレンダーCSS修正前この修正で左のようにほぼ等幅で表示されるようになります。

2.Widget テクノラティ

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

2.1 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表示あり)ラジオボタンの表記を短縮して、Fieldset との padding を設け、submit ボタンの表示も整えましたので、スッキリした感じになります。

2.2 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;
}
テクノラティ修正後(Fieldset表示なし)これで Movable Type の検索フォームに近いレイアウトになります。
関連記事
zenback
人気エントリー
トラックバックURL


コメント

 ホントに簡単便利なWidget 機能だと思ったのですけど、サイドバーにカスタマイズを施している場合は使いにくい部分もあったりして、Widget を利用するのは左右のどちらかだけにしても良いかなぁ、など考えています。例えば休日表示カレンダーとかコメントにnewマークを付ける等々。
 テンプレートの編集画面から難しいタグを設定しなくても位置変更が出来るWidget は便利だけれど、限界もあるのでしょうか。ほとんどこちらでお世話になったカスタマイズですが、捨てがたいという気持ちも大きくて。
 

[1] Posted by 路子 : July 15, 2006 8:59 AM

>路子さん
こんばんは。
Widget Manager は便利なプラグインですが、ブログのどのページに何を表示するかによって使い分けるのが良いと思います。また無理にプラグインを利用する必要もありません。
ではでは!

[2] Posted by yujiro : July 16, 2006 1:17 AM

 ホントにそうですね。新しモノ好きで、すぐに飛びつきたくなってしまうのですけど、使い分けが必要だと思います。
 いつも有り難うございます。

[3] Posted by 路子 : July 16, 2006 5:45 PM

>路子さん
こんばんは。
ご連絡ありがとうございました。
ではでは!

[4] Posted by yujiro : July 18, 2006 12:55 AM

 Movable Type をバージョンアップしたのを機に、念願のliquidを取入れました。本拠地のブログ「きょうはいい日」にこちらのテンプレートを利用させていただきましたので、ご報告します。ってここじゃない方が良かったでしょうか。
 試行錯誤を重ねましたが、yujiroさんはじめ、ここのお仲間のroadさんも助けて下さって、ホントに有り難かったです。
 今後とも宜しくお願いします。

[5] Posted by 路子 : July 18, 2006 7:29 AM

>路子さん
こんにちは。
テンプレートご利用&ご連絡ありがとうございました。
また何かございましたらお気軽にご連絡ください。
こちらこそ今後ともよろしくお願い致します。

[6] Posted by yujiro : July 18, 2006 2:33 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)