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

RSSリーダーには feedpath Rabbit を愛用させて頂いているのですが、要望事項をひとつ（このエントリーは feedPath Rabbit フィードバックの参照先にしています）。

要望事項は、記事の本文表示領域（縦方向）を広くして欲しいということです。

SXGA（1280×1024）等でブラウザを大きめにしていると、タイトル部分（赤枠部分）をクリックすると

そこに本文が表示され、問題なく読めるのですが、

XGA（1024×768）で、ブラウザのサイズを、他のページは普通に読める程度の小さめの状態にしていると（下）、

本文は右下1/4程度しか表示されなくなります。

左サイドバーは非表示にできますが、それでも本文はブラウザの1/2程度です。

一番の問題は、ヘッダやタブを含めた上半分がスクロールできないことです。それに加えて、ブラウザの横幅を狭くすると、本文表示領域のすぐ上にある「まとめ読み」「アーカイブ」「本文を開く」「未読にする」といったアイコンが縦に並んでしまうことも、表示領域を狭くしている要因の一つなっています。

ブラウザの横幅を広くしている時

ブラウザの横幅を狭くした時

ということで、縦方向の表示領域を改善して頂けるとありがたいです。

Movable Type 4 のデフォルトテンプレートでは、ブログ記事にアップロードした画像のサムネイルの一覧を表示する「Photos」がサイドバーにあります（下）。

ただし、Perlモジュールの Image::Magick がインストールされていない環境では、MTAssetThumbnailURL タグが正常に動作しないようで、「Photos」にサムネイルが表示されません。

レンタルサーバをご利用であればこのような事象に遭遇することはないと思いますが、もし表示されない場合は、モジュールテンプレートの「サイドバー(2カラム)」または「サイドバー(3カラム)」の下記の赤色部分

<MTIf name="main_index">
    <MTIfNonZero tag="AssetCount">
        <MTAssets type="image" lastn="10">
            <MTAssetsHeader>
        <div class="widget-assets widget">
            <h3 class="widget-header">Photos</h3>
            <div class="widget-content">
                <ul class="widget-list"></MTAssetsHeader>
                <li class="item"><a class="asset-image" href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /></a></li>
            <MTAssetsFooter></ul>
            </div>
        </div>
            </MTAssetsFooter>
        </MTAssets>
    </MTIfNonZero>
</MTIf>

を、下の青色の内容に変更してください。

<MTIf name="main_index">
    <MTIfNonZero tag="AssetCount">
        <MTAssets type="image" lastn="10">
            <MTAssetsHeader>
        <div class="widget-assets widget">
            <h3 class="widget-header">Photos</h3>
            <div class="widget-content">
                <ul class="widget-list"></MTAssetsHeader>
                <li class="item"><a class="asset-image" href="<$MTAssetURL$>"><img src="<$MTAssetURL$>" width="70" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /></a></li>
            <MTAssetsFooter></ul>
            </div>
        </div>
            </MTAssetsFooter>
        </MTAssets>
    </MTIfNonZero>
</MTIf>

とりあえず、これでサムネイルっぽく表示されるようになります。

Movable Type 3.3x のエントリー投稿時に、「保存」や「確認」等のフォームボタンをグレーアウトするプラグインを紹介します。

このプラグインを利用すれば、スクリーンショットのようにエントリー投稿画面の「保存」ボタンをクリックした時、フォームボタンがグレーアウトされるので、二重投稿などを防止することができます。

また、プレビュー画面でも同様の動作を行うことができます。

以前、コメント投稿時のユーザビリティを向上させる「コメント投稿時にフォームボタンをグレーアウトする for Movable Type」の管理画面版です。

MT4 リリース後ですが、MT3 ユーザの方よりご要望がありましたので、作ってみました。

１．プラグインのダウンロード

下記のリンクより、プラグインアーカイブをダウンロードしてください。

DisableFormButton.zip

変更履歴

2007.09.27 初版
2007.10.02 v0.02 エントリー一覧画面でJavaScriptエラーになる不具合を修正

２．プラグインのインストール

アーカイブを解凍し、解凍した内容を plugins ディレクトリおよびスタティックディレクトリに、それぞれ下記のように配置してください。

mt-static/
　　plugins/
　　　　DisableFormButton/
　　　　　　js/
　　　　　　　　disableFormButton.js
plugins/
　　DisableFormButton.pl

管理画面の「システム･メニュー」→「プラグイン」に DisableFormButton が表示され、エントリー投稿画面で JavaScript エラーが表示されていなければインストール完了です。

設定する項目はありませんので、エントリーを投稿して、プラグインの機能が有効であることを確認してください。

３．注意事項

フォームボタンに他のボタンを追加してるプラグインを利用している場合は、正常に動作しない可能性があります。

また本プラグインは「Movable Type 3.3x 対応」としていますが、動作確認は 3.35-ja のみでしか行っていません。動作しない場合はお手数ですがご連絡くださいますようお願い致します。

Movable Type で画像挿入時の form 要素について、下記のエントリーを拝見して「なるほど！」と思いましたので、ご紹介させて頂きます。

WingMemo: サムネイルリストからブログ記事（エントリー）にリンクを張る (MT４用)

MT4のブログ記事作成で画像を挿入し、テキストエリアを「リッチテキスト」以外で参照すると（あるいは最初から「リッチテキスト」以外で編集すると）画像表示用の img 要素が form 要素で括られます。

<form class="mt-enclosure mt-enclosure-image" mt:asset-id="5"><img class="mt-image-left" style="FLOAT: left; MARGIN: 0px 20px 20px 0px" height="426" alt="tea.jpg" src="http://your-domain/images/hoge.jpg" width="640" /></form>

これは MTEntryAssets タグを有効にするための裏情報になるらしいです（詳細は元記事をご覧ください）。

関連で下記の記事もありました。

The blog of H.Fujimoto：画像を挿入したときにformタグがつく理由

この処理が行われることで、ブログ記事で挿入した画像は、MTEntryAssets タグの対象となり、ファイルアップロード機能で、アップロードしただけの画像は（当たり前ですが）MTEntryAssets タグの対象にならないということです。

上記以外の情報として、ソースコードを眺めてみると、lib/MT/Util.pm に asset_cleanup というサブルーチンがありました。

sub asset_cleanup {
    my ($str) = @_;
    $str =~ s/
        <(?:[Ff][Oo][Rr][Mm]|[Ss][Pp][Aa][Nn])
        ([^>]*?)
        \s
        mt:asset-id="\d+"
        ([^>]+?>)(.*?)
        <\/(?:[Ff][Oo][Rr][Mm]|[Ss][Pp][Aa][Nn])>
    /
    my $attr = $1 . $2;
    my $inner = $3;
    $attr =~ s!\s[Cc][Oo][Nn][Tt][Ee][Nn][Tt][Ee][Dd][Ii][Tt][Aa][Bb][Ll][Ee]=(['"][^'"]*?['"]|[Ff][Aa][Ll][Ss][Ee])!!;
    '<span' . $attr . $inner . '<\/span>'
    /gsex;
    return $str;
}

このサブルーチンは、lib/MT/Template/ContextHandlers.pm 内で、MTEntryBody タグあるいは MTEntryMore タグの処理の最後で、mt:asset-id="AssetID" の文字列がある場合に起動されます。

sub _hdlr_entry_body {
　　　　　：
　　　（中略）
　　　　　：
    # Strip the mt:asset-id attribute from any span tags...
    if ($text =~ m/\smt:asset-id="\d+"/) {
        $text = asset_cleanup($text);
    }
    return $text;
}

ということで、勉強になりました。ありがとうございました。
何故 form タグ？というのが知りたいところです。

ブログツールの Serene Bach が MySQL / SQLite 対応の 3.00α版をリリースしました。

Serene Bach 3.00α版についてのお知らせ

Serene Bach 2.*と比較して、主に以下のような変更点があります。

• MySQL / SQLite に対応しました。
• 管理画面インタフェースを刷新しました。
• 内部の perl モジュール構成を全面的に見直しました。

α版を希望される場合は上記エントリーに記載されたメールアドレスへ希望する旨のメールを送信してください。
なお、現バージョンでは、旧バージョンからのアップグレード手順のみしかサポートされていません。

Serene Bach の DB 対応により、データをファイルで保存していた旧バージョンからのパフォーマンス向上が期待されます。
また、テンプレートやカスタマイズ等、やや落ち着いた感がありましたが、これを機に Serene Bach の話題がネット上で活発になりそうな気配です。

ここ3日ほど所用で PC に触れることができなかったのですが（その間のエントリーは予約投稿）、事前にメールで頂いていたα版を試してみたいと思います。

配布中の「livedoor ブログテンプレート」に不具合がありました。下記に具体的な内容と、修正方法についてお知らせ致します。

１．問題

カレンダーのリンクをクリックしても、該当の記事（月別アーカイブのフラグメント位置）にジャンプせず、常に該当記事がある月別アーカイブのページ先頭が表示されます。

２．原因

月別アーカイブの日付表示部分にある a 要素の src 属性に設定された URL のフラグメントに対応する id 属性の設定がもれていました。

注：フラグメントとは、下記の青色部分を指します。

<a href="http://blog.livedoor.jp/user/archives/2007-09.html#20070918" class="acalendar">18</a>

３．対処

月別アーカイブの本文日付を表示する下記の部分を修正してください。

修正前

　　　　：
<IfDateChanged>
<h2 class="date"><$ArticleDate$></h2>
</IfDateChanged>
　　　　：

修正後

　　　　：
<IfDateChanged>
<h2 class="date" id="<$ArticleDateTag$>"><$ArticleDate$></h2>
</IfDateChanged>
　　　　：

４．その他

配布テンプレートについては修正済です。

プログラミングで

Amazon で、私のテクニカルライターデビュー作となる「Movable Type WEBデザインの新しいルール」の予約受付が開始されました。

Movable Type WEBデザインの新しいルール 荒木 勇次郎/松永 英明 翔泳社 2007-10-17 Amazonで詳しく見る by G-Tools

画像イメージはまだ公式に発表されていません。が、表紙がないのも拍子抜けなので（寒）、ぼかしつきで掲載しておきます。 2007/09/26 公開されましたので差し替えました。

お分かりの通り、これまでのMT本にはなかった（失礼）お洒落な表紙で、個人的にはかなり気に入っています。

なお、以前プロモーションシリーズ「「Webデザインの新しいルール Movable Type 4.x」について（その2：タグリファレンス）」で話題にした「テンプレートタグリファレンス」は、執筆分がすべて掲載されることになりました。
当初は6ページ位しか余裕がなかった筈なのですが、なぜか計11ページになる予定です。

校正の段階で章の入れ替えを行ったので、内容の詳細については分かり次第、改めてエントリー致します。

関連記事

• 「Webデザインの新しいルール Movable Type」校正完了
• 「Webデザインの新しいルール Movable Type 4.x」について（その3：カスタマイズ）
• 「Webデザインの新しいルール Movable Type 4.x」について（その2：タグリファレンス）
• 「Webデザインの新しいルール Movable Type 4.x」について（その1：テンプレートデザイン）
• 「Webデザインの新しいルール Movable Type 4.x」執筆中

Movable Type 4 のデフォルトテンプレートで、月別カテゴリーアーカイブを表示した時、サイドバーにある月別アーカイブリストのタイトル表示を改善するカスタマイズです。

１．概要

月別カテゴリーアーカイブを表示した時、サイドバーにある「月別アーカイブリスト」は、表示されているカテゴリーだけの月別アーカイブリストが表示される仕組みになっています。
この新しい「月別カテゴリー」の出現により、カテゴリーアーカイブをプラグインでページ分割する必要がなくなります（決まった件数で分割したい場合や、カテゴリーアーカイブ自体を分割したい場合はプラグインを利用しましょう）。

そして、月別カテゴリーアーカイブのサイドバーにある、「月別アーカイブリスト」のタイトルは、

[カテゴリー名]: 月別アーカイブ

となります。

２．問題点

そこまではいいのですが、月別カテゴリーアーカイブの「月別アーカイブリスト」のリンクをクリックすると、遷移したページにある「月別アーカイブリスト」のタイトルが

[カテゴリー名]: [年月]: 月別アーカイブ

となってしまい、「月別アーカイブリスト」なのにタイトルに特定の月が表示されるという、妙な状態になってしまっています。

３．対処方法

月別カテゴリーアーカイブに表示されている月別アーカイブリストのリンクをクリックしても、常に

[カテゴリー名]: 月別アーカイブ

が表示されるようにするには、「テンプレートモジュール」の「サイドバー(2カラム)」または「サイドバー(3カラム)」の下記の部分を修正します。

変更前（赤色を削除）

　　　　：
<MTIf name="module_category-monthly_archives">
    <MTIfArchiveTypeEnabled archive_type="Category-Monthly">
        <div class="widget-categories widget">
            <h3 class="widget-header"><$MTArchiveTitle$>: 月別アーカイブ</h3>
            <div class="widget-content">
        <MTArchiveList archive_type="Category-Monthly">
            <MTArchiveListHeader>
                <ul class="widget-list">
            </MTArchiveListHeader>
                    <li class="widget-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
            <MTArchiveListFooter>
                </ul>
            </MTArchiveListFooter>
        </MTArchiveList>
            </div>
        </div>
    </MTIfArchiveTypeEnabled>
</MTIf>
　　　　：

変更後（青色を追加）

　　　　：
<MTIf name="module_category-monthly_archives">
    <MTIfArchiveTypeEnabled archive_type="Category-Monthly">
        <div class="widget-categories widget">
            <MTSetVarBlock name="archivetitle"><$MTArchiveTitle$></MTSetVarBlock>
            <h3 class="widget-header"><MTVar name="archivetitle" regex_replace="/\: .*/","">: 月別アーカイブ</h3>
            <div class="widget-content">
        <MTArchiveList archive_type="Category-Monthly">
            <MTArchiveListHeader>
                <ul class="widget-list">
            </MTArchiveListHeader>
                    <li class="widget-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
            <MTArchiveListFooter>
                </ul>
            </MTArchiveListFooter>
        </MTArchiveList>
            </div>
        </div>
    </MTIfArchiveTypeEnabled>
</MTIf>
　　　　：

４．注意事項

カテゴリーに「: 」が含まれていると期待した表示になりません。もう少し良い正規表現、あるいは改善策がありましたらご教示ください。

WordPress で追記文章を書いた時、「続きを読む」のリンクをクリックすると、スライドダウンで本文下に続きを表示するカスタマイズをご紹介します。

１．特徴

• JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「Read more（続きを読む）」のリンクをクリックすると追記文章をスライドダウンで表示します。
• JavaScript が無効の場合は記事ページにジャンプします。
• 「Hide more（続きを隠す）」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
• スクリプタキュラスのライブラリを編集せずに、折りたたみ速度の変更が可能です。

２．サンプル

以下にサンプルを作りましたので、動作をお試しください。折りたたみ速度は0.5秒に設定しています。

追記文章の折りたたみ 2.0 サンプル

３．WordPress で「続き」を作成する方法

実は「続き」の作り方がさっぱり分からず、都合10分ほど悩みました（笑）。

WordPress では、テキストエリアにあるアイコン または「more」をクリックすることで続きを作成します。

テキストエリアのモード（タブ）が「ビジュアル」を選択している場合は、テキストエリア内に続き用の罫線が表示され、「コード」の場合は、<!--more--> が埋め込まれます。

• 参考：メモ帳であり備忘録でありブログであり・・・：記事の途中に「続きを読む・・・」みたいなのを挿入する方法

以下、カスタマイズ方法です。

４．プラグインのダウンロード

下記のリンクよりプラグインをダウンロードしてください（IEの場合、Step 1の「Download and "install" this plugin.」を右クリックして「対象をファイルに保存」を選択し、getContentforShowHide.php という名前で保存。ファイルの種類は「すべて」を選択してください）。

• Show Hide “more” with WordPress

ダウンロードした getContentforShowHide.php を任意のエディタで開き、下記の修正を行ってください。
修正箇所は、大きく分けて2つあります（下記）ので、ごっそり入れ替えてください。修正前の削除部分を赤色、追加部分を青色で示しています。

変更前（その1）

注：その1の手順は wp-lightbox2 プラグインを有効にしていると不要かもしれません
（その2→その3を行って動作しないようであれば本修正を行ってください）。

add_action('wp_head', 'output_showHide_js');
add_action('the_content', 'the_contentshowhide',0);

変更後（その1）

function showhide_javascript() {
	if ( !function_exists('wp_enqueue_script') || is_admin() )
		return;
	wp_enqueue_script('prototype');
	wp_enqueue_script('scriptaculous-effects');
}
add_action('init', 'showhide_javascript');
add_action('wp_head', 'output_showHide_js');
add_action('the_content', 'the_contentshowhide',0);

変更前（その2）

function output_showHide_js() {
    $output = '<script type="text/javascript">';
    $output .= 'function showHide(entryID, entryLink, htmlObj, type) {';
    $output .= 'if (type == "comments") {';
    $output .= 'extTextDivID = (\'comText\' + (entryID));';
    $output .= 'extLinkDivID = (\'comLink\' + (entryID));';
    $output .= '} else {';
    $output .= 'extTextDivID = (\'extText\' + (entryID));';
    $output .= 'extLinkDivID = (\'extLink\' + (entryID));';
    $output .= '}';
    $output .= 'if( document.getElementById ) {';
    $output .= 'if( document.getElementById(extTextDivID).style.display ) {';
    $output .= 'if( entryLink != 0 ) {';
    $output .= 'document.getElementById(extTextDivID).style.display = "block";';
    $output .= 'document.getElementById(extLinkDivID).style.display = "none";';
    $output .= 'htmlObj.blur();';
    $output .= '} else {';
    $output .= 'document.getElementById(extTextDivID).style.display = "none";';
    $output .= 'document.getElementById(extLinkDivID).style.display = "block";';
    $output .= '}';
    $output .= '} else {';
    $output .= 'location.href = entryLink;';
    $output .= 'return true;';
    $output .= '}';
    $output .= '} else {';
    $output .= 'location.href = entryLink;';
    $output .= 'return true;';
    $output .= '}';
    $output .= '}';
    $output .= '</script>';
 
    echo $output;
}

変更後（その2）

function output_showHide_js() {
?>
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '&#171; Hide more';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = 'Read more &#187;';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>
<?php
}

変更前（その3）

function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
         :
      （中略）
         :
    $output .= "
    <div id='extLink$id'>
        <p>
            <a href='".get_permalink()."#more-$id'>Read more...</a> or <a href='".get_permalink()."' name='ext$id' onclick=\"showHide($id,'".get_permalink()."',this,'entry');return false;\">Read more right here... &#187;</a>
        </p>
    </div>
    <div id='extText$id' style='display: none'>
        " . $allcontent . "
        <p>
            <a href='#ext$id' onclick=\"showHide($id,0,this,'entry');return true;\">&#171; Hide it</a>
        </p>
    </div>";
        }
    }
    if ($preview) { // preview fix for javascript bug with foreign languages
        $output =  preg_replace('/\%u([0-9A-F]{4,4})/e',  "'&#'.base_convert('\\1',16,10).';'", $output);
    }
    return $output;
}

変更後（その3）

function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
         :
      （中略）
         :
    $output .= "
    <div id='Link$id' class='ajax-entry-more-link'><a href='".get_permalink()."' name='ext$id' onclick=\"ajaxShowHide($id);return false;\">Read more &#187;</a></div>
    <div id='Text$id' style='display: none'>
        " . $allcontent . "
        <div class='ajax-entry-more-link'><a href='#ext$id' onclick=\"ajaxShowHide($id);return false;\">&#171; Hide more</a></div>
    </div>";
        }
    }
    if ($preview) { // preview fix for javascript bug with foreign languages
        $output =  preg_replace('/\%u([0-9A-F]{4,4})/e',  "'&#'.base_convert('\\1',16,10).';'", $output);
    }
    return $output;
}

修正後、getContentforShowHide.php を wp-content/plugins ディレクトリにアップロードしてください。

アップロード後、プラグイン管理画面で「Content with show/hide javascript for "more"」を有効にすれば設定完了です。

なお、折りたたみ速度を変更する場合は、getContentforShowHide.php 内の

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。

この Effect.DefaultOptions = { … } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

５．CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

例えば、wp.Vicuna では下記の設定が必要です。

.ajax-entry-more-link {
    margin-left: 30px;
}

６．その他

(X)HTML の1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません（開く瞬間と閉じた瞬間にビクッとなります）。サンプルの公開テンプレートは XML 宣言を外しています。

2007.10.01
カスタマイズ手順より script.aculo.us のインストールを削除しました（プリインストールされているため）。

2007.10.01
script.aculo.us のインクルードがもれていたので追加しました。

Movable Type 4.01 がリリースされました。

Movable Type News：Movable Type 4.01 をリリースします

Movable Type 4.01 のバージョンアップ内容は以下の通りです。 アップグレードの種類 バグ・フィックスおよび、XSS の修正 (1カ所)。 アップグレードの必要性 強く推奨。すべての 4.0 ユーザーは、4.01 へアップグレードをすることが強く推奨されます。 パフォーマンスの改善 MT4 の管理画面の操作、および再構築に関連する、重要な修正がおこなわれています。MT4.01 にアップグレードすることで、パフォーマンスの改善が期待されます。 プラグインへの影響 影響は想定しておりません。ただし、Movable Type Perl API のバグ修正がおこなわれているため、なんらかの影響がでる可能性はあります。 デザインテンプレートへの影響 影響は想定しておりません。サーチ結果を表示するページのデフォルトテンプレートが、XHTML1.0 Transitional の仕様に則るために若干の修正がされています。

バグフィックスのためのマイナーバージョンアップですが、Movable Type 4.01 Beta を見ると、4.0 から 4.01ではかなり多くのバグが改修されています。

そういえば時々、テンプレート編集中にテキストエリアの内容が途中からごっそりなくなることがあるのですが、気のせいでしょうか。

当サイトの「アメーバブログ スキン」をアメーバブログに設定する方法を紹介します。

１．3カラム固定レイアウトの場合

アメーバにログインした後、「アメブロ」タグをクリックし、「デザインの変更」をクリック。

表示されたスキン一覧より、「スタンダード」→「ベーシック」を選択。スキンは何を選択しても構いませんが、スキンによってはカラムレイアウトが制限されるものがあります。

ページ上部の「カラムを変更」より「３コラム-中央」を選択し、「保存」をクリック。

同じページの上部にある「スキンCSSの編集」をクリック。

テキストエリアの内容を全選択。

テキストエリアの内容をすべて削除します。

テキストエリアに、当サイトの「アメーバブログ スキン」の内容をペーストして、一番下の「保存」をクリック。

これでスキンがブログに反映されます。

２．2カラム固定レイアウト（左サイドバーまたはサイドバー）の場合

手順は１項の「3カラム固定レイアウト」とほぼ同じですが、「カラムを変更」では「２コラム-右」または「２コラム-左」を選択し、「保存」をクリックしてください。

また、スキンをテキストエリアにペーストした後、スキンの「3カラム固定レイアウト用」のセレクタ（下）を削除（またはコメントアウト）します。この作業はペースト前でも構いません。

/* 3カラム固定レイアウト用 */
#frame {
    width: 880px!important;
    margin-right: auto!important;
    margin-left: auto!important;
    padding: 0 0 15px 0!important;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
 
/* 3カラム固定レイアウト用 */
#main {
    float: left;
    width: 508px!important;
    _width: 478px!important;
    margin: 0 0 10px 0!important;
    padding: 0!important;
    border-bottom: 1px solid #666699!important;
    border-left: 1px solid #666699!important;
    border-right: 1px solid #666699!important;
}

そして、コメントアウトされている、2カラム固定レイアウト用のセレクタを有効にします（下の青色部分を追加て、赤色部分を削除）。

/* 2カラム固定レイアウト用 */
#frame {
    width: 695px!important;
    margin-right: auto!important;
    margin-left: auto!important;
    padding: 0 0 15px 0!important;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
*/
 
/* 2カラム固定レイアウト（左サイドバー）用 */
#main {
    float: left;
    width: 508px!important;
    _width: 478px!important;
    margin: 0 0 10px 0!important;
    border-bottom: 1px solid #666699!important;
    border-left: 1px solid #666699!important;
}
*/

#frame は左サイドバー・右サイドバー共通ですので有効にしてください。#main は左サイドバー・右サイドバーで有効にするセレクタが異なりますので、どちらか一方のみを有効にしてください。
上は左サイドバー用の #main を有効にした例です。

３．注意事項

「スキンの選択」画面で、カラムレイアウトを変更・保存すると、テキストエリアに貼り付けたスキンが、元のスキンに戻ってしまうので、スキンのバックアップは必ずとっておきましょう。

アメーバブログ用のスキンを作りました。サンプルのスクリーンショットは3カラムですが、2カラムも用意しております。カラムレイアウトの変更方法につきましては本エントリーを参照ください。

１．動作確認環境

動作確認は下記の環境で行っています。

• OS：Windows2000/XP
• ブラウザ：IE6/IE7/Firefox2/Opera9/Safari3
• アメーバブログ：http://ameblo.jp/youjiroh/

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

３．カラムレイアウト

このスキンではカラムレイアウトのバリエーションとして、

• 3カラム固定レイアウト
• 2カラム固定レイアウト（右サイドバー）
• 2カラム固定レイアウト（左サイドバー）

の計3種類を用意しています。カラム幅はデフォルトで設定されたものよりやや広くなっています。
リキッドレイアウトについては現在確認中です。

カラムレイアウト変更については、管理ページの「スキンの選択」およびテンプレートの後方にあるカラムレイアウト用のセレクタをコメントアウトで切り替えることで実施してください。デフォルトでは3カラム固定レイアウトが有効になる状態で配布しています。
設定の詳細については本エントリーあるいは別エントリーで別途お知らせ致します。

４．その他

基本的な動作は確認したつもりですが、アメーバブログの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。

５．スキン

カマボコだったようで、

タイトルの通り、「WebSig24/7 MT4分科会 第１回イベント 2007年秋 MT4の日」で、MT4のテンプレート構造と、新たに追加されたテンプレートタグも含め、タグの使用方法について話をさせて頂く予定です。

本分科会は３部構成になっており、第１部が私の講義、第２部はグループワークとし、５?６名程度のグループに分かれ、各自持ち込んだノートPCを使って、「テンプレート」をテーマに勉強会を行います。
第３部は第2部の発表です。

以下、勝手ながら mixi コミュニティ「WebSig24/7 MT4分科会」の内容を引用・転載させて頂きました。

イベント概要

• 日時：10月13日(土)　13:00?17:00
• 場所：CG-ARTS協会（東京駅八重洲中央口から徒歩8分）
• テーマ：Movable Type 4のテンプレートを知る
• 内容：セミナー＋ワークグループ
• 定員：30名
• 参加費：3,000円
• 用意いただくもの：無線LAN対応ノートPC・電源ケーブル

タイムテーブル（予定）

• 13:00　受付開始
• 第１部13:20?14:40
• 第２部14:50?16:20
• 第３部16：30?17:00

参加を希望される方は、mixi コミュニティ経由でお願い致します。

Movable Type 4.01 リリース候補第2版が公開されていました。

最新版はダウンロードのページからダウンロードできます。

12のバグが改修され、アップグレードに関する Known Issue のみが残っています。

海外からのトラックバックスパムに悩んでいる Movable Type 4 ユーザの皆様、ASCII 文字のみのトラックバックをフィルタリングし、スパムとしても保留しない asciiTBPingfilter プラグインを、MT4対応にバージョンアップしました。

プラグインをご利用になる場合は、下記よりダウンロードしてください。

asciiTBPingfilter プラグイン

今回のバージョンアップでは、ログ出力を管理画面から制御できるようにしました。また、コンフィグレーション画面を日本語対応にしました（下）。

ログ出力はプラグイン動作確認用ですので、常時ONにしないことを推奨します。

prototype.js の Ajax.Request と pngfix.js の処理が競合（あるいは干渉）して、pngfix.js 側の処理が正常に行われなくなるという問題の解消策です。

この問題の発端は、pngfix.js を利用した「Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する」と、prototype.js を利用した「BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）」のカスタマイズを同時に行うと「PNGが透過されません」というご質問を頂いたことによるもので、本エントリーにて回答致します。

両スクリプトの読み込み順序を入れ替える実験を行ったところ、

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="http://user-domain/pngfix.js"></script>
<![endif]-->

をページの一番最後（body 終了タグの直後等）に配置すれば、PNGが透過されるようになりました。

ただしタイミングによってはステータスバーに、

（残り1項目）ページ http://? を開いています...

という表示が継続してしまうので、完全な解決には至っていないかもしれません。