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

拙著「Movable Type 4.2 パーフェクトガイド」が本日発売です。が、「書店に並ぶのは8月1週目になります」と、出版社の方から連絡がありましたので、もう少々お待ちください。

私の方はサポートサイトの構築と、サンプルデータの準備に追われています。

Movable Type 4.2 パーフェクトガイド 荒木 勇次郎 毎日コミュニケーションズ 2008-07-31 売り上げランキング : 5627 Amazonで詳しく見る by G-Tools

他のオンライン書店でも紹介されていましたが、目次を掲載します。

見た目は Chapter6 が圧巻ですが、Chapter5 では書籍で利用するサンプルテンプレートセットのすべてのテンプレートの解説を行っているので、内容的にはこちらも充実しています。

Chapter1 Movable Typeの概要

• 1.1 ブログについて
• 1.2 ブログツール・ブログサービスの違い
• 1.3 Movable Typeの特徴
• 1.4 Movable Typeの製品とライセンス

Chapter2 Movable Type / MTOSのインストール

• 2.1 Movable Typeの動作環境
• 2.2 Movable Typeのインストールディレクトリ構成
• 2.3 Movable Type/MTOSのダウンロード
• 2.4 ダウンロードアーカイブの展開
• 2.5 MTOSリポジトリのチェックアウトとビルド
• 2.6 XAMPP for Windowsのインストール
• 2.7 Perlのインストール
• 2.8 ImageMagickのインストール
• 2.9 レンタルサーバの環境を設定する
• 2.10 Movable Typeをレンタルサーバにアップロードする
• 2.11 Movable Typeのインストール

Chapter3 Movable Typeの機能と基本操作

• 3.1 Movable Typeの機能
• 3.2 Movable Typeの管理画面
• 3.3 基本操作

Chapter4 Movable Typeのテンプレートとテンプレートタグ

• 4.1 テンプレート
• 4.2 テンプレートの種類と操作画面
• 4.3 インデックステンプレート
• 4.4 アーカイブテンプレート
• 4.5 テンプレートモジュール
• 4.6 システムテンプレート
• 4.7 ウィジェット
• 4.8 グローバルテンプレート
• 4.9 テンプレートタグ
• 4.10 コンテンツ系テンプレートタグ
• 4.11 制御系テンプレートタグ
• 4.12 コンテンツ系テンプレートタグと制御系テンプレートタグの組み合わせ
• 4.13 コンテキスト
• 4.14 テンプレートの再構築
• 4.15 テンプレートのサーバーサイドインクルードとモジュールのキャッシュ
• 4.16 テンプレートの初期化
• 4.17 テンプレートの複製

Chapter5 テンプレートとテンプレートセットの作成

• 5.1 テンプレートセットの概要
• 5.2 テンプレート・テンプレートセットを作成する前に
• 5.3 テンプレートの作成
• 5.4 テンプレートセットの作成
• 5.5 テンプレートのローカライズ
• 5.6 テンプレートセットを切り替える

Chapter6 テンプレートのカスタマイズ

• 6.1 テンプレートやサブテンプレートの出力をトレースするテクニック
• 6.2 繰り返し処理の偶数回または奇数回で異なる処理を行う
• 6.3 ブロックタグの繰り返し処理で、特定の回数だけ異なる処理を実行する
• 6.4 メインページにブログ記事一覧の最初の数件を全文表示し、残りをタイトルのみ表示する
• 6.5 繰り返し処理で区切り文字を付ける
• 6.6 表示する内容をトリミングする
• 6.7 全ブログ記事の一覧を表示する
• 6.8 ブログ記事一覧を日別表示する
• 6.9 ブログ記事ページに同一カテゴリのブログ記事リストを表示する
• 6.10 タグによる関連ブログ記事一覧・ウェブページの表示
• 6.11 ブログのID番号に依存しない制御を行う
• 6.12 ブログ記事に同一カテゴリのブログ記事の前後リンクを表示する
• 6.13 「最近のコメント」を適正に表示する
• 6.14 返信コメントをスレッド形式で表示する
• 6.15 「最近のトラックバック」を適正に表示する
• 6.16 カテゴリ一覧にブログ記事タイトルを表示する
• 6.17 親カテゴリ配下のカテゴリのブログ記事一覧を表示する
• 6.18 カテゴリ一覧に、月別アーカイブリストのタイトルを表示する
• 6.19 サブカテゴリリストを定義型リストでマークアップする
• 6.20 カテゴリアーカイブページのデザインをカテゴリ別に切り替える
• 6.21 カテゴリアーカイブページのデザインをカテゴリの階層別に切り替える
• 6.22 ブログ記事ページのデザインをカテゴリ別に切り替える
• 6.23 ウェブページのデザインをウェブページ別に切り替える
• 6.24 カテゴリアーカイブページのカテゴリ一覧に、親カテゴリとその子カテゴリを表示する
• 6.25 カテゴリアーカイブにサブカテゴリのブログ記事を表示する
• 6.26 カテゴリ一覧のブログ記事数にサブカテゴリのブログ記事数を含めて表示する
• 6.27 パンくずリスト
• 6.28 月別アーカイブ一覧に年別の見出しを表示する
• 6.29 月別アーカイブ一覧を簡略表示する
• 6.30 月別アーカイブ一覧（ドロップダウン）の選択状態を保持する
• 6.31 Ajax月送りカレンダー
• 6.32 グローバルナビゲーション
• 6.33 リストをツリー表示する
• 6.34 追記の折りたたみ
• 6.35 サイドメニューの折りたたみ
• 6.36 リストの一部を折りたたむ
• 6.37 「カテゴリ一覧」をカテゴリ別に折りたたむ
• 6.38 「月別アーカイブ一覧」を年別に折りたたむ
• 6.39 新着表示
• 6.40 ソーシャルブックマークアイコンを表示する
• 6.41 カテゴリ別にフィードを配信する
• 6.42 「最近のコメント」をフィードで配信する
• 6.43 サイトマップを作る
• 6.44 スタイル機能でブログのデザインを切り替える
• 6.45 カスタムフィールドで画像を表示する
• 6.46 カスタムフィールドでおすすめ度順にソートする
• 6.47 カスタムフィールドの複数行を改行表示する
• 6.48 Liteboxによるクールな画像表示
• 6.49 HighSlide JSによるサムネイル画像のズームアップ
• 6.50 dtreeと連携してカテゴリリストを表示する
• 6.51 PHP化
• 6.52 Ajaxによるモジュール化

Chapter7 Movable Typeを使いこなすためのTips集

• 7.1 ブログに独自ドメインを設定する
• 7.2 スケジュールタスクを設定する
• 7.3 クリエイティブ・コモンズでコンテンツに柔軟なライセンスを提供する
• 7.4 コメント認証とTypeKeyの登録
• 7.5 reCAPTCHAを利用したコメント認証
• 7.6 TypePad AntiSpamでスパムを判定する
• 7.7 ユーザーのプロフィール編集とプロフィール画像の表示
• 7.8 ユーザーを作成する
• 7.9 ロールを作成・編集する
• 7.10 コメント投稿時にユーザー登録する
• 7.11 クイックポストする
• 7.12 アドレス帳を利用してメールマガジンを作る
• 7.13 MT4iを利用してモバイル対応する
• 7.14 フィードウィジェットでフィード情報を配信する
• 7.15 ActionStreamでさまざまな情報をストリーム配信する
• 7.16 MultiBlogプラグインでポータルサイトを構築する
• 7.17 ブログを複製する
• 7.18 ブログ記事のエクスポートとインポート
• 7.19 ブログのバックアップと復元
• 7.20 Movable Typeデザインアシスタントでオリジナルデザインを作成する
• 7.21 InstaMTでデモ環境を構築する
• 7.22 .htaccessを用いてHTTPリダイレクトする
• 7.23 Movable Typeをアップグレードする
• 7.24 コミュニティ・ソリューションを利用してコミュニティブログ・コミュニティ掲示板を作成する
• 7.25 プラグインの開発
• 7.26 プラグイン・ツール一覧

付録A：テンプレートタグリファレンス

付録B：グローバルモディファイアリファレンス

付録C：環境変数リファレンス

Movable Type（MT） 4.2 用のテンプレートセット配布を開始します。

2008.09.02
フッタ付きリキッドレイアウト対応 Movable Type テンプレートセットの配布を開始しました。

Movable Type 4.2 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

バージョン 4.1 では、ウィジェットセットがテンプレートセットに未対応でしたが、バージョン 4.2 からウィジェットセットもテンプレートセットに含めることができるようになったため、サイドバーのパーツをウィジェットに移動しました。

１．Movable Type（MT）テンプレートセットのダウンロード

Movable Type（MT）テンプレートセットアーカイブを下記のページからダウンロードしてください。

Movable Type テンプレート

以下、Movable Type（MT）テンプレートセットの利用方法です。

２．Movable Type（MT）テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

また、mt-static/plugins フォルダにある KoikikukanTemplateSet フォルダを、スタティックディレクトリ（mt-static）の plugins ディレクトリにアップロードしてください。

３．Movable Type（MT）テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

不具合がありましたら、本エントリーにご連絡ください。

ArchiveDateFooter プラグイン が Movable Type 4.2 で動作しないというご連絡を頂きましたので、4.2 対応版をリリース致しました。

旧バージョンの ArchiveDateFooter プラグインを Movable Type 4.2 にインストールし、MTArchiveDateFooter タグのあるテンプレートの再構築を行うと、次のような「Can't use string ("00000001000000") as a subroutine ref while "strict refs" in use at ～ ArchiveDateFooter.pl line 49. 」というエラーが発生します（ブログ記事投稿月が2ヶ月以上にまたがる場合）。

MT4.2 対応の ArchiveDateFooter プラグインは「ArchiveDateFooter プラグイン」のエントリーからダウンロードできます。

ArchiveDateFooter プラグインは、ArchiveDateHeader プラグインと併用してください。ArchiveDateHeader は下記のいずれかのプラグインを用いればOKです。

• mt-archive-dateheader（ダウンロードするには TypeKey によるサインインが必要です）
• ArchiveDateHeader 1.0

ArchiveDateHeader 1.0 を MT4 以降で動作させたい場合は、ArchiveDateHeader.pl に下記のコード（青色部分）を追加してください。

　　　：
use strict;
use MT::Template::Context;
 
MT::Template::Context->add_container_tag(ArchiveDateHeader => \&ArchiveDateHeader);
 
use MT::Plugin;
my $plugin = MT::Plugin->new({ name => 'MTArchiveDateHeader' });
MT->add_plugin($plugin);
 
sub ArchiveDateHeader {
　　　：

ライター業とまったく縁のなかった私が、ここ1年余りで4冊のコンピュータ関連書籍と雑誌の執筆に関わることができました。

このエントリーでは、「本を出版したい」「雑誌に寄稿したい」という方のために、どのようにすれば書籍の執筆や雑誌の寄稿に携わることができるかをお伝えしておこうと思います。

ただし、あくまで経験上の話をまとめたものでしかないので、出版できることを確約するものではありません。また、私自身は Movable Type 関連書籍の執筆しかしていないので、内容はかなり偏っているかもしれません。その点は予めご容赦ください。

１．ブログで専門的な技術情報を継続的に提供する

執筆の依頼を頂いた、一番の要素はこれです。このブログで Movable Type というブログツールの記事を書き続けたことで、出版社や編集会社の方から声がかかりました。

書籍の執筆には、一般の人（=読者）が読めるための文章力が必要です。大げさかもしれませんが、依頼を受けるには、技術だけでなく文章力も問われるので、ブログはその両方が試される第一関門と言えるでしょう。言い換えると、ブログに書く文章はそのまま書籍や記事にしても大丈夫な内容の方がいいかもしれません。

また、私の文章が読みやすいかどうかは分かりませんが、エントリーでカスタマイズの手順などを細かく掲載したのも良かったのかもしれません。

ただし、執筆の話を頂くまでに、ブログを始めてから約3年弱の歳月が流れているので、出版を目指してブログを始めようという場合、それ相応の根気が必要です。

２．書籍として成り立つ技術情報を提供する

ブログで提供している情報が優れていても、出版社に利益が出ない情報では、執筆に結びつけるのは難しいかもしれません。ブログツールで例えれば、複数の種類が世に出回っているにもかかわらず、書籍として多く出版されているのは、今のところ Movable Type と WordPress のみです（1冊だけ出版されているものもあります）。

ただし、何がいつヒットするかは分からないので、コツコツと情報提供を続ける価値はあるかもしれません。個人的にはそういったこととは無関係に、自分が好きなことを書いているのであれば、その方が良いと思います。

３．コネを作る

1冊目の書籍「WEBデザインの新しいルール」の執筆の話は、突然舞い込んできたのですが、実は全く突然という訳ではありませんでした。

その話を頂くかなり前に「MOVABLETYPE PLUGINS DIRECTORY」という書籍に、当ブログの記事掲載依頼が来まして、その時、連絡を頂いた編集会社の方に「どうすれば本を書けるでしょうか」と質問をしたのがきっかけです。
たまたま連絡をした担当の方が出版について親切に教えてくださって、その時は別のブログツールの出版の話を進めていました。

残念ながらその話は途中で頓挫してしまい、さらに当時、Movable Type は3.3 が出た後で、出版業界では「MT本は（何冊も出回ってるので）出しても売れない」という状況だったらしく、MT本の執筆ができない状態だったところに「WEBデザインの新しいルール」の話を、先ほどの編集会社の方から頂きました。

記事紹介などの話がきたら、その時に問い合わせるか、あるいは出版社や編集会社に積極的に連絡してアピールするのも手かもしれません。

４．キャンセル待ち

というのは語弊がありますが、「WEBデザインの新しいルール」や「CMSとして使うMovable Type」は私が第1候補ではありませんでした。当初予定していた執筆者の方の都合がつかず、３項の編集会社の担当の方から、私に話が回ってきたのです。

他の技術書などでこのようなことがよくある話かどうかわかりませんが、このように代理の執筆者を探してでも本を出版するのは、出版社が事業計画として本を刊行しているので、事業が計画通りに進まないと赤字になるのではないかと推測されます。

そういう訳で、いつどこから話が舞い込んでくるか分かりません。

５．リピート

書いた本の売り上げがよければ、同じ出版社から声がかかる可能性がありますし、もうすぐ出版される「Movable Type パーフェクトガイド」は全く別のところから（キャンセル待ちではなく）話を頂きました。

６．執筆の稼動

「本を出版する」というのは一見華やかな印象がありますが、相当の労力を要する覚悟が必要です。執筆と校正は時間との戦いです。

本を出版した後、更新頻度が落ちてしまったのではないかというブログもいくつかあるように思われますし、執筆者の中には「（本は）もう書きたくない」という方もいらっしゃるようです。

個人の能力にもよりますが、そういった労力や結末を厭わないという気持ちは心の片隅にとどめておいた方がいいかもしれません。

そういう意味で、私にとって、ライター業を専門にしている方は尊敬に値します。

「Movable Type 4.2 パーフェクトガイド」の見本誌が到着しました。シンプルなカバーが結構気に入ってます。

オビのキャッチコピー「最強解説」については、最強かどうかは個人差があると思いますので、文言をそのまま受け止める必要はないと思います。ちなみにキャッチコピーは私の要望ではありません（OKはしました）。

この本は、私が知る限りでは、これまでのMT本の中で最もページ数が多いと思います（776ページ）。どのくらいページ数が多いかというのを分かりやすくするために、これまで執筆させて頂いた書籍と並べて比較してみました。

左から順に、「WEBデザインの新しいルール」が264ページ、「CMSとして使うMovable Type」が304ページ、「Movable Type プロフェッショナル・スタイル」が336ページです。

「Movable Type 4.2 パーフェクトガイド」は、見た目は他書の2倍程度ですが、中身をぎゅうぎゅうに詰め込んでいるので、体感的には2.5～3冊分の内容があると思います。そういう意味では、ページ数の都合で値段も通常の本より1000円ほど高めとはいえ、目的が合う方にとってはコストパフォーマンスは良いのではないかと。

Movable Type 4.2 パーフェクトガイド 荒木 勇次郎 毎日コミュニケーションズ 2008-07-31 売り上げランキング : 56222 Amazonで詳しく見る by G-Tools

export-ts は Six Apart 提供のツールで、Movable Type で利用しているテンプレートを、テンプレートセットとしてエクスポートすることができるコマンドラインツールです。

以下、使用方法を簡単に説明します。

「Movable Type 4.2 RC4 and some of our latest hacks」の記事にある「Download from code.sixapart.com」をクリック。

「export-ts」のリンクを右クリックして、export-ts というファイル名で保存。

ダウンロードした export-ts をアプリケーションディレクトリ配下の tools ディレクトリにアップロードして、実行権を付与します。

TeraTerm などでサーバにログインし、アプリケーションディレクトリに移動した後、次のコマンドを入力します。

./tools/export-ts --blog=1 --key="MyTemplate-Set"

オプションの --blog にはエクスポートしたいブログのID番号、--key にはテンプレートセット名を設定します。

実行すると、アプリケーションディレクトリに、テンプレートセット名に「-1.0」がついたディレクトリが生成され、その配下にテンプレートセットが出力されます（スクリーンショット下の左側）。

plugins ディレクトリ配下はこのような感じです。

テンプレートセットが出力されています。

WIndows ローカル環境で起動する場合は次のようにします。

perl tools\export-ts --blog=1 --key="test"

ウィジェットは未対応のようですが、インデックステンプレートやアーカイブテンプレートなどをテンプレートセットにするには便利です。
Windows 上では日本語にも対応していることを確認しています。

README はこちらをどうぞ。

README

2008.08.03
export_ts という表現があったため、export-ts に修正しました。

Movable Type 4.2 リリース候補第4版が公開されました。

Movable Type 4.2 ベータ

リリース候補第4版の「コマーシャル版・個人無償版 (プロフェッシュナルパック・コミュニティパック同梱)」では、テンプレートセットにコミュニティブログ・コミュニティ掲示板が標準で選択できます。また、「汎用ウェブサイト」の名称が「プロフェッショナルウェブサイト」に変更されています。

「Template Set Exporter Tool」もリリースされているので、これについては明日エントリーしようと思います。

当ブログで配布中の Seesaa ブログテンプレートの3カラムレイアウトを切り返るカスタマイズです。
ご質問を頂きましたので本エントリーにて紹介致します。

１．デフォルトの3カラムレイアウト

デフォルトの3カラムレイアウトのCSSは次のようになっています。赤色の部分が左サイドバー表示用タグです。次項でこの部分を移動します。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
...後略...

表示例

２．サイドバーを右側に表示する1

2つのサイドバーを右側に表示するには、１項の左サイドバー表示用タグ（赤色部分）を次のように、中央カラム表示用タグと右サイドバー表示用タグの間に移動します（青色部分）。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
...後略...

完成例

３．サイドバーを右側に表示する2

１項の左サイドバー表示用タグ（赤色部分）を、右サイドバー表示用タグの下に移動すれば、サイドバーの表示順序を入れ替えることができます。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
...後略...

完成例

４．サイドバーを左側に表示する

2つのサイドバーを左側に表示するには、中央カラム表示用タグの直前に、右サイドバー表示用タグを移動します（青色部分）。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 ...後略...

完成例

JavaScript ライブラリ Accordion によるサイドメニューの折りたたみです。

Accordion は、いくつかのメニューをグループ化し、あるメニュータイトルをクリックすることで、グループ内の特定のメニューリストだけを表示し、他のメニューリストを閉じるライブラリです。下のサンプルへのリンクをクリックして、表示されたサンプルのサイドメニューをクリックしてみてください。

サンプル

ここでは配布テンプレートのサイドバーを例にカスタマイズ方法を紹介します。Movable Type を例にしていますが、JavaScript 外部ファイルのアップロードが可能なブログサービスやブログツールであれば他のテンプレートでも適用可能です。

なお、Accordion は縦方向の折りたたみ以外に、横方向の折りたたみや入れ子にした折りたたみも可能です。

１．ライブラリのダウンロード

Accrodion のサイトにアクセスして、「Download the code!」をクリック。

「Get it here Accordion v2.0」の部分のリンクをクリックすればダウンロードが開始します。必要に応じてドネーションをしてください。

２．ライブラリのアップロード

ダウンロードしたアーカイブを展開し、accordion\javascript 配下にある、次の3つのファイルをブログディレクトリにアップロードします。ここでは javascript フォルダごとアップロードします。

• javascript/prototype.js
• javascript/effects.js
• javascript/accordion.js

３．テンプレートの設定（ヘッダー）

ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「ヘッダー」を選択し、head の終了タグ直前に下記の script 要素を追加します。prototype.js をすでに使用している場合は、一番上の1行は不要です。

<script type="text/javascript" src="<mt:BlogURL />javascript/prototype.js"></script>
<script type="text/javascript" src="<mt:BlogURL />javascript/effects.js"></script>
<script type="text/javascript" src="<mt:BlogURL />/javascript/accordion.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);
function loadAccordions() {
    var leftAccordion = new accordion('links-left');
    var rightAccordion = new accordion('links-right');
}
</script>
</head>

関数 loadAccordions の中に記述している 2 行のパラメータ（赤色）は、折りたたみのメニュー全体を括っている id 属性を指定します。サンプルテンプレートでは、左サイドバー全体を括っている dl 要素の id 属性 links-left と、右サイドバー全体を括っている dl 要素の id 属性 links-right を、それぞれ指定しています（青色部分）。

<div id="links-left-box">
<dl id="links-left">
...中略...
</dl>
</div>
 
<div id="links-right-box">
<dl id="links-right">
...中略...
</dl>
</div>

４．テンプレートの設定（サイドバー）

ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「サイドバー（またはサイドバー2）」を選択し、折りたたみを行いたいサイドバーの class 属性値に accordion_toggle と accordion_content を追加します。
下は「最近のエントリー」に設定した例です。

変更前

<MTIf name="module_recent_entries">
<dt class="sidetitle">
Recent Entries
</dt>
 
<dd class="side">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>

変更後

<MTIf name="module_recent_entries">
<dt class="sidetitle accordion_toggle">
Recent Entries
</dt>
 
<dd class="side accordion_content">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>

５．スタイルシートの変更

ブログ管理画面より、「デザイン」-「テンプレート」-「スタイルシート」を選択し、次の内容を追加します。

.accordion_toggle {
    display: block;
    margin-bottom: 5px;
}
.accordion_toggle_active {}
.accordion_content {
    overflow: hidden;
    padding-bottom: 10px;
}

なお、サンプルでは、次の既存のセレクタから赤色部分を削除して、上記セレクタの設定値の競合を回避しています。

.sidetitle {
    margin-top: 3px;
    border: 1px solid  #666666;
    color: #333;
    background: #f6f6f6;
    text-align: center;
    font-size: 75%;
    line-height: 2.0;
}
 
/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    background: none;
    color: #333;
    font-size: 75%;
    line-height: 1.5;
}

これでブログ全体を再構築して、Accordion による折りたたみが動作すれば完成です。

６．特定のメニューをデフォルトで表示する

特定のメニューをデフォルトで表示する方法は、下記の記事を参照してください。

Accordion で特定のメニューをデフォルト表示する

2008.08.03
loadAccordions の設定を一部見直しました。

2008.09.02
６項を追加しました。

Movable Type 4 のスタイル用テーマを公開します。

カラムレイアウトは固定レイアウト（3カラム・2カラム）のみ動作を確認しています。4.1 以降で利用可能です。動作確認は 4.2 RC3 で行っていますので 4.1 で不具合がありましたらご連絡ください。
テンプレートをリキッドレイアウトにする方法については別途エントリーします。

１．スタイル切り替え

ブログ管理画面より「デザイン」-「スタイル」を選択。

プラスマークのアイコンをクリック。

「スタイルシートまたはリポジトリのURL」に http://www.koikikukan.com/styles/library/ を入力。

表示された「KOIKIKUKAN Classic for Movable Type 4」のサムネイル画像をクリック。

クリックすると、右側の「選択されたデザイン」に選択したスタイルが表示されるので、「デザインを適用」をクリック。

「テーマを適用しました。」が表示されればスタイルの切り替えが完了です。ただし、この状態ではテンプレートの「スタイルシート」の内容が切り替わっただけですので、ページに反映させるには、全ての再構築を行ってください。

２．カラムレイアウトの切り替え

スタイル適用後に、異なるカラムレイアウトに切り替える方法です。

ブログ管理画面より「デザイン」-「スタイル」を選択すると、「選択されたデザイン」に適用中のスタイルが表示されるので、「レイアウト」のセレクトボックスから「３カラム、小・大・小」「２カラム、大・小」「２カラム、小・大」のいずれかを選択します。

選択後、「デザインを適用」をクリックし、全体を再構築すれば、カラムレイアウトが切り替わります。

巷では WordPress 2.6 で盛り上がっているようですが、WordPress 2.5 の本が出ました。

WordPress 2.5 でつくる! 最強のブログサイト 田中 広将 ソーテック社 2008-07-19 売り上げランキング : 3192 Amazonで詳しく見る by G-Tools

WordPress のバージョンアップ周期が短くなったことで、基本的・普遍的な内容に重点を置き、全面改訂されたようです。

Part1 WordPressの基本のキホン

Chapter01 WordPressとは

Chapter02 レンタルサーバで始めよう

Chapter03 WordPressのインストール

Chapter04 WordPressの基本画面

Chapter05 WordPressの基本設定

Part2 WordPressでブログを書こう

Chapter06 テーマとプラグインでかっこよくしよう

Chapter07 記事を投稿しよう

Chapter08 記事に画像を挿入しよう

Chapter09 アドバンストツールバーの表示

Chapter10 投稿設定を使いこなそう

Part3 WordPressサイトの運営・管理

Chapter11 コメントとトラックバックを制限する

Chapter12 リンク集を作成する

Chapter13 ページ機能を利用する

Chapter14 カテゴリーとタグを使い分ける

Part4 WordPressサイト活用法

Chapter15 コミュニティサイトとして運用する

Chapter16 XML-RPCプロトコルを利用して投稿する

Chapter17 携帯電話から投稿・閲覧する

Part5 テーマとプラグインによる拡張

Chapter18 オリジナリティを高めるカスタマイズ

Chapter19 WordPressテーマとHTML&CSS

Chapter20 WordPressテーマの構成

Chapter21 Firebugを使ったCSSの修正

Chapter22 プラグインインストレーション

Part6 WordPressブートキャンプ

Chapter23 WordPressを取り巻く環境

Chapter24 WordPressの動作原理

Chapter25 WordPress設置の実際

Chapter26 ローカル環境の構築

Chapter27 WordPressとPHP

Chapter28 WordPressプラグイン開発

Chapter29 アクションとショートコードプラグインの開発

Appendix A テンプレートタグリファレンス

Appendix B テーマファイルリファレンス

Appendix C WordPressで使う便利なツール

Appendix D ブログのインポート・エクスポート

Appendix E トラブルシューティング

バージョンに関しては、著者の田中さんのブログに次のようなコメントがありました。

hiromasa.another :o) - WordPress 2.5 でつくる! 最強のブログサイト、でます。

2.5 は 2.x 系前半の集大成的リリースであることと、そしてなにより、今回は使い方の提案と使いこなし部分に比重を置いている内容となっているため、あまりこだわらず表題は 2.5 のままでいきました。

ということで、2.6 の利用下でも問題なく読めそうです。

私は Movable Type 4.2 パーフェクトガイドの執筆で、最初は 4.1 をターゲットに書いていたものを、途中からバージョン 4.2 向け（厳密には 4.15 → 4.2）に直したのですが、バージョンアップと発刊のタイミングは難しい問題ですね。

Movable Type のカテゴリーをタグクラウドっぽく表示するカスタマイズです。カテゴリーに属するブログ記事数に応じて、カテゴリ名のフォントサイズなどを変化させます。

このカスタマイズは Ogawa::Memoranda さんの下記の記事に掲載されているスクリプトを利用しています。

Ogawa::Memoranda - TagwireでTagCloud

カスタマイズ方法は、上記のエントリーに掲載されているタグ表示用のサブテンプレート（下）

...前略...
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a
 title="Tag: <$MTTag$>" 
 href="<$MTBlogURL$>tag/<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
...後略...

を、次の内容に入れ替えて、テンプレートの任意の位置に貼り付けてください。

...前略...
<mt:Categories>
<li title="<mt:CategoryLabel />:<mt:CategoryCount />:<mt:Entries lastn="1"><mt:EntryModifiedDate format="%Y-%m-%d" />"></mt:Entries><a
 title="Category: <mt:ParentCategories glue="/"><mt:CategoryLabel /></mt:ParentCategories>" 
 href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a></li>
</mt:Categories>
...後略...

...前略...
<MTCategories>
<li title="<$MTCategoryLabel$>:<$MTCategoryCount$>:<MTEntries lastn="1"><$MTEntryModifiedDate format="%Y-%m-%d"$>"></MTEntries><a
 title="Category: <MTParentCategories glue="/"><$MTCategoryLabel$></MTParentCategories>" 
 href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
</MTCategories>
...後略...

サブカテゴリーに同じ名称のカテゴリーがあると、同名のカテゴリーが連続して表示されるのが欠点です。その場合、リンクのツールチップに親カテゴリーを含めて表示するようにしています。

サンプルとして、このブログのカテゴリークラウドは次のようになりました。

Cutoff Parameter: -5 -1 +1 +5 0

• 3.01D-ja
• 3.0D
• 3.11
• 3.11-ja
• 3.121-ja
• 3.15-ja
• 3.151-ja
• 3.16
• 3.17
• 3.17-ja
• 3.171-ja
• 3.2
• 3.2-ja
• 3.2-ja-2
• 3.3-ja
• 3.34
• 3.34-ja
• 3.35-ja
• 4.0
• 4.1
• 4.15
• 4.2
• Ajax
• AMN
• Apache
• B-Promotion
• blog
• BlogPeople
• BlogPet
• BlogRolling
• Creative Commons
• CSS
• Favicon
• FC2ブログ
• FeedBurner
• Firefox
• gallery
• information
• JavaScript
• JavaScript
• Lightbox JS
• livedoorブログ
• mixi
• mono
• Movable Type
• MT4i
• MTOS
• MySQL
• PC
• phpBB
• PHP化
• Programming Language
• RSS
• RSS
• sb
• Seesaaブログ
• Serene Bach
• SQLite
• TypeKey
• Vox
• wheeljack
• Widget Manager
• WordPress
• YouTube
• お知らせ
• ご利用サイト
• その他
• その他
• はてな
• アクセシビリティ
• アップグレード
• アフィリエイト
• インストール
• ウェブスタンダード
• ウェブページ
• エントリー
• エントリー
• エントリー・タグ
• カスタマイズ
• カスタムフィールド
• カテゴリー
• カレンダー
• カレンダー
• カレンダー
• カレンダー
• カレンダー
• カレンダー
• ゲストブック
• コメント
• コメント
• コメントスパム
• サイト変更履歴
• サイドバー
• サイドメニュー
• サービス
• ダイナミックパブリッシング
• ダジャレ
• ツリー化
• ツリー化
• ツリー化
• ツリー化
• ツリー化
• ツール
• テスト
• テンプレート
• テンプレート
• テンプレート
• テンプレート
• テンプレート
• テンプレート
• テンプレート
• テンプレート
• テンプレートセット
• テンプレートタグ
• テーマ
• トラックバック
• トラックバック
• トラックバックスパム
• トラブルシューティング
• ドリコムRSS
• ニュース
• パッチ
• パンくずリスト
• パンくずリスト
• フォルダ
• プラグイン
• プラグイン
• プルダウン