「Movable Type 4.2 パーフェクトガイド」本日発売

July 31,2008 2:22 AM
Category:[書籍]
Tag:[, ]
Permalink

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

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

Movable Type 4.2 パーフェクトガイド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:環境変数リファレンス
Comments [9] | Trackbacks [4]

Movable Type(MT) 4.2 テンプレートセット

July 30,2008 1:55 AM
Category:[4.2, テンプレート]
Tag:[, , ]
Permalink

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

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

Movable Type テンプレート

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

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

1.Movable Type(MT)テンプレートセットのダウンロード

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

Movable Type テンプレート

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

2.Movable Type(MT)テンプレートセットのインストール

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

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

プラグイン一覧

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

3.Movable Type(MT)テンプレートセットの入れ替え

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

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

ブログ管理画面1

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

ブログ管理画面2

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

テンプレートセット選択画面1

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

テンプレートセット選択画面2

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

テンプレートセット選択完了画面

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

ブログ管理画面3

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

再構築画面1

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

再構築画面2

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

再構築画面3

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

表示されたテンプレート

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

Comments [40] | Trackbacks [0]

ArchiveDateFooter プラグイン(MT4.2 対応)

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ヶ月以上にまたがる場合)。

ArchiveDateFooter でのエラー

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

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

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 {
   :
Comments [0] | Trackbacks [0]

本を出版する方法

July 28,2008 2:22 AM
Category:[小品文]
Tag:[]
Permalink

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

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

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

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

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

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

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

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

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

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

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

3.コネを作る

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

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

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

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

4.キャンセル待ち

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

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

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

5.リピート

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

6.執筆の稼動

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

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

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

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

Comments [0] | Trackbacks [0]

パーフェクトな

July 27,2008 12:03 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [0] | Trackbacks [0]

「Movable Type 4.2 パーフェクトガイド」見本誌到着

July 26,2008 1:33 AM
Category:[4.2, お知らせ, 書籍]
Tag:[, , ]
Permalink

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

Movable Type 4.2 パーフェクトガイド

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

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

Movable Type 4.2 パーフェクトガイド

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

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

Movable Type 4.2 パーフェクトガイドMovable Type 4.2 パーフェクトガイド
荒木 勇次郎

毎日コミュニケーションズ 2008-07-31
売り上げランキング : 56222

Amazonで詳しく見る
by G-Tools
Comments [4] | Trackbacks [0]

export-ts で利用中のテンプレートセットをエクスポートする

July 25,2008 1:33 AM
Category:[テンプレートセット]
Tag:[, , ]
Permalink

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

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

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

「Download from code.sixapart.com」をクリック

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

「export-ts」のリンクを右クリック

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

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

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

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

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

テンプレートセット出力1

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

plugins ディレクトリ配下

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

テンプレートセット出力2

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

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

WIndows ローカル環境で起動する場合

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

README はこちらをどうぞ。

README

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

Comments [2] | Trackbacks [0]

Movable Type 4.2 リリース候補第4版公開

July 24,2008 1:17 AM
Category:[4.2]
Tag:[, ]
Permalink

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

Movable Type 4.2 ベータ

MT42rc4

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

MT42rc4

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

Comments [0] | Trackbacks [0]

Seesaa ブログテンプレートのカラムレイアウトを変更する

July 23,2008 2:05 AM
Category:[テンプレート]
Tag:[, ]
Permalink

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

1.デフォルトの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 -%>
...後略...

表示例

3カラム

2.サイドバーを右側に表示する1

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

...前略...
<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 -%>
...後略...

完成例

3カラム

3.サイドバーを右側に表示する2

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

...前略...
<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 -%>
...後略...

完成例

3カラム

4.サイドバーを左側に表示する

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 -->
<!-- 中央カラム終了 -->
 ...後略...

完成例

3カラム

Comments [8] | Trackbacks [0]

Accordion によるサイドメニューの折りたたみ

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

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

サンプル

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

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

1.ライブラリのダウンロード

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

「Download the code!」をクリック

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

「Get it here Accordion v2.0」のリンクをクリック

2.ライブラリのアップロード

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

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

3.テンプレートの設定(ヘッダー)

ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「ヘッダー」を選択し、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>

4.テンプレートの設定(サイドバー)

ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「サイドバー(またはサイドバー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>

5.スタイルシートの変更

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

.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 による折りたたみが動作すれば完成です。

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

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

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

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

2008.09.02
6項を追加しました。

Comments [39] | Trackbacks [0]

Movable Type 4 スタイル用テーマ

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

小粋空間スタイル

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

1.スタイル切り替え

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

スタイル

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

リポジトリのURL

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

リポジトリのURL入力

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

サムネイル画像

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

デザインを適用

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

テーマを適用

2.カラムレイアウトの切り替え

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

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

カラムレイアウトを適用

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

Comments [2] | Trackbacks [0]

WordPress 2.5 でつくる! 最強のブログサイト

July 20,2008 12:22 AM
Category:[書籍]
Tag:[, , ]
Permalink

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

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)に直したのですが、バージョンアップと発刊のタイミングは難しい問題ですね。

Comments [0] | Trackbacks [0]

稼働率向上で

July 19,2008 12:33 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [0] | Trackbacks [0]

カテゴリークラウド for Movable Type

July 18,2008 1:35 AM
Category:[カテゴリー]
Tag:[, , ]
Permalink

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>
...後略...
バージョン3 をお使いであれば、次のサブテンプレートをお使いください。
...前略...
<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>
...後略...

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

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

サンプル
Comments [0] | Trackbacks [0]

「Movable Type 4.2 パーフェクトガイド」予約開始

July 17,2008 12:33 AM
Category:[4.2, お知らせ, 書籍]
Tag:[, , ]
Permalink

先日校了したMT本の予約が始まりました。

Movable Type 4.2 パーフェクトガイドMovable Type 4.2 パーフェクトガイド
荒木 勇次郎

毎日コミュニケーションズ 2008-07-31
売り上げランキング : 56222

Amazonで詳しく見る
by G-Tools

とりあえず、この本に関する裏話から。

この本のお話を頂いたのは、昨年の後半です。これまでの書籍では、出版社からある程度決まった構成や、書籍の方針にしたがって執筆していたのですが、今回は「何を書いても構いません」ということで、自分のカラーをかなり出せたと思います。

書籍の内容をおおざっぱに申し上げますと、インストールから操作方法、カスタマイズ、MTの付加機能などを網羅しています。テンプレートの解説とカスタマイズが本書のメインで、この部分に通常の書籍の1冊分を費やしています。

カスタマイズは、このブログで公開してきたものを多く含んでますが、(今のところ)ブログで公開していないカスタマイズもあります。テンプレートのカスタマイズは執筆途中で他のサイトで紹介されてしまったものもあり、バッティングしているかもしれませんので予めご容赦ください。逆に、参考にさせて頂いたものは参考記事として、サイト名とパーマリンクを掲載するようにしました。

この本はビギナーや中・上級者など、誰に対してというのは特に意識せず、単に自分が書きたいこと、書けることを綴った、というのが正直なところです。前書きにはそれらしいことを書いてしまってますが、そういう方針めいたものは何もありません。
あえて誰かに向けて書いたか?と問われれば、「自分」です。

また当初、「250~300ページ以上(あまり薄いと、書店に立てて並べたときにタイトルが見えないらしい)であれば何ページでも構いません」というようなことを言われたので、がむしゃらに書き綴ったところ、終盤でストップがかかりました(が、書きたいことは大体盛り込みました)。したがって、フォントサイズや行間を詰めに詰めて、ページ数をかなり絞っています。

さらに、パーフェクトな内容ではないので、タイトルの「パーフェクト」は私自身としては本意ではありませんでしたが、ページ数の関係でそういうタイトルにせざるを得ませんでした。

タイトルの通り、バージョン 4.2 をターゲットにしています。ただし、執筆時点で確認できたのは RC3 (厳密には RC3 以降にリリースされた MTOS のナイトリービルドで差分をチェック)だったため、正式リリース版と食い違いがあるかもしれません。このあたりはサポートサイトでカバーしたいと思います。

目次などは別の機会にエントリーします。

Comments [0] | Trackbacks [0]

FC2 ブログテンプレート不具合のお知らせ

July 16,2008 12:03 AM
Category:[テンプレート]
Tag:[, ]
Permalink

現在、当ブログで配布中の FC2 ブログテンプレートをご利用のサイトで、レイアウトが崩れるという事象が発生しています。

FC2 ブログテンプレートをご利用の皆様にはご迷惑をおかけ致して申し訳ございませんが、下記の内容をご覧になり、該当する場合は、3項の対処を行ってください。

1.事象

3カラム固定レイアウトの場合、IE6 で閲覧すると、右サイドバーが左側に折り返し、右サイドバー上部に「/for one column -->」という文字が表示されます。

右サイドバー

また、中央カラム下部の著作権表示のフォントサイズも大きく表示されます。

右サイドバー

2.原因

カラムレイアウトを1カラムにした場合に利用するマークアップ(下)があります。

<!-- for one column
<div id="footer-one"><a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><br />
<%ad> | <%ad2><br />
<p style="margin:10px 0 0 0">Copyright c 200x xxxxx. All Rights Reserved.</p>
</div>
/for one column -->

この中に、FC2ブログへ広告を表示するための、ad2 という広告変数(赤色)を埋め込んでいます。この広告変数は規約上、FC2ブログテンプレートへ設定が必須ですが、この広告変数が展開されると、その中に次のような「即席PVカウンター」が出力されます。

<!-- 即席PVカウンター ここから -->
<script language="JavaScript" type="text/javascript" src="http://.../counter.php?id=30"></script><noscript><img src="http://.../counter_img.php?id=30"></noscript>
<!-- 即席PVカウンター ここまで -->

ここで使われている、コメント用のマークアップ <!-- ~ --> が、前述のマークアップ全体を括っているコメント用のマークアップ <!-- for one column ~ /for one column --> と入れ子になってしまい、IE6では正しく表示できず、レイアウトが崩れてしまいます。

3.対策

2項に掲載した、テンプレートの中にある下記のマークアップを丸ごと削除してください。1カラムで使用していなければ、この部分は不要です。

<!-- for one column
<div id="footer-one"><a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><br />
<%ad> | <%ad2><br />
<p style="margin:10px 0 0 0">Copyright c 200x xxxxx. All Rights Reserved.</p>
</div>
/for one column -->

以上です。

コメントでご連絡くださった、Sea さん、秋日子さんに、この場をお借りしてお礼申し上げます。ありがとうございました。

Comments [0] | Trackbacks [0]

カテゴリー別 Ajax 月送りカレンダー(MT4版)

July 15,2008 2:22 AM
Category:[カレンダー]
Tag:[, , , ]
Permalink

Ajax 月送りカレンダーMovable Type 4 版の「カテゴリー別 Ajax 月送りカレンダー」のカスタマイズです。リアルタイムカレンダー(本日の日付の装飾)および土・日・休日表示も盛り込まれています。

これまでの月送りカレンダーは、ブログ全体のブログ記事を対象にしたものでしたが、本カスタマイズではカテゴリー別にカレンダーを表示するようにアレンジしたものです。通常の Ajax 月送りカレンダーのカスタマイズ方法は「Ajax 月送りカレンダー(MT4版)」をご覧ください。

きめ細かい制御ができていませんが、とりあえずβ版ということで公開します。このカスタマイズは Movable Type 4.2 で動作を確認していますが、4.1 でも大丈夫と思います。

ここでは公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

1.スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

  • prototype.js("Download the latest version" のリンクをクリック)
  • ajaxCalendar.js(本カスタマイズ専用です)
  • dayChecker.js(「2.ダウンロード」にある dayChecker.js をクリック)

ダウンロードした ajaxCalendar.jsdayChecker.js はメインページと同じディレクトリにアップロードしてください。
また prototype.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。

2.カテゴリ別カレンダーテンプレート作成

注:ブログの文字コードが UTF-8 以外で運用されている場合は、2.1項のカスタマイズも併せて行ってください。

管理メニューの「デザイン」→「テンプレート」→「アーカイブテンプレート」→「アーカイブテンプレートを作成」の「ブログ記事リスト」をクリック。

テンプレート新規作成

次画面で下記を設定してください。

  • テンプレート名(一番上のテキストフィールド):カテゴリ別カレンダー
  • ファイルへのリンク:(設定不要)
  • テンプレートの内容(テキストエリア):下記
<table summary="<mt:SubCategoryPath />/<mt:ArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<mt:ArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<mt:BlogArchiveURL />calendar/<mt:SubCategoryPath />/<mt:ArchiveDate format="%Y/%m/%i">');">&#65308;</a>
</mt:ArchivePrevious>
<mt:ArchiveDate format="%B %Y" /> 
<mt:ArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<mt:BlogArchiveURL />calendar/<mt:SubCategoryPath />/<mt:ArchiveDate format="%Y/%m/%i">');" >&#65310;</a>
</mt:ArchiveNext>
</caption>
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
<mt:CategoryLabel setvar="category_label">
<mt:Calendar category="$category_label" month="this">
<mt:CalendarWeekHeader><tr></mt:CalendarWeekHeader>
<td><mt:CalendarIfBlank><mt:Else><span></mt:Else></mt:CalendarIfBlank><mt:CalendarIfEntries>
<mt:Entries lastn="1"><a href="<mt:EntryLink archive_type="Daily" />"><mt:CalendarDay /></a></mt:Entries>
</mt:CalendarIfEntries><mt:CalendarIfNoEntries><mt:CalendarDay /></mt:CalendarIfNoEntries><mt:CalendarIfBlank>
<mt:Else></span></mt:Else></mt:CalendarIfBlank></td><mt:CalendarWeekFooter></tr></mt:CalendarWeekFooter></mt:Calendar>
</table>

設定後は次のような感じになります。

テンプレート作成

設定が終わったら「保存」をクリックしてください。

2.1 ブログの文字コードがUTF-8以外の場合

Ajax(XMLHttpRequest)は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、2項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
      :
 (カレンダーテンプレート)
      :
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

3.カレンダーテンプレートを月別アーカイブに関連付け

テンプレートを保存すると、同じページの下に「アーカイブマッピング」の項目が表示されるので、「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング作成

「種類」から「カテゴリ - 月別」を選択して「追加」をクリック。

アーカイブマッピング追加

これでカレンダーテンプレートが月別カテゴリアーカイブとして定義され、カレンダー用の「パス」が表示されます。
注:「カテゴリ - 月別」欄の右側にあるチェックボックスは絶対にチェックしないでください。また、ご利用のテンプレートによってはチェックボックスが表示されない場合もありますが、問題ありません。

アーカイブマッピング追加完了

次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択。

セレクトボックスより「カスタム」を選択

「パス」欄に下記の内容を設定して、「保存」をクリックしてください。

calendar/%-c/%y/%m/%i

パス変更

下のようになればアーカイブマッピングの設定完了です。

パス変更完了

4.日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。
注:この設定を行わないと月別アーカイブの再構築で下記のエラーが表示されます。

再構築エラー

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択。4.2以降の「既定のブログ」では、「ブログ記事リスト」という名前のテンプレートがないので、「月別ブログ記事リスト」を選択してください。それもない場合は、月別アーカイブ用のテンプレートを選択してください。

テンプレート一覧

アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「日別」を選択して「追加」をクリック。

アーカイブマッピング

これで日別アーカイブが追加されました。

日別アーカイブの追加

5.テンプレート修正

5.1 外部ファイルのインクルード

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」をクリックし、<head>~</head> の間に下記を追加して「保存」をクリック。

<mt:if name="module_category_archives">
<script type="text/javascript" src="<mt:BlogURL />prototype.js"></script>
<script type="text/javascript" src="<mt:BlogURL />ajaxCalendar.js"></script>
<script type="text/javascript" src="<mt:BlogURL />dayChecker.js"></script>
</mt:if>

5.2 カレンダー表示部分の設定

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2(またはサイドバー)」をクリックし、カレンダーを表示させたい位置に下記を追加して「保存」をクリック。

<mt:if name="module_category_archives">
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<mt:BlogArchiveURL />", "<mt:BlogID />", "<mt:BlogArchiveURL /><mt:Entries lastn="1" sort_order="descend">calendar/<mt:SubCategoryPath />/<mt:EntryDate format="%Y/%m/"  /></mt:Entries>");
</script>
</mt:if>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

6.CSS修正

「デザイン」→「テンプレート」→「スタイルシート(メインまたはベーステーマ)」を選択し、下記を追加して「保存および再構築」をクリックします。

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定(下)を削除またはコメントアウトしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #333;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
span.day {
    text-align: center;
    font-size: 9px;
}
span.saturday {
    color: blue;
}
span.sunday {
    color: #e50003;
}
td.today {
    display: block;
    border: 1px solid #333;
}

7.再構築

全てのページを再構築します。これでメインページ等を表示してカテゴリー別にカレンダーが表示されれば完成です。

2008.11.11
3項のパスが誤っていたので修正しました。また、「Ajax 月送りカレンダー(MT4版)」へのリンクを追加しました。

2007.03.02
日別アーカイブ追加の説明を修正しました。


*1:文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Comments [4] | Trackbacks [0]

プライベートタグで特定のブログ記事一覧を表示する

July 14,2008 1:10 AM
Category:[エントリー・タグ]
Tag:[, ]
Permalink

Movable Type のタグ機能には「プライベート・モード」が用意されています。

タグの先頭に「@」を付与することで、そのタグは「プライベートタグ」となり、MTEntryTagsタグ・MTTagsタグなどのブロックタグの収集対象から除外でき、プライベートタグ名を指定すれば、収集対象にすることができます。

このプライベート・モードを利用して、ブログ記事が属するカテゴリーやタグに依存しない特定のブログ記事を集めた、例えば「トピック」一覧を表示する方法を紹介します。

方法は簡単で、表示したいブログ記事に「@topic」というプライベートタグを付与します。ブログ記事には、カテゴリーや通常のタグも設定してかまいません。

そして、次のサブテンプレートをテンプレートの任意の位置に設定すれば、プライベートタグを付与したブログ記事の一覧を表示します。

<mt:Entries tag="@topic" days="10">
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <li><a href="<mt:EntryPermalink valid_html="1" />"><mt:EntryTitle encode_html="1" /></a></li>
  <mt:EntriesFooter>
</ul>
  </mt:EntriesFooter>
</mt:Entries>

MTEntries タグの tag モディファイアにプライベートタグ「@topic」を指定することで、このタグが設定されたブログ記事のみを収集します。また、ここでは days モディファイアで 10 を指定しているので、10日分のブログ記事を表示します。

表示件数を一定にしたい場合は、MTEntries タグの days モディファイアの代わりに、lastn モディファイアまたは limit モディファイアを指定します。

<mt:Entries tag="@topic" lastn="10">
...後略...
<mt:Entries tag="@topic" limit="10">
...後略...

カテゴリ別にトピック一覧を表示したい場合は、MTEntries タグに、さらに category モディファイアを指定します。

<mt:Entries tag="@topic" lastn="10" category="カテゴリ名">
...後略...
Comments [2] | Trackbacks [0]

このYシャツ

July 13,2008 12:03 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [0] | Trackbacks [0]

「最近のコメント」のページを作る(改)

July 12,2008 2:02 AM
Category:[その他, コメント]
Tag:[, , ]
Permalink

昨日公開した「「最近のコメント」のページを作る」は、ウェブページを保存しないと内容が更新されないという重大な誤りがありました。この場をお借りしてお詫び申し上げます。
はてブでのご指摘ありがとうございました。 > aklaswadさん

前のエントリーは失敗例としてそのままにしておき、このエントリーで修正したものを紹介します。


Movable Type 4 で「最近のコメント」のページを作る方法です。

完成画面

サイト内でひとつの独立したページを作成するため、ここではウェブページアーカイブを利用する方法を紹介します。サンプルはデフォルトテンプレートを使っていますが、他のテンプレートでも同様です。

このカスタマイズは、バージョン 4.2 向けです。4.0 ~4.1 で使用する場合は、手順の中のmteval モディファイアを、EvalTemplateプラグインに変更してください。多分動作すると思います。

このテクニックを利用すれば、「最近のブログ記事」や「カテゴリー一覧」など、好きなリストのページを作成することができます。

1.ウェブページアーカイブの修正

ウェブページアーカイブの本文フィールドでテンプレートタグを使えるようにするための修正を行います。

[設定]-[テンプレート]-[アーカイブテンプレート一覧]にある「ウェブページ」をクリックします。

アーカイブテンプレート一覧

テンプレート編集画面にある、MTPageBodyタグにmtevalモディファイアを追加して、[保存]をクリックします。

テンプレート編集画面

修正後のMTPageBodyタグは次のようになります。

<$mt:PageBody mteval="1"$>

2.「最近のコメント」インデックステンプレートの作成

「最近のコメント」のリスト部分を出力するインデックステンプレートを作成します。

[デザイン]-[テンプレート]でテンプレート一覧画面を表示し、インデックステンプレートを作成をクリックします。

テンプレート一覧画面

テンプレートの内容に次のサブテンプレートを設定します。

<mt:IfNonZero tag="blogCommentCount">
<mt:Entries recently_commented_on="10">
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <li><a href="<mt:EntryPermalink valid_html="1" />"><mt:EntryTitle encode_html="1"></a>
    <ul>
    <mt:Comments lastn="10">
      <li>
        <a href="<mt:EntryLink archive_type="Individual" />#c<mt:CommentID />" title="comment-<mt:CommentID />">
          <mt:CommentAuthor default="Anonymous">
        </a> <mt:CommentDate format="%m/%d" />
      </li>
    </mt:Comments>
    </ul>
  </li>
  <mt:EntriesFooter>
</ul>
  </mt:EntriesFooter>
</mt:Entries>
</mt:IfNonZero>

上記のテンプレートは自由にカスタマイズして構いません。

出力ファイル名に「recent_comments」、テンプレートの種類に「カスタムインデックステンプレート」を選択します。公開欄はとりあえずスタティックにしておいてください。

テンプレート設定画面

このテンプレートは、次項のウェブページを作成する前に、必ず再構築を行ってください。

3.「最近のコメント」ウェブページの作成

「最近のコメント」用のウェブページを作成します。

[新規作成]-[ウェブページの作成]でウェブページ作成画面を開きます。

ウェブページ作成

タイトルは「最近のコメント一覧」として(何でもいいです)、本文フィールドのフォーマットを「なし」に変更します。

ウェブページ作成

フォーマット変更後、次の内容を本文フィールドに設定します。

<mt:include file="recent_comments">

MTLink タグに file モディファイアを設定することで、外部ファイルの内容をページに反映させることができます。

ウェブページの出力先フォルダの設定は任意です。ここでは設定しないので、ブログディレクトリ直下に出力します。ファイル名は何でも構いませんが、「comments.html」にしておきます。また、このウェブページへのコメント・
トラックバックは受信しない設定にします。

ウェブページの設定

保存すれば冒頭の画面のように表示されます。コメント投稿者は実在の人物ですが、気にしないでください。

4.「最近のコメント」ウェブページへのリンクの作成

このページへのリンクを表示するには、サイドバーなどに、このページのURLを、a 要素のhref属性に直接埋め込むか、MTLinkタグを使って次の内容を埋め込んでください。

<a href="<mt:Link entry_id="ウェブページのID番号" />">最近のコメント</a>

ウェブページのID番号 は、該当のウェブページ編集画面を表示したときのURLに含まれる、下記の赤色部分です。

http://user-domain/mt/mt.cgi?__mode=view&_type=page&id=3&blog_id=1

entry_id モディファイアはもともとブログ記事のID番号を指定するためのモディファイアですが、ウェブページのID番号はブログ記事とウェブページでユニーク(=ブログ記事と重複しない)なので、このような指定が可能、という訳です。

5.インデックステンプレートのみで「最近のコメント」のページを作る場合

1~4項の手順ではウェブページを使った方法を示しましたが、ウェブページを使わない場合は、インデックステンプレートのみで「最近のコメント」のページを作ります。

具体的には、「最近のコメント」という新しいインデックステンプレートを作成し、「メインページ」インデックステンプレートと、「ブログ記事の概要」テンプレートモジュールの(X)HTMLマークアップ部分と、3項の内容を組み合わせたものを設定します(以下)。

黒色部分が「メインページ」インデックステンプレート、青色部分が「ブログ記事の概要」テンプレートモジュール、赤色が3項の「最近のコメント」のサブテンプレートです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
  <$mt:Include module="HTMLヘッダー"$>
  <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
  <title><$mt:BlogName encode_html="1"$></title>
</head>
<body id="<$mt:BlogTemplateSetID$>" class="mt-main-index <$mt:Var name="page_layout"$>">
  <div id="container">
    <div id="container-inner">
      <$mt:Include module="バナーヘッダー"$>
      <div id="content">
        <div id="content-inner">
          <div id="alpha">
            <div id="alpha-inner">
<div class="entry-asset asset hentry">
  <div class="asset-header">
    <h2 class="asset-name entry-title">最近のコメント</h2>
  </div>
  <div class="asset-content entry-content">
    <div class="asset-body">
<mt:IfNonZero tag="blogCommentCount">
<mt:Entries recently_commented_on="10">
<mt:EntriesHeader>
  <ul>
</mt:EntriesHeader>
  <li><a href="<mt:EntryPermalink valid_html="1" />"><mt:EntryTitle encode_html="1"></a>
    <ul>
    <mt:Comments lastn="10">
      <li>
        <a href="<mt:EntryLink archive_type="Individual" />#c<mt:CommentID />" title="comment-<mt:CommentID />">
          <mt:CommentAuthor default="Anonymous">
        </a> <mt:CommentDate format="%m/%d" />
      </li>
    </mt:Comments>
    </ul>
  </li>
<mt:EntriesFooter>
  </ul>
</mt:EntriesFooter>
</mt:Entries>
</mt:IfNonZero>
    </div>
  </div>
  <div class="asset-footer"></div>
</div>
            </div>
          </div>
          <$mt:Include module="サイドバー"$>
        </div>
      </div>
      <$mt:Include module="バナーフッター"$>
    </div>
  </div>
</body>
</html>

このインデックステンプレートから出力したページへのリンクを表示するには、サイドバーなどに、このページのURLを、a 要素のhref属性に直接埋め込むか、MTLinkタグを使って次の内容を埋め込んでください。

<a href="<mt:Link template="最近のコメント" />">最近のコメント</a>
Comments [0] | Trackbacks [0]

「最近のコメント」のページを作る

July 11,2008 12:55 PM
Category:[その他, コメント]
Tag:[, , ]
Permalink

Movable Type 4 で「最近のコメント」のページを作る方法です。

お詫び:このカスタマイズにはウェブページを更新しないと、最新の情報が取得できないという致命的な誤りがあるため、本エントリーのカスタマイズは行わず「「最近のコメント」のページを作る(改)」を参照してください。なお、本カスタマイズで使用しているプラグインには何ら問題はありません。

完成画面

サイト内でひとつの独立したページを作成するため、ここではウェブページアーカイブを利用する方法を紹介します。サンプルはデフォルトテンプレートを使っていますが、他のテンプレートでも同様です。

このカスタマイズは、バージョン 4.2 向けです。4.0 ~4.1 で使用する場合は、手順の中のmteval モディファイアを、EvalTemplateプラグインに変更してください。多分動作すると思います。

このテクニックを利用すれば、「最近のブログ記事」や「カテゴリー一覧」など、好きなリストのページを作成することができます。

1.IndexContext プラグインのインストール

メインページと同じ情報をアーカイブページで表示する indexcontext プラグイン」の1項の設定を行ってください。

このプラグインを使用しないと、ウェブページ(の本文フィールド)でMTCommentsタグを使用した場合、ウェブページのコンテキストに依存してしまい、期待する内容(=ブログ全体を対象としてコメント)が出力されません。

2.ウェブページアーカイブの修正

ウェブページアーカイブの本文フィールドでテンプレートタグを使えるようにするための修正を行います。

[設定]-[テンプレート]-[アーカイブテンプレート一覧]にある「ウェブページ」をクリックします。

アーカイブテンプレート一覧

テンプレート編集画面にある、MTPageBodyタグにmtevalモディファイアを追加して、[保存]をクリックします。

テンプレート編集画面

修正後のMTPageBodyタグは次のようになります。

<$mt:PageBody mteval="1"$>

3.「最近のコメント」ウェブページの作成

「最近のコメント」用のウェブページを作成します。

[新規作成]-[ウェブページの作成]でウェブページ作成画面を開きます。

ウェブページ作成

タイトルは「最近のコメント一覧」として(何でもいいです)、本文フィールドのフォーマットを「なし」に変更します。

ウェブページ作成

フォーマット変更後、次の内容を本文フィールドに設定します。

<mt:IndexContext>
<mt:IfNonZero tag="blogCommentCount">
<mt:Entries recently_commented_on="10">
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <li><a href="<mt:EntryPermalink valid_html="1" />"><mt:EntryTitle encode_html="1"></a>
    <ul>
    <mt:Comments lastn="10">
      <li>
        <a href="<mt:EntryLink archive_type="Individual" />#c<mt:CommentID />" title="comment-<mt:CommentID />">
          <mt:CommentAuthor default="Anonymous">
        </a> <mt:CommentDate format="%m/%d" />
      </li>
    </mt:Comments>
    </ul>
  </li>
  <mt:EntriesFooter>
</ul>
  </mt:EntriesFooter>
</mt:Entries>
</mt:IfNonZero>
</mt:IndexContext>

上記のテンプレートは自由にカスタマイズして構いませんが、一番外側のIndexContextタグは外さないでください。

このページの出力先フォルダの設定は任意です。ここでは設定しないので、ブログディレクトリ直下に出力します。ファイル名は何でも構いませんが、「comments.html」にしておきます。また、このウェブページへのコメント・
トラックバックは受信しない設定にします。

ウェブページの設定

保存すれば冒頭の画面のように表示されます。コメント投稿者は実在の人物ですが、気にしないでください。

4.「最近のコメント」ウェブページへのリンクの作成

このページへのリンクを表示するには、サイドバーなどに、このページのURLを、a 要素のhref属性に直接埋め込むか、MTLinkタグを使って次の内容を埋め込んでください。

<a href="<mt:Link entry_id="ウェブページのID番号" />">最近のコメント</a>

ウェブページのID番号 は、該当のウェブページ編集画面を表示したときのURLに含まれる、下記の赤色部分です。

http://user-domain/mt/mt.cgi?__mode=view&_type=page&id=3&blog_id=1

entry_id モディファイアはもともとブログ記事のID番号を指定するためのモディファイアですが、ウェブページのID番号はブログ記事とウェブページでユニーク(=ブログ記事と重複しない)なので、このような指定が可能、という訳です。

Comments [0] | Trackbacks [0]

チャレンジ!Movable TypeをCMSとして使ってみよう!(第2回:MTタグの基本的な書き方・各テンプレートの説明)

July 10,2008 12:55 AM
Category:[お知らせ]
Tag:[]
Permalink

フリーランスWebデザイナー・黒野明子さんgihyo.jp で Movable Type の連載第2回が公開されています。と書いている私が気がついていませんでした...。


チャレンジ! Movable TypeをCMSとして使ってみよう!- 第2回 MTタグの基本的な書き方・各テンプレートの説明

チャレンジ! Movable TypeをCMSとして使ってみよう!

第2回は「MTタグの基本的な書き方・各テンプレートの説明」で、テンプレートやテンプレートタグに関しての Movable Type 3 や、4.1、4.2 の違いと実例について、「ほげ山くん」と「くれま先輩」が会話形式で進めています。

最後のページの、ブラウザでのテンプレートタグ検索のテクニックは、参考になりました。テンプレートタグリファレンスに次の行が書かれていることで機能しているようです。

<link rel="search" type="application/opensearchdescription+xml" href="http://www.movabletype.jp/opensearch/templatetag.xml" title="MT タグ検索" />
Comments [0] | Trackbacks [0]

電車の中でノートPCを使った感想

July 9,2008 2:22 AM
Category:[小品文]
Tag:[]
Permalink

MT本の執筆期間中、ノートPC(IBM ThinkPad 12.1インチ)を利用して、電車の中でもかなり筆を進めました。感覚的に60時間分くらいは電車の中で書いたと思います。

普段は車内でノートPCを扱うことはないのですが、人目をはばからずにPCを操作して感じたことを記しておきます。

1.隣に誰も座らない

一番印象に残ったのは、私の隣の席は常に最後まで空いていたことです。座れないほど混雑してくると、ようやく座る人が現れます。
PCを操作している人の隣には、皆さん座りたくないようです。

2.ディスプレイが邪魔

車内が混雑すると、ディスプレイが立っている人のカバンなどに結構あたります。背広のひらひらがディスプレイの前にかぶさってしまったこともしばしば(手で払いました)。ノートPCの前に立ったお客さんはディスプレイにあたらないようにとか、気を遣わない人が多いように感じたので、自己防衛しましょう。

3.座る位置

使い始めた当初はドアの横の端の席に座るようにしていたのですが、混雑がひどくなると、ドア付近に立っているお客さんの荷物がディスプレイにあたってしまって、作業できなくなります。
後半は、車両の連結部分に一番近い席に座るようにしました。個人的にはこの位置が一番良かったです。

4.プライバシーフィルター

私の横に座ったお客さんは当然ディスプレイが気になって覗くのですが、のぞき見防止用の「プライバシーフィルター」を装着していたので、おそらくほとんど何も見えていなかったと思います。

プライバシーフィルターは何社か調べて、視野角の一番狭い「3Mセキュリティ/プライバシーフィルター」を購入しました。12.1インチであれば、48度という、他のメーカーにない視野角の狭さです。ちょっと値段は高めですが効果抜群です。なお、両方向とも同じように見えなくなるのではなく、どちらか一方は若干効果が薄いようなので(装着する方向によります)、私は効果の高い方にお客さんが座るよう、席を確保していました。
そこまでかぶりつきで見る人もいないと思いますが。

3Mセキュリティ/プライバシーフィルター ハイグレードタイプ3Mセキュリティ/プライバシーフィルター ハイグレードタイプ

住友スリーエム
売り上げランキング :

Amazonで詳しく見る
by G-Tools
Comments [2] | Trackbacks [0]

Movable Type本 校了しました

July 8,2008 1:17 AM
Category:[お知らせ]
Tag:[]
Permalink

4冊目のMT本を校了しました。

Movable Type本

書籍の詳細につきましては、追ってお知らせします。今回はあまり大げさにアナウンスしないつもりです(気が変わるかもしれませんが)。

ここ数カ月、この本の執筆にほとんど費やしていたので、ちょっと一休みさせてください。お待ち頂いているコメント返答も、もう少し待ってください。このエントリーに、カスタマイズの質問もご遠慮ください。

とりあえず、お疲れ様! > 自分(笑)

Comments [0] | Trackbacks [0]

ブログ簡単パワーアップ Movable Type4 スーパーカスタマイズテクニック

July 7,2008 12:55 PM
Category:[書籍]
Tag:[, ]
Permalink

藤本壱さん執筆の、Movable Type 4.2 対応の書籍です。

ブログ簡単パワーアップ Movable Type4 スーパーカスタマイズテクニックブログ簡単パワーアップ Movable Type4 スーパーカスタマイズテクニック
藤本 壱

技術評論社 2008-07-02
売り上げランキング : 46017

Amazonで詳しく見る
by G-Tools

個人的には、なにはさておき、「ついに正式版リリース前に本が出た!」という印象です(笑)。
そういうわけで、執筆内容はRC1(リリース候補版1)のもので、最新情報は書籍に掲載されているサイトに掲載されるようです。

内容は、ご覧のとおり、Movable Type 4 のインストールされていることが前提で、ブログをさらにカスタマイズしたい方のための情報が満載です。4.1 で追加されたカスタムフィールド、4.2で追加されたサーバーサイドインクルードやモジュールキャッシュの利用方法も解説されています。

第1章 テンプレートとスタイルシートを入れ替える
1-1 テンプレートとスタイルシートの関係
1-2 スタイルシートを入れ替える
1-3 テンプレートを入れ替える
第2章 スタイルシートでブログのデザインを変える
2-1 スタイルシートの基本
2-2 主要なプロパティ
2-3 カスタマイズ用スタイルシートの作成
2-4 カラムの数と配置の変更
2-5 カラムの幅の変更
2-6 全体的な背景色や画像を変える
2-7 ブログ各部のデザインを変える
第3章 テンプレートをカスタマイズする
3-1 Movable Type 4.2のテンプレートの構造
3-2 ページの先頭にお知らせ等を表示する
3-3 ブログ記事の後にバナー広告等を表示する
3-4 メインページをニュースサイト風にする
第4章 ウィジェットを使ってサイドバーをカスタマイズする
4-1 ウィジェットの概要
4-2 小粋空間のテンプレートセットをウィジェットに対応させる
4-3 ウィジェットセットの設定
4-4 独自のウィジェットを作る
4-5 カテゴリー一覧のツリー表示
4-6 ブログ記事が属するカテゴリーの記事を一覧表示する
第5章 JavaScriptを組み合わせたカスタマイズ
5-1 ブログ記事のアドレス/トラックバックURLをコピーしやすくする
5-2 サイドバーの折りたたみ ─── 基本編
5-3 サイドバーの折りたたみ ─── 応用編
5-4 Liteboxで画像を格好良く表示する
第6章 管理ページを使いやすくするカスタマイズ
6-1 管理ページをブックマークする
6-2 ブログ記事の日時を公開時点の日時にする
6-3 カテゴリー/フォルダの順序を並べ替える
6-4 リッチテキストエディターをFCKeditorに変える
第7章 読者の利便性を高めるカスタマイズ
7-1 メールフォームを設置する
7-2 携帯電話でブログにアクセスできるようにする
7-3 コメントの処理をAjax化する
7-4 コメントに返信したときにコメント元の人にメールで通知する
第8章 プラグインで様々な情報を表示する
8-1 最近のコメント/トラックバックをブログ記事ごとにまとめて表示する
8-2 ポッドキャスティングを行う
8-3 CustomFieldsでブログ記事に様々な情報を表示する
8-4 CustomFieldsでカテゴリーごとにスタイルシートを切り替える
8-5 Twitterなどでの行動を表示する
第9章 Movable TypeをPHPやAjaxと組み合わせる
9-1 PHPとAjaxの基本
9-2 PHP化の手順
9-3 キャッシュとサーバーサイドインクルードを使った再構築軽量化
9-4 Ajaxを使った再構築軽量化
9-5 テンプレートをリアルタイムに再構築する
9-6 メインページ/アーカイブページの分割
第10章 Movable Typeの管理
10-1 コメント/トラックバックスパムをフィルタで除外する
10-2 日本語を含まないコメント/トラックバックをスパムとみなす
10-3 機械的なコメントスパム/トラックバックスパムの投稿を防ぐ
10-4 指定した日時にブログ記事を投稿する
10-5 「ほぼ」指定日投稿
10-6 ブログのバックアップ

今回も私のテンプレートを取り扱って頂いてます。この場をお借りしてお礼申し上げます。

Comments [0] | Trackbacks [0]

コクヨの人が

July 6,2008 12:15 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [1] | Trackbacks [0]

音を大きくする本

July 5,2008 2:22 AM
Category:[書籍]
Tag:[, ]
Permalink

昨日、6月の Amazon ランキングを作成しているときに、気になった本を紹介します。

音を大きくする本 (Stylenote Nowbooks (3))
音を大きくする本 (Stylenote Nowbooks (3))永野 光浩

おすすめ平均
stars名著、ノイローゼになる前に読みましょう。
stars独学に限界を感じた人向け
starsシンプルかつ必要十分
starsとてもスマートでわかりやすい
stars素晴らしい!

Amazonで詳しく見る
by G-Tools

音楽関係者としては妙にそそられるタイトルです。マニアックな本ながら、評価が高いです。

Amazon のレビューを読むと、音圧を稼ぐためのテクニックと、それに必要な機器の使用方法に的を絞り、112ページという薄さで無駄な内容が省かれているようです。

ネットで検索したら、CHEEBOW さんも書かれてました。

ヒビノアワ - 音を大きくする本CommentsAdd Star

同じ著書でもう一冊あります。

新・プロの音プロの技 (Stylenote Nowbooks 6)
新・プロの音プロの技 (Stylenote Nowbooks 6)永野 光浩

おすすめ平均
stars参考になりました。
stars即戦力の豆知識の宝庫!

Amazonで詳しく見る
by G-Tools

本の内容とは全然関係ないのですが、楽器の限界を超えずにいかに大きな音で鳴らすか、というのは、演奏家にとってひとつの課題だったりします。

Comments [0] | Trackbacks [1]

Amazon 2008年6月の注文ランキング

July 4,2008 2:05 AM
Category:[Amazon]
Tag:[, ]
Permalink

2008 年 6 月の Amazon 注文ランキングです。

1位:GriffinTechnology iTalk Pro GRI-IP-000063

GriffinTechnology iTalk Pro GRI-IP-000063GriffinTechnology iTalk Pro GRI-IP-000063

Griffin Technology 2006-11-10
売り上げランキング : 502

Amazonで詳しく見る
by G-Tools

2位:基本からしっかりわかる Movable Type 4.1 カスタマイズブック Movable Type 4.1/MTOS 4.1対応 (Web Designing BOOKS)

基本からしっかりわかる Movable Type 4.1 カスタマイズブック Movable Type 4.1/MTOS 4.1対応 (Web Designing BOOKS)基本からしっかりわかる Movable Type 4.1 カスタマイズブック Movable Type 4.1/MTOS 4.1対応 (Web Designing BOOKS)
大藤 幹

毎日コミュニケーションズ 2008-05-21
売り上げランキング : 2298

Amazonで詳しく見る
by G-Tools

3位:CMSとして使うMovable Typeガイドブック

CMSとして使うMovable TypeガイドブックCMSとして使うMovable Typeガイドブック
黒野 明子

翔泳社 2008-03-14
売り上げランキング : 2924

Amazonで詳しく見る
by G-Tools

3位:Movable Type 4でつくる![最強のブログサイト]

Movable Type 4でつくる![最強のブログサイト]Movable Type 4でつくる![最強のブログサイト]
小川晃夫&南大沢ブロードバンド研究会

ソーテック社 2008-05-22
売り上げランキング : 4542

Amazonで詳しく見る
by G-Tools

3位:Movable Type プロフェッショナル・スタイル MT4.1対応

Movable Type プロフェッショナル・スタイル MT4.1対応Movable Type プロフェッショナル・スタイル MT4.1対応
CSS Nite

毎日コミュニケーションズ 2008-04-08
売り上げランキング : 3502

Amazonで詳しく見る
by G-Tools

6位:グーグルが日本を破壊する

グーグルが日本を破壊する (PHP新書 518)グーグルが日本を破壊する (PHP新書 518)
竹内 一正

PHP研究所 2008-04-16
売り上げランキング : 3079

Amazonで詳しく見る
by G-Tools

7位:第1感 「最初の2秒」の「なんとなく」が正しい (翻訳)

第1感  「最初の2秒」の「なんとなく」が正しい (翻訳)第1感 「最初の2秒」の「なんとなく」が正しい (翻訳)
沢田 博 阿部 尚美

光文社 2006-02-23
売り上げランキング : 517

Amazonで詳しく見る
by G-Tools

8位:さあ、才能(じぶん)に目覚めよう―あなたの5つの強みを見出し、活かす

さあ、才能(じぶん)に目覚めよう―あなたの5つの強みを見出し、活かすさあ、才能(じぶん)に目覚めよう―あなたの5つの強みを見出し、活かす
田口 俊樹

日本経済新聞出版社 2001-12-01
売り上げランキング : 68

Amazonで詳しく見る
by G-Tools

8位:ひとを"嫌う"ということ

ひとを"嫌う"ということ (角川文庫)ひとを"嫌う"ということ (角川文庫)
中島 義道

角川書店 2003-08
売り上げランキング : 36626

Amazonで詳しく見る
by G-Tools

8位:人間この信じやすきもの―迷信・誤信はどうして生まれるか

人間この信じやすきもの―迷信・誤信はどうして生まれるか (認知科学選書)人間この信じやすきもの―迷信・誤信はどうして生まれるか (認知科学選書)
Thomas Gilovich 守 一雄 守 秀子

新曜社 1993-06
売り上げランキング : 1143

Amazonで詳しく見る
by G-Tools

8位:週刊 ダイヤモンド 2008年 2/9号 [雑誌]

週刊 ダイヤモンド 2008年 2/9号 [雑誌]週刊 ダイヤモンド 2008年 2/9号 [雑誌]

ダイヤモンド社 2008-02-04
売り上げランキング :

Amazonで詳しく見る
by G-Tools
Comments [2] | Trackbacks [0]

Serene Bach カテゴリーのプルダウン化プラグイン・バージョンアップ

July 3,2008 1:33 AM
Category:[プルダウン]
Tag:[, ]
Permalink

以前公開していた、Serene Bach 用の「カテゴリーのプルダウン化プラグイン」を改善しました。

このプラグインを利用すれば、カテゴリー単位の折りたたみや、親カテゴリー記事数の、子カテゴリー記事数との合算表示などが可能です。

1.問題点

カテゴリー数を子カテゴリーと合算しない場合、記事がないカテゴリーに「0件」を出力する。

修正前

子カテゴリーと合算する場合は表示しません(下)。

親カテゴリーと合算

2.対処

子カテゴリーとの合算にかかわらず、カテゴリーに記事がない場合、0件を出力しません。

修正後

修正版は下記のリンクからダウンロードしてください。

FoldCategory.zip

3.関連記事

本プラグインの利用・設定方法については下記の記事を参考にしてください。

Comments [3] | Trackbacks [0]

MTDate タグ・モディファイア詳説

July 2,2008 2:02 AM
Category:[4.2, テンプレートタグ]
Tag:[, ]
Permalink

MTDate タグの、Movable Type 4.2 におけるローカルモディファイア詳細です。MTDate タグは再構築の日付を表示するタグです。次の Date 系タグのローカルモディファイアはすべて共通です。

  • MTArchiveDate
  • MTArchiveDateEnd
  • MTAssetDateAdded
  • MTCalendarDate
  • MTCommentDate
  • MTDate
  • MTEntryCreatedDate
  • MTEntryDate
  • MTEntryModifiedDate
  • MTPageDate
  • MTPageModifiedDate
  • MTPingDate
  • MTScoreDate

1.モディファイアなし

モディファイアを指定しない場合は次のように出力されます。出力フォーマットは、ブログ管理画面の「設定」→「ブログ記事」→「日付の言語」の設定に依存します。

<$MTDate$>
2008年7月 2日 01:23 

2.utc モディファイア

utc モディファイアは、協定世界時(Coordinated Universal Time)を示します。タイムゾーンの設定で「UTC+9」とか設定するときの UTC です。1を設定するとタイムゾーンを無視して UTC で出力します。
分かりにくいですが、1項のサンプルから -9 時間で表示されます。

テンプレートタグの記述

<$MTDate utc="1"$>

出力

2008年7月 1日 16:23

3.format_name モディファイア

format_name モディファイアは出力フォーマットを決定します。rfc822 を設定すると、RFC822 に準拠したフォーマットで出力します。

テンプレートタグの記述

<$MTDate format_name="rfc822"$>

出力

Wed, 02 Jul 2008 01:23:56 +0900

iso8601 を設定すると、ISO8601 に準拠したフォーマットで出力します。

テンプレートタグの記述

<$MTDate format_name="iso8601"$>

出力

2008-07-02T01:23:56+09:00

utc モディファイアと組み合わせると、タイムゾーン指定子が UTC を表す「Z」になります。

テンプレートタグの記述

<$MTDate utc="1" format_name="rfc822"$>

出力

Tue, 01 Jul 2008 16:23:56 Z

テンプレートタグの記述

<$MTDate utc="1" format_name="iso8601"$>

出力

2008-07-01T16:23:56Z

3.relative モディファイア

Movable Type 4.2 で追加されたモディファイアです。名前の通り、相対時刻を出力します。JavaScript を利用するので、リアルタイムな相対時刻を表示します。
js を指定すると、JavaScript を利用して相対時刻を表示します。js 以外(1とか)であれば、再構築時間の相対時刻を表示します。
JavaScript を利用する場合は、mt.js のインクルードが必要です。

テンプレートタグの記述

<script src="<$MTBlogURL$>mt.js"></script>
...中略...
<$MTDate relative="js"$>

出力

5 分前

ソースコード

<script type="text/javascript">
/* <![CDATA[ */
document.write(mtRelativeDate(new Date(2008,7,02,01,23,56), '2008年7月 2日 01:23'));
/* ]]> */
</script><noscript>2008年7月 2日 01:32</noscript>

テンプレートタグの記述

<$MTDate relative="1"$>

出力

5 分前

4.mail モディファイア

1を設定すると出力内容をメールの文字コードにエンコードします。グローバルテンプレートのメール通知系で利用します。

テンプレートタグの記述

<$MTDate mail="1"$>

出力

2008年7月 2日 01:23 

1項と同じに見えますが、1項の「月」や「日」は、次のように数字実体参照されています。

ソースコード

2008&#24180;7&#26376; 2&#26085; 01:23

5.language モディファイア

出力する言語を指定します。フランス語を指定すると次のようになります。

テンプレートタグの記述

<$MTDate language="fr"$>

出力

2 juillet 2008 1h23
Comments [0] | Trackbacks [0]

図解! あなたもいままでの10倍速く本が読める

July 1,2008 12:55 PM
Category:[書籍]
Tag:[, ]
Permalink

勝間和代さんが実践する、フォトリーディング本を購入しました。

図解! あなたもいままでの10倍速く本が読める図解! あなたもいままでの10倍速く本が読める
フォトリーディング公認インストラクターズ

フォレスト出版 2005-05-24
売り上げランキング : 337

Amazonで詳しく見る
by G-Tools

監修の神田昌典氏は、経営コンサルタント、作家で、日本で「フォトリーディング」や「マインドマップ」を普及させた方のようです。

第1部 選択肢を広げる
第1章 フォトリーディングはこうして生まれた
第2章 古い読書法に固執するか?それとも...
第2部 フォトリーディング・ホール・マインド・システムを学ぶ
第3章 ステップ1-準備
第4章 ステップ2-プレビュー
第5章 ステップ3-フォトリーディング
第6章 ステップ4-アクティベーション
第7章 ステップ5-高速リーディング
第3部 スキルを活用し、マスターしよう
第8章 フォトリーディング・ホール・マインド・システムを生活の一部に
第9章 グループ・アクティベーションで情報を共有する
第10章 シンピトリック・リーディングで生涯学習
第11章 ダイレクト・ラーニングで、あなたの才能を発見しよう
第12章 フォトリーディング・ホール・マインド・システムの極意

この本は2001年に出版され、現在47刷のベストセラーです。
「それだけ売れていれば、みんなフォトリーディングできているだろう」というツッコミはなしで。

Comments [0] | Trackbacks [0]
Now loading...
Introduction
List of "July 2008"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site
loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12