小粋空間: Widget Manager アーカイブ

Top ＞ Movable Type ＞プラグイン＞ Widget Manager [全て開く]

2006年7月15日

Widget の CSS を修正する

July 15,2006 8:03 AM
Tag：[MovableType, Widget]
Permalink

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 の検索フォームに近いレイアウトになります。

Comments [6] | Trackbacks [0]

2006年7月12日

Widget Manager の使い方（その2：公開テンプレートに適用する）

July 12,2006 1:10 AM
Tag：[MovableType, Plugin, WidgetManager]
Permalink

Widget Manager プラグインの応用編ということで、その1 に続き、今回は公開テンプレートを Widget Manager で制御する方法を紹介します。

ここでは 3 カラムレイアウトで適用する例を基本に説明します。2カラムレイアウトについては文中で適宜説明を加えています。

１．テンプレートの修正

公開テンプレートの左カラムおよび右カラムの内容を全て削除し、下記のように MTWidgetManager タグの1行だけになるように変更します。

　　　　　　　：
 　　　　　（省略）
　　　　　　　：
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<$MTWidgetManager name="First Widget Manager"$>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
　　　　　　　：
 　　　　　（省略）
　　　　　　　：
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<$MTWidgetManager name="Widget Manager Right"$>
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
　　　　　　　：
 　　　　　（省略）
　　　　　　　：

2カラムで利用する場合は、上記から不要な方の「×カラム開始?×カラム終了」を全て削除し、残したサイドバーの方に

<$MTWidgetManager name="First Widget Manager"$>

を設定してください。

なお公開テンプレートから削除した内容は新しい Widget として後で使用しますので、エディタの画面または他のファイルに残しておいてください。

２ Widget Manager の作成

Widget Manager はデフォルト状態で使える状態になっていますが、このままでは片方のサイドバーしか制御できないため、3カラムレイアウトで利用する場合は Widget Manager をもうひとつ作成して両サイドバーを制御できるようにします（2カラムでご利用になる場合はこの項目をスキップしてください）。

ブログの管理画面（メイン・メニューからブログ名を選択した次の画面）またはテンプレート一覧画面にある「Widgetの管理」をクリックします。

次の画面の右上にある「Widget Managerを作成」をクリックします。

次の画面左上にある「Widget Managerの名前」に Widget Manager Right を入力します。Widget Manager の名前は何でも構いませんが、１項で作成した

<$MTWidgetManager name="Widget Manager Right"$>

の赤色部分と一致するようにしてください。

また、利用する Widget Manager に Widget がひとつも設定されていない状態で再構築するとエラーになりますので、この時点で新しく作成した Widget Manager に何かひとつ Widget を「インストールされているWidget」にドラッグ＆ドロップしておいてください。

３．テンプレートモジュールの修正

デフォルトで登録されているテンプレートモジュールの中身を、公開テンプレートの各モジュールの内容に入れ替えます。デフォルトのテンプレートモジュールの内容は元に戻すことができませんので、必要に応じてデフォルトテンプレートモジュールの内容を他のファイル等にバックアップしておいてください。
ここでは Widget に登録されている「最近の投稿」に、公開テンプレートの「エントリーリスト（最近のエントリー）」を設定してみます。

管理メニューの「テンプレート」→「モジュール」で「Widget: 最近の投稿」を開き、「テンプレートの内容」をすべて削除します。そして先ほど削除したテンプレートから「エントリーリスト」の部分（下記）をコピーして、「テンプレートの内容」にペーストします。

<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>
<!-- エントリーリスト終了 -->

ここに示している「エントリーリスト」の一番最初の行と最後の行はコメントなので、特に含めなくても問題ありません（ここでは分かりやすくするために含めています）。

同様に、他のテンプレートモジュールも入れ替えてください。公開テンプレートの Widget が対応しているのは下記のテンプレートモジュールです。

Widget: 最近の投稿
Widget: カレンダー
Widget: 最近のコメント
Widget: 検索フォーム
Widget: タグクラウド (サイドバー)
Widget: カテゴリーリスト
Widget: 月別アーカイブリスト
Widget: クリエイティブ・コモンズ（「CCライセンス」が対応します）

対応するテンプレートモジュールが存在しない

Widget: 最近のトラックバック

は、新しくテンプレートモジュールを作成します。

作り方は、テンプレートモジュール一覧の画面右上にある「モジュールを新規作成」をクリックし、次の画面の「テンプレート名」欄に「Widget: 最近のトラックバック」という具合に、先頭に「Widget:」という名称を付与して適当な名前を与え、あとはテンプレートの内容を設定し、保存します。

[参考]MovableTypeで行こう！：Widget Managerに「最近のトラックバック」モジュールを追加する

また、公開テンプレートで Widget として用意されていない

Widget: Technorati Search
Widget: 月別ドロップダウン
Widget: フィードを取得

については、下記のリストをご利用ください。

Widget: Technorati Search

<div class="sidetitle">Technorati</div>
<div class="side">
<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="23" maxlength="255" value="" /><br />
<input type="radio" checked="checked" name="from" id="ts_yb" value="<$MTBlogURL$>" />
<label for="ts_yb" title="<$MTBlogName$>">このブログ</label><br />
<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/<$MTBlogURL$>" id="ts_lh">» ここにリンクしているブログ</a></p>
</div>

Technorati Search を利用する場合は、スタイルシートに下記を追加してください。

fieldset {
    padding:5px;
}

Widget: 月別ドロップダウン

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="sidetitle">Monthly Archives</div>
<div class="side">
<select onchange="nav(this)">
<option>月を選択</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
</MTArchiveList>
</select>
</div>
</MTIfArchiveTypeEnabled>
 
<script type="text/javascript" charset="utf-8">
function nav(sel) {
   if (sel.selectedIndex == -1) return;
   var opt = sel.options[sel.selectedIndex];
   if (opt && opt.value)
      location.href = opt.value;
}    
</script>

Widget: フィードを取得

<div class="side">
<a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
[<a href="http://www.sixapart.com/about/feeds">フィードとは</a>]
</div>

「Widget: フィードを取得」には公開テンプレートの「RSSフィード」を使っても構いません。

設定は以上です。
あとは Widget Manager の利用方法に従って操作してください。3カラムでご利用になる場合は、Widget Managerの名前が「First Widget Manager」が左カラム、「Widget Manager Right」が右カラムになります。2カラムの場合はデフォルトの「First Widget Manager」になります。
必要に応じて新しい Widget を作ってみるのも良いでしょう。

４．アーカイブテンプレートについて

公開テンプレートではインデックステンプレート（メインページ・アーカイブページ）とアーカイブテンプレート（カテゴリー・日付・エントリー）のサイドバーの内容が異なっています（左側のみ）したがって、アーカイブテンプレートにも Widget Manager を適用される場合には

カテゴリーアーカイブ用左サイドバー
日付アーカイブ用左サイドバー
エントリーアーカイブ用左サイドバー

の3つについて、任意の名称で Widget Manager を作成して、さらにテンプレートモジュールも「カテゴリー一覧」と「月別一覧」の2つを作成して、それぞれをカテゴリーアーカイブ用 Widget と日付アーカイブ用 Widget として登録してください。
インデックステンプレートの左サイドバーの内容をアーカイブテンプレートに適用しても正常な表示になりませんのでご注意ください。

2006.07.14 追記
４項を追加しました。

Comments [15] | Trackbacks [3]

2006年7月11日

Widget Manager プラグインの使い方（その1：デフォルトテンプレートを3カラムにして利用する）

July 11,2006 1:27 AM
Tag：[MovableType, Plugin, WidgetManager]
Permalink

Movable 3.3 で新たに追加された Widget Manager プラグイン。このサイトで以前「Sidebar Manager plugin でサイドバーのレイアウトを変更する」で紹介したものがバンドルされたようです。

これで何ができるかと申しますと、サイドバーにある「最近のエントリー」や「カテゴリーリスト」等の Widget（ウィジェット）の表示位置を、プラグインの管理画面（左のスクリーンショット）を使って、ドラッグ＆ドロップで配置や表示・非表示を自由に変更できるようになります。
これを一旦設定してしまえば、Widget の位置を変更するためにテンプレートの編集画面を開く必要がなくなります。

サイドバーに表示するための Widget は、「テンプレートモジュール」としてひとつずつ登録し、Widget を表示するテンプレートには、これまで Widget を表示していた部分を下記のタグに置き換えるだけです。

<$MTWidgetManager name="Widget Managerの名前"$>

基本的な利用方法は Six Apart のページに掲載されています。

Widget Manager

ここでは応用編ということで、デフォルトテンプレートを3カラムに変更し、サイドバーを Widget Manager で制御する方法について記したいと思います。

１．テンプレートの修正

WIdget Manager を利用したいテンプレートの構成を下記のように修正します（サンプルはメインインデックス）。修正した部分を赤、追加した部分を青で示しています。*1

　　　　　　　：
 　　　　　（省略）
　　　　　　　：
<body class="layout-three-column main-index">
　　　　　　　：
 　　　　　（省略）
　　　　　　　：
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
 
      <div id="alpha">
         <div id="alpha-inner" class="pkg">
            <$MTWidgetManager name="First Widget Manager"$>
         </div>
      </div>
 
      <div id="beta">
         <div id="beta-inner" class="pkg">
　　　　　　　：
 　　　　　（省略）
　　　　　　　：
         </div>
      </div>
 
      <div id="gamma">
         <div id="gamma-inner" class="pkg">
            <$MTWidgetManager name="Widget Manager Gamma"$>
         </div>
      </div>
 
   </div>
</div>
　　　　　　　：
 　　　　　（省略）
　　　　　　　：

全体の構成としては

alpha：左カラム
beta：中央カラム
gamma：右カラム

になります。

上記の変更手順ですが、まず body 要素の class 属性を layout-three-column にします。

次に、エントリー本文を表示している

<div id="alpha">
   <div id="alpha-inner" class="pkg">
　　　　：
　　（省略）
　　　　：
   </div>
</div>

の alpha および alpha-inner という名称を beta および beta-inner に変更します。

さらに、

<div id="beta">
   <div id="beta-inner" class="pkg">
　　　　：
　　（省略）
　　　　：
   </div>
</div>

の beta および beta-inner という名称を gamma および gamma-inner に変更します。gamma の内容はサイドバーになっていますので、これらをごっそり削除して、

<$MTWidgetManager name="Widget Manager Gamma"$>

の1行に変更します。

最後に、beta に変更したタグの直前に

<div id="alpha">
   <div id="alpha-inner" class="pkg">
      <$MTWidgetManager name="First Widget Manager"$>
   </div>
</div>

を追加します。

２ Widget Manager の作成

Widget Manager はデフォルト状態で使える状態になっていますが、このままでは片方のサイドバーしか制御できないため、Widget Manager をもうひとつ作成して両サイドバーを制御できるようにします。

ブログの管理画面（メイン・メニューからブログ名を選択した次の画面）またはテンプレート一覧画面にある「Widgetの管理」をクリックします。

次の画面の右上にある「Widget Managerを作成」をクリックします。

次の画面左上にある「Widget Managerの名前」に Widget Manager Gamma を入力します。Widget Manager の名前は何でも構いませんが、１．１項で作成した

<$MTWidgetManager name="Widget Manager Gamma"$>

の赤色部分と一致するようにしてください。

これで再構築すれば 3カラムで表示され、さらに Widget Manager によって Widget を制御できるようになります。

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Comments [0] | Trackbacks [5]

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

Widget の CSS を修正する

１．Widget カレンダー

２．Widget テクノラティ

２．１ Fieldset表示あり

２．２ Fieldset表示なし

Widget Manager の使い方（その2：公開テンプレートに適用する）

１．テンプレートの修正

２ Widget Manager の作成

３．テンプレートモジュールの修正

Widget: Technorati Search

Widget: 月別ドロップダウン

Widget: フィードを取得

４．アーカイブテンプレートについて

Widget Manager プラグインの使い方（その1：デフォルトテンプレートを3カラムにして利用する）

１． テンプレートの修正

２ Widget Manager の作成

１．テンプレートの修正