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

当サイトで配布しているテンプレート（3・2・1カラム固定レイアウトおよび1カラムリキッドレイアウト）の、ブログの左右および下部に表示されている背景の背景色を変更する方法です。

まずはサンプルをご覧ください。

変更前

変更後

以下、変更方法です。

１．固定レイアウト（3カラム／2カラム／1カラム）の場合

リスト1.1に示すスタイルシートの赤色部分を変更します。この設定はスタイルシートの後方にあります。

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}

リスト1.1 固定レイアウト（3カラム／2カラム／1カラム）の場合

２．1カラムリキッドレイアウトの場合

リスト2.1に示すスタイルシートの赤色部分を変更します。１項と同様、この設定もスタイルシートの後方にあります。

body.layout-one-column-liquid {
    background: #36414d;
}

リスト2.1 1カラムリキッドレイアウトの場合

３．変更例：背景色をグレーに変更

冒頭のスクリーンショットの「変更後」の設定はリスト3.1のように変更しています。色はお好みに応じて変更してください。

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #dddddd;
}

リスト3.1 変更例

カラーの指定方法は、例えば下記にあります。

eWeb：Web配色の見本：Webセーフカラー216色／カラーネーム一覧

その他、Google 等の検索エンジンで「Web」と「配色」「カラー」「カラーチャート」「RGB」等を組み合わせたキーワードで検索すると色々出てきます。

Movable Type で一旦公開したエントリーを削除した場合、対象のエントリー・アーカイブはデータベースから削除され、メインページやカテゴリー・アーカイブ／月別アーカイブに表示された記事、さらに各ページに貼られた対象エントリーへのリンクもすべて消滅しますが、Movable Type を普通にインストールしたままの状態では、エントリーを公開した時点で生成されるHTMLファイルは残ってしまいます。

したがって、対象となるエントリーの公開→削除のタイミングによっては検索ロボットにクロールされてしまい、削除したはずのエントリーが検索エンジン経由で他の方に閲覧されてしまう可能性があります。*1

これは公開したエントリーを「非公開」に変更した場合や出力ファイル名を変更した場合も同様です。

このような事態を回避したい場合、これまではFTPツール等を利用して手動で残ってしまったHTMLファイルを削除する必要がありましたが、3.3 からはオプション機能として、

• エントリー削除
• 「公開」から「非公開」への変更
• ファイル名変更

の各操作と同時に、該当のHTMLファイルも Movable Type が自動的に削除してくれるようになりました。

参考サイトは下記です。ありがとうございました。

MovableTypeで行こう！：Movable Type 3.3-jaにアップデートしました
MovableType備忘録：ブログを上手に運用する

１．設定方法

Movable Type をインストールしたディレクトリにある、mt-config.cgi に下記の1行を追加します。

DeleteFilesAtRebuild 1

さらに具体的に説明すると、サーバにアップロードしている mt-config.cgi をダウンロードして、任意のエディタで開き、リスト1のように青色の行を追加し（こういう場合のお作法として、追加した行の行末には改行をいれておきましょう）、ファイルを保存後、mt-config.cgi を元の場所に再度アップロードします。

##          Movable Type configuration file                   ##
##                                                            ##
## This file defines system-wide settings for Movable Type    ##
## In total, there are over a hundred options, but only those ##
## critical for everyone are listed below.                    ##
##                                                            ##
## Information on all others can be found at:                 ##
## http://www.sixapart.jp/movabletype/manual/config
 
################################################################
##################### REQUIRED SETTINGS ########################
################################################################
 
# The CGIPath is the URL to your Movable Type directory
CGIPath    http://www.example.com/cgi-bin/mt/
 
# The StaticWebPath is the URL to your mt-static directory
# Note: Check the installation documentation to find out 
# whether this is required for your environment.  If it is not,
# simply remove it or comment out the line by prepending a "#".
StaticWebPath    http://www.example.com/mt-static
 
#================ DATABASE SETTINGS ==================
#   REMOVE all sections below that refer to databases 
#   other than the one you will be using.
 
##### SQLITE #####
ObjectDriver DBI::sqlite
Database /path/to/sqlite/database/file
 
DeleteFilesAtRebuild 1

リスト1　mt-config.cgi への設定例

２．各操作におけるファイル削除・リンク変更等の振る舞いについて

デフォルトテンプレートを元に、

• エントリー削除
• 「公開」から「非公開」への変更
• エントリー編集画面の「出力ファイル名」を変更
• 管理画面の「アーカイブマッピング」欄の「出力ファイル名」を変更

の各操作について、

A.対象エントリーに対応するHTMLファイル削除

B.対象エントリーの前後エントリーに設定された（対象エントリーの）リンクの削除または変更

C.カテゴリー・アーカイブ／日付アーカイブの（対象エントリーの）記事の削除または変更

D.メインページの（対象エントリーの）記事・リンクの削除または変更

が、それぞれどのようになるか実験してみました（3つのエントリーを「公開」で保存し、中間のエントリーを操作）。
実験結果は表1の通りです。

ご覧の通り、HTMLファイル自体はどの操作でも概ね削除されます。他のページに残存したリンクは一部再構築が必要なようです。

*1：「ダイナミックパブリッシング」を利用している場合、このような事象は発生しません。
*2：エントリー一覧画面右上にあるプルダウンメニューの「非公開にする」の操作ではファイルは削除されませんでした。

このサイトの右下に表示しているカウンタがまもなく 2222222 に到達します。現在のアクセスからすると本日中に超えそうです。

このカウンタはサイト開設当初の2004年5月から設置しているもので、その値はいわゆる「ページビュー」と、隣りに設置している「ビジット」カウンタの中間くらいの粒度で更新されているようです（IPチェックは行っている筈なのでやや閾値が低いビジットと言えるでしょう）。

ということで、2222222 のキリ番をゲットされた方は、カウンタおよびブラウザ内の他の部分を含んだキャプチャ画面をメールでお送り頂ければ、貴サイトを当サイトのエントリーにて紹介させて頂きます。*1

*1：サイト内容によってはお断りする場合があります。予めご了承ください。

飲みに行く。

先日公開した CommentOrderNumberByDescend プラグインをバージョンアップしました。

バージョンアップの内容は次の通りです。

• コメント内の MTCommentOrderNumberByDescend タグの重複設定に対応しました
• 複数エントリーアーカイブで利用するケースに対応しました
• MTComments タグに lastn 属性が付与されている場合、MTCommentOrderNumberByDescend で表示する初期値として、「コメント総数」あるいは「lastn値」のいずれかを選択できるようにしました（同一コメント内で両者を共存させることも多分可能）

設定方法の詳細等につきましては元エントリーを参照ください。

シックス・アパート社より、個人向け無料ブログ・サービス「Vox」が、本日10月27日より、日本・米国・フランスの3ヶ国で同時公開されました。

シックス・アパート、家族でも使える、安心な無料ブログ・サービス「Vox」を世界同時公開

シックス・アパートは本日、家族でも使える、安心な無料ブログ・サービス「Vox」を世界同時公開したことを発表いたします。「Vox」はこれまでのブログサービスとは違う、手軽さと安心を両立させたサービスです。自由に登録できますので、ぜひ「Vox」でのブログをお試しください。

ベータ版では既存利用者からの招待制となっていましたが、正式版は「Vox」サイトから自由にユーザー登録することができます。

Vox の主な特徴は次の通りです（詳細は引用記事参照）。

• ブログで初めて、柔軟できめ細かい閲覧制限機能を提供
• 150種類を超える豊富なテンプレート集から自分のブログのデザインを簡単に変更可能
• 高機能なWYSIWYGエディタと、コンジット *1 連携により、簡単にリッチな記事を作成
• 携帯電話からの登録および投稿・閲覧が可能
• 「今日の質問（QotD）」や「Vox Hunt」など、ブログを書き続ける工夫をサービスとして提供

*1：他のパートナー企業が提供しているウェブサービスを「Vox」の中に簡単に組み込めるようにする仕組み

ということで、ここでは下記の3項目に分けて説明します。

1. 基本設定
2. 選択状態を保持する
3. 公開テンプレートの1カラムレイアウトでの設定

１．基本設定

プルダウンメニューを選択すると、即座に月別アーカイブにジャンプする設定です。
リスト1.1のHTMLタグおよびスクリプトをそのままサイドバーに貼り付けてください。赤色部分はメニュータイトルですのでご自由に変更してください。

<script type="text/javascript">
<!--
function selectUrl(sel){
    if(sel.options[sel.selectedIndex].value){
        location.href = sel.options[sel.selectedIndex].value;
    }
}
//-->
</script>
 
<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side" id="monthlylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<option value="">選択してください</option>
<!--archive-->
<option value="<%archive_link>"><%archive_year>年<%archive_month>月 [<%archive_count>]</option>
<!--/archive-->
</select> 
</form>
</div>

リスト1.1　HTMLとスクリプト

form を括っている div 要素も任意ですので削除しても構いませんが、２項の機能を有効にする場合は 「id="monthlylist"」を form 要素に付与してください。

プルダウンメニューのフォントサイズ等を変更する場合、リスト1.2のようなものをスタイルシートに追加してください。

select {
    font-size: 10px;
}

リスト1.2　スタイルシート

２．選択状態を保持する

下記のスクリプトをリスト1.1 のすぐ下に追加するだけで、ジャンプ先の月別アーカイブページで、選択した年月がプルダウンメニューに表示されるようになります。全体を <!--date_area-->～<!--/date_area--> で括ってますので、月別アーカイブページ以外では無効（先頭の「選択してください」を表示）になるようにしています。

<!--date_area-->
<script type="text/javascript">
<!--
var data ="<%now_year><%now_month>";
var year = data.substring(0,4);
var month = data.substring(4,6);
var nodes = document.getElementById('monthlylist').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
    var selectYear = nodes[i].innerHTML.substring(0,4);
    var selectMonth = nodes[i].innerHTML.substring(5,7);
    if(year == selectYear && month == selectMonth){
        nodes[i].selected = true;
    }
}
//-->
</script>
<!--/date_area-->

リスト2.1　選択状態を保持するスクリプト

３．公開テンプレートの1カラムレイアウトでの設定

FC2ブログを1カラムレイアウト（サイドバーなし）にすることで、シンプルな日記サイトにすることができ、さらに月別アーカイブへのリンクが表示されれば過去の記事に簡単にジャンプできるようになります。
基本的には１項・２項の設定を任意の位置に追加すれば良いのですが、ここではフッタに表示する例として、当サイトの公開テンプレート（1カラムリキッドレイアウト・1カラム固定レイアウト共通）を用いたカスタマイズを紹介します。

下記にサンプルを用意しましたのでご確認ください（表示のみでプルダウンは動作しません）。

1カラムリキッドレイアウト
1カラム固定レイアウト

カスタマイズ方法は、「FC2 ブログテンプレート」の中央カラム終了部分を探して、リスト3.1に示している赤色部分を削除し、青色部分を追加してください。

なおカラムレイアウトの変更方法についてはここでは割愛しています。「FC2 ブログテンプレート」の本文記事をご覧ください。

　　　　：
<!-- コメント編集 -->
</div><!-- /blog -->
 
<!-- for one column
<div id="footer-one">
<script type="text/javascript">
<!--
function selectUrl(sel){
    if(sel.options[sel.selectedIndex].value){
        location.href = sel.options[sel.selectedIndex].value;
    }
}
//-->
</script>
 
<div id="monthlylist">
<form style="display:inline;">
<select name="select" onChange="selectUrl(this.form.select)" style="margin-bottom:6px;">
<option value="">選択してください</option>
<!--archive-->
<option value="<%archive_link>"><%archive_year>年<%archive_month>月 [<%archive_count>]</option>
<!--/archive-->
</select> 
</form>
 
<!--date_area-->
<script type="text/javascript">
<!--
var data ="<%now_year><%now_month>";
var year = data.substring(0,4);
var month = data.substring(4,6);
var nodes = document.getElementById('monthlylist').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
    var selectYear = nodes[i].innerHTML.substring(0,4);
    var selectMonth = nodes[i].innerHTML.substring(5,7);
    if(year == selectYear && month == selectMonth){
        nodes[i].selected = true;
    }
}
//-->
</script>
<!--/date_area-->
<a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><br />
</div>
<span id="ad1"><script type="text/javascript">var j = '22';</script><script type="text/javascript" src="http://blog42.fc2.com/i/image/janre.js"></script></span><noscript><p>FC2Ad</p></noscript> | <span id="ad2"><strong><a href="http://blog.fc2.com/" title="FC2ならブログも簡単・大容量！">FC2ブログ</a></strong> <strong><a href="http://shoukaiyotei.com/" title="紹介予定派遣">紹介予定派遣</a></strong></span><br />
<p style="margin:10px 0 0 0">Copyright © 200x xxxxx. All Rights Reserved.</p>
</div>
/for one column -->
 
</div><!-- /content -->
<!-- 中央カラム終了 -->
　　　　：

リスト3.1　公開テンプレート・1カラムレイアウト用のプルダウンメニュー

以前当サイトで紹介させて頂いた、「Movable Typeでつくる!最強のブログサイト―Movable Type3.2対応」の 3.3 版が出版されました。

著書の南大沢ブロードバンド研究所さんのサイトでも紹介記事がアップされています。

Movable Type 3.3でつくる!最強のブログサイト 小川 晃夫 南大沢ブロードバンド研究会 ソーテック社 2006-10 売り上げランキング : 9662 Amazonで詳しく見る by G-Tools

以下、章単位に内容の紹介です。

Part1　ブログとは何か？

ブログの基礎知識と種類について。最近登場したばかりの Vox についても紹介されています。

Part2　Movable Type を使ってみよう

誌面の 1/4 程度がこの Part2 で、Movable Type のインストールから基本的な操作方法と管理画面の利用方法について紹介されています。管理画面は「投稿」「コミュニティ」「環境設定」の項目ほぼ全てと、Typekey についての解説が記載されています。

Part3　Movable Type の仕組みを理解しよう

Movable Type の仕組みと、各テンプレートの説明と代表的なタグの説明、そして簡単なカスタマイズが約30ページで解説されています。またスタイルシートの利用方法についても紹介されています。

Part4　ブログのカスタマイズ-基本編

本書のメインとなる部分で、Part5 と併せて誌面のほぼ半分がカスタマイズ記事で占められています。
内容は、StyleCatcher によるデザイン変更方法と仕組み、また 3 カラムへの変更方法とデザインの変更、そして基本的なカスタマイズ（ナビゲーションメニュー・カレンダー・最近のコメント・最近のトラックバック・リンクバナー等）。

Part5　ブログのカスタマイズ-応用編

さらに読み応えのある内容で、検索機能（Google 検索・e-Words 表示・Google Search プラグイン）、静止画・動画配信、プラグイン利用によるフォトアルバム、アフィリエイトの設置、携帯による閲覧と投稿、ポッドキャスティング、Web2.0 系サービス - 3.3 から導入された「Widget Manager」によるタグクラウド／RSSリスティング／livedoorお天気プラグイン／「テクノラティ」検索モジュール、エントリーへの Google Map 表示、U2B Player（YouTubeプレーヤー）の設置等 - についての解説。
個人的には「Seesaa ブログを利用したRSSプレイヤー」が目からウロコでした。

Part6　Movable Type をもっと活用しよう

TinyMCE をハックした管理画面のカスタマイズ、3.3 から導入されたログ・フィードの利用、XML-RPCインタフェースの利用（BlogWriteクライアントツール）、バックアップとアップグレードが記されています。

今回は当サイトとの連携は特にありませんが、コラム欄にて紹介くださってます。この場をお借りしてお礼申し上げます。ありがとうございました。

ということで、Movable Type 3.3 の基本的な利用方法からしっかりしたカスタマイズまで、きめ細かく網羅された1冊と言えるでしょう。かゆい所に手が届く Tips 的な内容もかなり豊富です。
ちなみに 3.2 版の前書を購読し、その内容にしたがってサイトを構築されてこのサイトに訪問された方もかなりいらっしゃいました。

ご興味のある方は是非お求めくださいますよう、よろしくお願い申し上げます。

公開中の Seesaa ブログテンプレートついて、「フッタにセンタリング表示している Seesaa ブログのバナーを Firefox 等の Mozilla 系ブラウザで閲覧するとセンタリングされない」という問題がみつかったため、修正致しました。

また Seesaa ブログで提供されているテンプレートについても同様の事象が発生しているようです（サンプル表示で確認した限り）ので、原因と対処方法を紹介します。

１．センタリングされない原因

公開テンプレートに設定されたフッタ（青色）はリスト1.1のようになっています。他のテンプレートも同様の設定のものが多いようです。

<div id="footer">
<% content_footer -%>
</div>

リスト1.1　Seesaa ブログのフッタ（テンプレート）

またそれに対応する CSS はリスト1.2のようになっています。

#footer {
    text-align: center;
}

リスト1.2　フッタのCSS

これで正常にセンタリングされるように思われますが、リスト1のテンプレートから再構築によって生成された HTML は、リスト1.3の青色の内容に変換されます。

<div id="footer">
<div class="powered">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://seesaa.jp"><img src="http://blog.seesaa.jp/img/seesaablog.gif" width="138" height="22" border="0" alt="Powered by Seesaa" /></a></td>
</tr>
<tr>
<td><div style="background-color:#9C9C9C;text-align:center;font-size:10px;padding:3px;margin:0px;"><a href="http://seesaa.jp" style="color:#FFF;">Seesaa</a><a href="http://blog.seesaa.jp" style="color:#FFF;">ブログ</a></div></td>
</tr>
</table>
</div>
</div>

リスト1.3　Seesaa ブログのフッタ（HTMLに展開後）

ご覧の通り、Seesaa ブログのバナーが table 要素（つまりブロックレベル要素）で括られます。

table 要素をセンタリングするためには、昨日エントリーした「CSSでブロックレベル要素をセンタリングする」の設定が必要ですが、リスト1.2 の設定しか行われていないとセンタリングされないという不具合が発生します。

公開テンプレートについては「バナーはインライン要素で表示」と思い込んでいたこと、また Firefox / Opera での表示の確認がきちんとできておりませんでした（IE6ではテンプレートは「後方互換モード」と認識されるため本問題が顕在化しません）。申し訳ございません。

２．対処方法

スタイルシートにリスト2.1のセレクタを追加してください

.powered {
    margin-left: auto;
    margin-right: auto;
    width:138px;
}

リスト2.1　スタイルシートに追加するセレクタ

当サイトの Seesaa ブログテンプレートをお使いの場合は、下記に該当する方が対象です。ご迷惑をおかけして申し訳ございませんがよろしくお願い致します。

• 2006.10.21 以前にテンプレートを利用
• テンプレートのフッタバナー部分を修正していない

他のテンプレートをご利用の方も同様の修正を行いますが、

• リスト1.1 のマークアップになっていること
• リスト1.2 の CSS が設定されていること

が前提です。該当しない場合は「CSSでブロックレベル要素をセンタリングする」を参考にして修正してみてください。

インライン要素をセンタリングする場合は、その要素のCSSで

text-align: center;

という text-align プロパティを与えれば良いのですが、div や table 等のブロックレベル要素をセンタリングする場合、例えば下記のようにマークアップされた ブロックレベル要素、

<div id="test">[ブロックレベル要素]</div>

をセンタリングする場合は、CSSに下記のような設定を行います。

#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

ブロックレベル要素のセンタリングは上記が正しい方法で、Firefox や Opera、また IE6 の「標準準拠モード」や最近リリースされた IE7 では上記の設定で正常に表示されますが、IE6 の「後方互換モード」ではブラウザにバグがあるため、センタリングされません。*1

したがって、IE6 の「後方互換モード」でも同じようにセンタリングさせるためには、前述の div 要素をさらに div 要素でラップし、

<div id="wrap">
<div id="test">[ブロックレベル要素]</div>
</div>

追加した div 要素のスタイルに text-align プロパティを追加します。これは IE6 のバグを利用した手法です。*2

#wrap {
    text-align: center;
}
#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

これでいずれのブラウザでもセンタリングされるようになります。
なお #wrap に設定した text-align プロパティは #test に対しても有効になるため、例えば内部のインライン要素を左寄せにする場合は、#test あるいはインライン要素に対して text-align: left を追加してください。

逆に、IE6 の後方互換モードでしかHTMLの表示確認をしていない場合、誤って

#test {
    text-align: center;
}

というマークアップをしていると、Firefox 等ではセンタリングされませんのでご注意ください。

*1：「標準準拠モード」と「後方互換モード」の詳細については「標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する」が参考になれば幸いです。

*2：参考 - Web標準普及プロジェクト：ブロックレベル要素をセンタリングする方法

タイトルバナー下にナビゲーションバーを設置している場合、その左右に別の部品を並べて配置したい時のテクニックです。

ここでは、以前紹介した「ナビゲーションバー・シンプルタイプ」に「サイドバーの折りたたみ」の折りたたみマークを合体させ、ナビゲーションバーの左右に折りたたみマークを配置するカスタマイズを紹介します。

下記にサンプルを用意しました。

ナビゲーションバーにサイドバーの折りたたみマークを並べて表示

以下、基本構造および公開テンプレートによるサンプルで説明します。仕組みはタイトルの通り、3カラムレイアウトのCSSをナビゲーションバー部分に適用しています。
ナビゲーションバーの他、横型カレンダーとの組み合わせも（多分）可能です。

１．基本構造

１．１ HTML

HTMLマークアップは次のようになります。ul - li 要素は div 要素でも問題ありません。下から2行目の br 要素（の class 属性）は回り込み解除のため必須です。

<div id="navi">
<ul id="left"><li>[左に表示する部品]</li></ul>
<ul id="navbar"><li>[中央に表示する部品]</li></ul>
<ul id="right"><li>[右に表示する部品]</li></ul>
<br class="clear" />
</div>

リスト1.1　基本的なHTML

１．２ スタイルシート

下記の通りです。基本的な構造は3カラム固定レイアウトと同じです。

#navi {
    padding: [部品全体のパディング];
}
#navi ul {
    margin: 0;
    padding: 0;
    float:left;
}
#navi ul,
#navi ul li {
    display: inline;
}
#navbar {
    width: [中央に配置する部品の幅];
    text-align: center;
}
#left {
    width: [左に配置する部品の幅];
}
#right {
    width: [右に配置する部品の幅];
}
.clear {
    clear: both;
} 

リスト1.2　基本的なCSS

２．ナビゲーションバーとサイドバーの折りたたみマークを合体

サイドバーの折りたたみ用タグ

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
</div>

リスト2.1　サイドバーの折りたたみ用タグ

と、ナビゲーションバーのタグ

<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>

リスト2.2　ナビゲーションバーのタグ

を合体すると下記のようになります。ナビゲーションバー部分は青で示しています。

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
</div>

リスト2.3　同時に表示させる場合のタグ

これだけでは横1列に並んで表示されないため、１項と同じ構造にするため、赤色部分を追加します。

<div id="navi">
<ul id="left"><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<ul id="navbar"><li>
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</li></ul>
<ul id="right"><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
<br class="clear" />
</div>

リスト2.4　同時に表示させる場合のタグを修正

これに下記のCSSをスタイルシートに追加します。折りたたみマークは text-align プロパティで一旦両端に配置してから padding プロパティで位置を調整しています。

#navi {
    border-bottom: 1px solid #666699;
    padding: 3px 0;
    font-size: 12px;
}
#navi ul {
    margin: 0;
    padding: 0;
    float:left;
}
#navi ul,
#navi ul li {
    display: inline;
}
#navbar {
    width: 600px;
    _width: 598px;
    text-align: center;
}
#left {
    width: 125px;
    text-align: left;
}
#left li {
    padding-left: 18px;
}
#right {
    width: 125px;
    text-align: right;
}
#right li {
    padding-right: 18px;
}

リスト2.5　同時に表示させる場合のCSS

以上です。やっつけで作ったものですので誤りがありましたらお許しを。

以前エントリーした「サーバ不具合について」で「503エラーが多発しています」とお知らせした、その後の状況です。

長期的な 503 は発生しなくなりましたが、現在も間欠的に発生している模様です。ただし異常なプロセスは発生していないので、サーバを複数ユーザで共有しているというサーバの性能の問題、つまりサーバ移転という選択肢以外に解決できない状況になっているかもしれません。

それとは別に、mt4i からのコメントスパムが発覚し（関連記事）、mt4i のプログラム攻撃の懸念と CGI プログラム削減の意味も含め、現在 mt4i の使用は中止しています。

2006.12.17 追記：mt4i は 2.1（または 2.2β1）にバージョンアップして、スパム対策が施されています。

Movable Type のテンプレート・タグを一覧にしました。アルファベット順と機能別の切り替え表示が可能です。MTタグのリンクは Movable Type 3.3 マニュアルのテンプレート・タグ リファレンスの各タグ名に直接ジャンプするようにしています。*1 *2

ということでよろしければご利用ください。できればバージョンアップにも追従していきたいと思います。