ブログのフォントサイズ変更
執筆もひと段落して、GW にも入って長期休暇に突入したので、ようやく自分のブログを修正する気力が湧いてきました。
ということで、とりあえず以前からやりたかった、フォントサイズの修正を行いました。ブログに表示されている多くの部分のフォントサイズを大きくしています。
1.ヘッダー部分
グローバルナビゲーション全体の高さを増やし、フォントサイズを大きくしました。このページはブログ記事ページですが、前後リンクのブログ記事へのリンクやパンくずリストのフォントサイズを大きくしました。左側のカレンダーのフォントサイズも大きくしました。
変更前

変更後

2.タイトル部分
タイトルのフォントサイズを大きくしました。またブログ記事情報(投稿日・カテゴリ・タグ)のフォントサイズも大きくしました。
変更前

変更後

3.エントリー本文
全体のフォントサイズを大きくしました。リストを表示する部分も同様です。
変更前

変更後

4.サイドバー
サイドバータイトルの高さを増やし、フォントサイズを大きくしました。メニューリストも同様です。
変更前

変更後

5.コメント投稿フォーム
フォーム全体のフォントサイズを大きくしました。
変更前

変更後

6.コメント確認・投稿ボタン
フォームボタンも大きくしました。画面は Firefox で表示したときのものです。
変更前

変更後

ということで、やや今風のサイトになった気がします(自己満足)。あと、タイトルの文字が一番小さくなった気がします。
「最近のコメント一覧のページ」を作りました
「サイドバーの『Recent Comments(最近のコメント)』より、さらに過去の履歴を見たいのですが」というご要望がありました(頂いたご要望がコメントかメールか失念してしまいました...)ので、「最近のコメント一覧のページ」を作ってみました。
再構築のコストを考えて、今のところ最新500件のコメントを表示しています。
また、各ページの左サイドバーにある「Recent Comments」の一番下に、最新のコメント一覧のページにジャンプするリンク(下)を追加しました。

これに伴い、100件表示していた「Recent Comments」の表示件数を減らしました。
Movable Type 4.0 から 4.1 へのアップグレード
昨日、このサイトを Movable Type 4.0 から 4.1 にアップグレードしました。

あまり気がつかなかったのですが、実際に使ってみると、ブログ記事投稿画面の見通しが良くなりました。
ということで、アップグレード手順を掲載しておきます。
1.ブログのバックアップ
今回は、MT4.0 のバックアップ機能を使いました。
バックアップした後、正しくバックアップされているかどうか、バックアップファイルを確認した方が良いでしょう。圧縮ファイルは解凍すれば、XMLファイルなどはテキストエディタで確認できます。
またはバックアップを2回繰り返し、同じサイズになっていれば、経験上大丈夫だと思います。
なお、バックアップはアップグレード前だけでなく、定期的に行いましょう。
2.アプリケーションディレクトリのリネーム
「アプリケーションディレクトリ」は、mt.cgi などがあるディレクトリです。以前はこのディレクトリに新しい Movable Type のファイルを上書きアップロードしていましたが、最近はアプリケーションディレクトリ自体を FTP ツールでリネームして、プログラムを上書きしないようにしています。
例えば、アプリケーションディレクトリ名が
mt
であれば、
mt--
などに変更します。
4.0 → 4.1 のアップグレードでこの方法を推奨するわけではありません。個人的に上書きするという行為になんとなく抵抗があるので、このようにしているだけです(そもそもアップグレード後はデータベースの構造が変わり、旧プログラムは使えなくなります)。抵抗がない方は、単純に上書きアップロードした方が、後の面倒な作業が減ります。
なお、アプリケーションディレクトリ名を変更した後は、ブログ管理画面にアクセスできなくなりますので、注意してください。
3.アプリケーションディレクトリ作成
リネーム前と同じディレクトリを FTP ツールで(同じ位置に)作成します。上の例では、
mt
というディレクトリを作成します。
4.Movable Type 4.1のアップロード
Movable Type 4.1 のプログラム一式を、アプリケーションディレクトリにアップロードします。
スタティックディレクトリをアプリケーションディレクトリと別のディレクトリに配置している場合は、スタティックディレクトリも手順2~3と同じ要領でディレクトリを作成すると良いでしょう。
5.mt-config.cgi のコピー
旧アプリケーションディレクトリにある mt-config.cgi をFTPツールで一旦ローカルPCにダウンロードし、新アプリケーションディレクトリにアップロードします。
これを忘れたまま mt.cgi にアクセスすると、新規インストールを行ってしまうので注意してください。
6.CGIファイルの属性変更
アプリケーションディレクトリ直下にある、CGIファイルの属性を 644 から 755 や 705 などに変更します。属性が分からない場合は、旧アプリケーションディレクトリの CGI ファイルをみてください。
7.ブラウザから mt.cgi にアクセス
mt.cgi にアクセスするとアップグレードが開始します。「アップグレード開始」をクリック。

サインインします。

アップグレードを実行します。完了したら「Movable Typeに戻る」をクリック。

アップグレードが完了しました。
![]()
8.プラグインファイルのコピー
旧アプリケーションディレクトリから必要なプラグインをコピーします。
以上です。
CORESERVER(CORE-A)移行後の感想とコメント投稿エラーについて
CORESERVER(CORE-A)移行から約1ヶ月が経ちましたので、いくつか感想を。
1.ページ表示
サーバ移行後に頂いたコメントより、以前よりページの表示速度が早くなったようです。PHP を CGI 版からモジュール版に変更した恩恵なのかどうかは不明ですが、サーバ移転をして正解でした(さくらインターネットは良いレンタルサーバですので、その点は誤解なきよう)。
2.503 エラー
さくらインターネット(スタンダードプラン)で目標0件を達成できなかった、ページアクセス時の503エラーは0になりました。

上記は Google ウェブマスターツールのクロール結果です。503エラーとなったページ数は「URL にアクセスできません」に計上されますが、今のところ0件です。
なお、「HTTP エラー」や「見つかりませんでした」に計上されているのは、外部サイトからのリンク(で存在しないもの)がクロールされているようです。
3.コメント投稿エラー
上記の2点は改善されたのですが、その代わり、コメント投稿で 500 エラー、あるいは下のようなエラーが発生するケースが新たに浮上しました。

原因はアカウントの負荷が高いことによるものと推測されます。
サーバ負荷を考慮して、CORE-A ではなく、CORE-B に移行するつもりでしたが、なかなかサービスが開始されないので、見切り発車で CORE-A を選択したのが根本的な原因です。
CORE-B がサービス開始された暁には(可能であれば)速やかに移転したいと思います。
なお、この問題に遭遇すると、コメント自体はデータベースに書き込まれるのですが、ページに反映されない(=再構築されない)ため、投稿失敗にみえてしまい、重複して投稿されるようです。
上記のエラーが表示された場合は、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。
私もエラーに何回か遭遇していますが、リロードすることでほぼ全て投稿が反映されています。
4.その他
移転後、旧サーバからファイルの転送もれがいくつかあり、ファイルが参照できませんというご指摘を頂きました。最近は落ち着いてきたのですが、内部リンクでデッドリンクに遭遇した場合、ご一報頂ければ幸いです。
CSS 変更(Safari 対応)
Windows 版 Safari のベータ版がリリースされたのは皆さんご存知と思います。私も早速ダウンロードしまして、以前から気になっていた表示の崩れを修正しました。
1.Safari の日本語化
本エントリーと関係ありませんが、Windows 版 Safari ベータ版の日本語化手順の参考サイトを挙げておきます(ベータ版は日本語に対応してません)。
- 2ch旅行記:Safari 3 Public Betaを本格的に日本語が使えるようにする方法。
- 最速インターフェース研究会:Safari for Windows betaで日本語表示する方法
Via:世界中の1%の人々へ:今日の研究:Apple Safari 3 Public Beta for Windows
私は2つめの方法を利用し、
C:¥Documents and Settings¥ユーザ名(Administratorとか)¥Application Data¥Apple Computer¥Safari¥WebKitPreferences.plist
の
<key>WebKitSansSerifFont</key>
<string>Arial</string>
を
<key>WebKitSansSerifFont</key>
<string>MS UI Gothic</string>
に変更しただけでうまくいきました。他の1台は何をやっても文字化けして×でした。
2.CSS 変更点
CSS の変更点はヘッダとサイドメニューの表示崩れ、それから検索フォームのテキストエリア幅修正です。
下は Windows 版 Safari で閲覧した、修正前の当サイトのスクリーンショットです。

問題が集中している右上の部分のみクローズアップしています。ヘッダは背景画像とナビゲーションが分離し、サイドバーのメニュータイトルは高さが十分に確保できておらず、期待通りの立体感のある表示になっていません。
ヘッダとサイドメニューは画像と、上下にボーダーを組み合わせたデザインにしており、以前、iCapture で確認したところ、Safari のみ表示が崩れていました。Windows も自マシン以外の特定のブラウザの特定のバージョンでしか確認していないので「全部大丈夫」とは言えませんが…。
修正前はクロスブラウザ対応のために、コンテンツの高さを padding と CSS ハックでこねくり回していましたが、これをすっぱり諦めて height と line-height を用いてみました。サイドバーも padding の調節から height と line-height に変更しました。
この変更で、IE6 でサイドバーのアンカーのブロックレベル要素指定が無効になる事象(文字にマウスをポイントしないと反応しない)が発生し、かなり慌てましたが、親要素に height: auto; を与えることで解消しました。
ということで、以下が修正後のスクリーンショットです。

表示と動作は Wiindows XP + IE6/IE7/Firefox2/Opera9/Safari3 で確認しています。
なおブラウザのズーム機能を使うと修正前のヘッダと同じような症状になりますのであしからず。
CSS 変更(2007.02.11)
時間に少し余裕があったので手をつけていなかった部分を修正しました。変更内容は下記の通りです。
1.IE7 対応
Windows Vista も発売され、IE7 ユーザ増加に備え、サイドバーやカラム切り替えで、IE7 の場合に表示が若干崩れるという不具合を修正しました。
余談ですが、Vista 版の IE7 と XP での IE7 は正式名称が異なるようです(関連記事)。表示は XP+IE7 でしか確認してません。
2.Opera 9 対応
Opera 9 では随分前から上記と同様の表示の崩れや、折りたたみマークが文字化けしているという状態を放置しておりましたので、これらも併せて修正しました。
3.エントリータイトル
タイトルのフォントをやや大きくしました。またタイトル左の画像をやめて、border プロパティによるマークに変更しました。

4.サブカテゴリーリスト
親カテゴリーのツリーが長くなり過ぎ、途中でツリー画像が途切れてしまっていたので、親カテゴリーはツリー表示からリストマーク表示に変更しました。
なお親カテゴリーをツリー表示にしない方法についてはご質問がありましたので、その確認も兼ねてます。このカスタマイズにつきましては別途エントリーしたいと思います。

5.月別アーカイブリスト
月別アーカイブリストの折りたたみで、「年」の右側に表示していた折りたたみマークをやめて、年表示にリンクを設定しました。

6.Firefox / Opera での記事の折りたたみ
先日のカラムレイアウト変更により、Firefox / Opera で不具合のあったエントリーの折りたたみが問題なくできるようになりましたので、JavaScript を修正し、カテゴリー・アーカイブ/月別アーカイブ等で折りたたみ可能にしました。
以上です。
スタイルシートもかなり混沌とした状態になっていたので、僅かですが整理しました。そのせいで表示がおかしくなっているかもしれませんので、何かありましたらご指摘ください。
上記の修正で CSS と JavaScript を入れ替えました。キャッシュに旧データが残っていると正常に表示されないかもしれませんので、どのページでも構いませんので強制読み込みされることをお勧めします(参考:「ブラウザのキャッシュをクリアする」)。
ブログのパフォーマンス改善:その後(YSTとの戦い:その5)
先日エントリーした「サーバ移転延期とパフォーマンス改善内容について」の、現在のアクセスに関する状況報告です。
実施した改善策は下記の通りです。詳細は上記の記事を参照ください。
- PHP ファイルで条件付き GET ができるように変更
- PHP ファイルを最小限にして、最近のエントリー/コメント/トラックバック等のダイナミックなモジュールは PHP を用いたモジュール化から Ajax に変更
- ヘッダやバナー類のスタティックなモジュールも PHP モジュール化を行っていたので、これらは MTInclude に置き換え
1.エラーについて
通常のページ閲覧で 503 エラーは発生しなくなりました。ただしコメント投稿では数回発生することを確認しています。
2.Google Analytics による訪問者とページビュー数
「エラーが減る = アクセスが増える」ということで、現在のページビューの状況です。
下は Google Analytics による、対策前(12/14?1/21)と対策後(1/25?1/31)の「訪問者とページビュー数」です。
対策前

対策後

503 エラーが多発している時点では 4500?7000 PV だったのが、7500?10000 PV に上昇しています。実際は対策後の前の週でアクセスの多いエントリーをあげ、その余波があると思われるのでもう少し下がるのではないかと思います。
3.Google Analytics による参照ソース別訪問者数
これは意外な結果でしたが、これまでアクセスが伸びずに悩んでいた Yahoo からのアクセスが倍近くになりました。
下は Google Analytics による当サイトの昨日(1/31)の「ソース別の訪問数」です。

- 60.34%:google
- 9.56%:yahoo
- 6.76%:(direct)
- 1.81%:msn
- 1.53%: b.hatena.ne.jp
- 20.00%:(other)
ここ数ヶ月、3?4% をうろうろしていた Yahoo がようやく復活しました。2のページビュー増加にも貢献しています。
「Google と Yahoo からのアクセスは 1:1」という話を聞くので、10% 辺りという数値が妥当な数字であるかどうかについてですが、SEO で効果をあげられている「世界中の1%の人々へ」の蒲生トシヒロさんの下記の記事で Google と Yahoo の比率が似ていることから、いい線ではないかと考えています。
ちなみに、他で運用している音楽サイトは Yahoo の登録サイトで、1:1 の比率になっています。
思い返すと、503 エラーが多発し始めてから Yahoo からのアクセスが激減したような気がします。この点については、Google からのアクセスに変化がなかったので、よもや 503 エラーが YST の SEO と関係しているとは思いもよりませんでした。
4.YST に関する過去の記事
サイドメニュータイトル画像・リストマーク変更
あけましておめでとうございます。本年もどうぞよろしくお願い致します。
すでにお気づきの方もいらっしゃると思いますが、以前からやってみたかったサイドメニュータイトル部分の背景画像を変更しました。具体的には、これまで滑らかなグラデーションをあしらった画像から、濃淡がはっきり分かれたグラデーションの画像になっています(作り方はまた改めて)。またタイトル全体の上下幅をやや広げました。
ナビゲーションバーにも同じ背景画像を使ったところ、タイトルバナーとのバランスがちょっと悪くなったので、いずれどちらかを修正します。
また、左サイドバーの「Introduction」「Recent Entries」に表示されていたリストマークも、黒丸の画像から矢印に変更し、リストにわずかながら幅をもたせました。この画像は stylegala.com:Bullet Madness から拝借致しました。月送りカレンダーの前月・次月のリンクも変更しています(クロスブラウザになっていないかも)。
部分的ながら Web2.0 っぽい雰囲気が出てきた気がします。が、全体的な雰囲気は変わってないので、他も手を加えながらイメージを少しずつ変えていきたいと思います。
はてなブックマークカウンターとブログリンク数カウンターAPI
先日より、サイドバー右下に二つのカウンターを設置しています。すでにご存知の方も多いと思いますがご紹介まで。
はてなブックマークカウンター
「はてなブックマークカウンター」は指定したブログに対する「はてなブックマーク」の全被ブックマーク数をカウンター画像として表示する機能です。
Movable Type の場合は、任意のテンプレートに下記のように設定します。
<a href="http://b.hatena.ne.jp/entrylist?url=<$MTBlogURL$>"><img src="http://b.hatena.ne.jp/bc/<$MTBlogURL$>" class="bcounter" alt="この日記のはてなブックマーク数" title="この日記のはてなブックマーク数"></a>
15色のカラーバリエーションからお好きな色を選ぶことができます。
また今更ですが、ブログでよくみかける、特定の記事に対する被ブックマーク数 を表示する方法は「自分のブログに被ブックマーク数を表示する」で解説されています。
ブログリンク数カウンターAPI
こちらはテクノラティのブログリンク数を表示するカウンターです(現在はテクノラティのみですが、今後は他のサービスにも対応するようです)。
でカウンタ用表示HTMLタグを作成し、生成されたHTMLタグをサイトのお好きな位置に貼り付けるだけです。
なお、当サイトのリンク数カウンタは本日時点で 5725 となっており、本来であればテクノラティの「ブログランキング」に載る勢いですが、テンプレートご利用者に設置頂いているクレジットバナーが多数を占めており、「テンプレート配布サイトは除外させて頂いてます(テクノラティジャパン様談)」ということでした。
CSS再び変更
1ヶ月ほど前に、サイトのCSSおよびHTMLを変更しました(関連記事)が、変更当初より IE6 での閲覧があまり快適でないという懸念事項がありました。特にファイルサイズの大きいページのスクロールがままならないという状態で、再びサイトの CSS を変更致しました。
ネガティブマージンによるレイアウトは(レイアウトの)配布サイトでのサンプルでは問題ないのですが、実際の運用ではファイルサイズに比例してページが重くなるという結果になってしまい、考慮不足でした。これが IE6 のパフォーマンスの問題なのか、あるいは CSS で改善が可能であるかについては、暇をみて検証したいと思います。IE7 では問題なく閲覧できますので、IE7 が浸透した時点でまた改めて戻すかもしれません。
HTMLには手を加えず、CSSのみを変更しました。また今回の変更でカラムレイアウトはリキッドレイアウトから固定レイアウトになります。固定レイアウトはできるだけ避けようと思ったのですが、HTMLの変更を行いたくなかったことと、「ページが重い」という状態を速やかに脱出することを優先しました。
コメント確認・コメントエラーページは手が回っていませんのでリキッドレイアウトのままです。
表示は Windows 2000/XP + IE6/IE7/Firefox2/Opera9 で確認しています。ただし一部のブラウザできちんと表示できていない部分もあります(閲覧に支障はきたさないという判断で見切り発車しました)。
なお、前回のHTML/CSS変更で、本来の目的であった YST の検索結果順位アップについては、結局のところ、4% をうろうろしています。
下は昨日の Google Analytics データです。

- 61.94%:google
- 8.15%:(direct)
- 4.67%:yahoo
- 1.77%:msn
- 1.46%:yujiro.dyndns.org
- 22.00%:(other)
Google からのアクセスがさらに増えました。
サーバ不具合について(その後)
以前エントリーした「サーバ不具合について」で「503エラーが多発しています」とお知らせした、その後の状況です。
長期的な 503 は発生しなくなりましたが、現在も間欠的に発生している模様です。ただし異常なプロセスは発生していないので、サーバを複数ユーザで共有しているというサーバの性能の問題、つまりサーバ移転という選択肢以外に解決できない状況になっているかもしれません。
それとは別に、mt4i からのコメントスパムが発覚し(関連記事)、mt4i のプログラム攻撃の懸念と CGI プログラム削減の意味も含め、現在 mt4i の使用は中止しています。
2006.12.17 追記:mt4i は 2.1(または 2.2β1)にバージョンアップして、スパム対策が施されています。
Movable Type 3.21-ja にアップグレード
3.33-ja が出回っている最中に何ですが、「【重要】 Movable Type 新バージョンとパッチの提供について」を受けてアップグレードしました(といってもすでに1週間ほど経ちますが)。
3.2-ja-2 から 3.21-ja へのアップグレード方法は次の通りです。
- 先の記事にリンクされている「Movable Type 3.2用パッチファイル(MT3.21-ja-patch.zip または MT3.21-ja-patch.tar.gz)」を入手
- パッチファイルを解凍
- 解凍し、MT3.21-ja-patch フォルダの中にあるファイルを、サーバの同じディレクトリにアップロード(上書き)
上書きするファイルは下記です。
- lib/MT.pm
- lib/MT/App.pm
- lib/MT/Sanitize.pm
- lib/MT/App/CMS.pm
- php/mt.php
- php/lib/sanitize_lib.php
パッチを適用するとバージョンが 3.21-ja と表示されます。また掲載は避けますが、新旧のファイルを比較したところ10行程度の修正が行われていました。
3.33-ja へのアップグレードについては、エントリー・タグ周辺の変更をどうするか考えてからトライする予定です。
CSS変更
昨日よりサイトの CSS を変更しました。
「YST(Yahoo! Search Technology)との戦い:その2」から Yahoo 検索からのアクセスが若干改善されたかのように思われましたが、相変わらず 4% 前後をうろうろしている状態です。
下は昨日の Google Analytics データです。

- 57.86%:google
- 9.12%:(direct)
- 3.99%:yahoo
- 1.99%:msn
- 1.65%:yujiro.dyndns.org
- 25.39%:(other)
ということで根本的な解消に至らないため、新たな策としてCSS変更を行いました。その理由は次の通りです。
変更前のHTML
変更前の3カラムリキッドレイアウトのHTMLページは、左のスクリーンショットで示す通り、「左カラム→右カラム→中央カラム」の順にレンダリング(描画)されます。つまり、HTMLマークアップ上、本文記事が一番下になってしまっています。
で、SEO関係の書籍によると、「YST はキーワードが body 要素から近いところにあった方が良い」ということが書かれてまして、今までのマークアップではサイドバーに流し込まれたリンク類の情報が優先されることになってしまい、SEO的に良くない構造ということになります。
今回の変更にあたっては固定レイアウトも選択肢にいれていたのですが、先日の「ウェブサイトの横幅について」をエントリーした後、
- 固定レイアウトは、ポータルサイトのトップページ等でレイアウトを崩したくない場合によく使われている
- 固定レイアウトは、SVGA を考慮してやや狭い幅にしているものが多い
- 大きなディスプレイを使っていてもブラウザの幅とは無関係
という傾向や見解もあることが分かり、リキッドレイアウトのまま中央カラムの情報をHTMLの先頭に移動してみることにしました。
変更後のHTML
参考にさせて頂いたCSSは、Strictly CSS:The only CSS layout you need(?) のひとつで、ネガティブマージンを利用したリキッドタイプの3カラムです。見た目はほぼ変わりませんが、HTMLマークアップは中央カラムが先頭にあり、ページはスクリーンショットのように「中央カラム→左カラム→右カラム」の順にレンダリングされます。
エレガントと言うにはかなり遠いCSSになってしまっていますが、HTMLの配置順序を優先するために見切り発車しています。
Windows2000/XP+IE6.0/Firefox1.5/Opera9.0 と browsershots.org を利用して、Max OS X+Safari 2.0 で大きく崩れていないところまでは確認済ですが、場合によっては固定レイアウトに変更する可能性もあります。
なお、ファイルサイズの大きなページでは、IEでややねばっこいスクロールになってしまうようです。また、中央カラム右寄りのテキストのマウスコピーで文字が反転しない事象が発生しています(配布元のサンプルは発生しないので継続調査)。
Mozilla系ブラウザは快適です。
StyleCatcher リポジトリ復旧のお知らせ
サーバ移転後、旧サーバで稼動していた機能がいくつかデッドリンクになってまして、その中で StyleCatcher 用のリポジトリについてご指摘頂いておりました。が年末のことで、実家に持ち帰ったノートPCにデータがなかったため保留になっておりました。
先ほど自宅に帰宅し、早々に新サーバ側へデータを転送致しまして、動作も確認致しました。ご迷惑おかけ致しましたことお詫び申し上げます。
StyleCathcer は、誤解を恐れずに申しあげれば、テンプレートのデザインを一発で切り替えるためのプラグインです。プラグイン設定方法と当サイトで公開しているリポジトリ(「貯蔵庫」「倉庫」といった意味)が下記にありますので、テンプレートをデフォルトでご利用の方はお試しください。
他にデッドリンクがありましたら、適宜ご連絡頂けると幸いです。
自宅サーバからレンタルサーバへの移転メモ
表示上の不具合がいくつか残っていますが、とりあえず移転できました。自宅サーバの方は他で稼動しているサイトがあるので、このまま引き続き利用します。
新サーバは、評判が良いと思われる「さくらインターネット」です。プランは「スタンダードプラン(ディスク容量1GB)」です。かなりのエントリーや画像をジャブジャブ使っている割にはまだ200MBに満たないので、しばらくはこのプランでもちこたえられそうです。
なお今回の移転にあたっては、さくらインターネットのマニュアルにも載っているのですが、下記のエントリーも参考にさせて頂きました。ありがとうございました。
以下、自宅サーバからレンタルサーバへの移転手順を時系列で記します。
1.新サーバの事前準備
| 1 | Movable Type 3.2-ja-2パッケージのアップロード。 | |
| 2 | mt-config.cgi 設定 | CGIPath 契約時のドメイン(http://xxx.sakura.ne.jp/~/)を mt-config.cgi の CGIPath に設定してインストール実施。これは本格利用の前の動作確認のためですが、後でサイトパスを変更すればそのまま利用できます。 |
データベース(MySQL)
| ||
ファイル・ディレクトリのパーミッション
| ||
| 3 | スキーマ変更 | schemas 配下の mysql.dump にある エントリーとテンプレートの本文のサイズを拡張。デフォルトのサイズではテンプレートのソースを掲載した記事が途中で途切れてしまうためです(この問題は BerkeleyDB から MySQL に移行した時に発覚しました)。 |
| 4 | インストール実施 | |
| 5 | デフォルトテンプレートでの動作確認 | |
| 6 | テンプレート変更 | Movable Type の新旧管理画面を二つ開いて、現サーバからテンプレートを新サーバ側へコピー&ペーストしました。その前に MySQL のバックアップを読み込ませたのですがエラーになってしまったため仕方なくこの手順で行いました。 |
| 7 | プラグイン・画像類のアップロード | |
| 8 | 変更したテンプレート類の表示を確認して、新サーバ側 Movable Type の事前設定は完了 | |
| 9 | 新サーバ側にドメイン追加 | 現在のドメインは他社で取得したものなので、これをさくらインターネットで使えるように設定します。[会員メニュー]-[ご利用中サービスの一覧]-[サーバ設定]-[ドメイン設定]で開いたダイアログから「他社で取得、または他社で管理中のドメインを移して使う」の一番下にある
|
2.現サーバ
| 1 | mt-comments.cgi/mt-tb.cgi の停止 | エントリーのバックアップを取得してから新サーバへインポートして公開するまでの間はコメント・トラックバックの差分が出ないように上記2ファイルの名前を変更して受付を停止しました。 |
| 2 | エントリーの読み出し | 3.1x以前はバックアップデータがブラウザに表示されていましたが、3.2からは右クリックしてもファイルとして保存されるようになっています。 |
| 3 | 「サーバ移転のお知らせ」を追加 | |
3.新サーバ
| 1 | バックアップのアップロード | importディレクトリ作成して、先ほど取得したバックアップデータのアップロード |
| 2 | エントリーの書き込み | 自宅サーバではもの凄い勢い(表示されている字が読めないくらい)でしたが、今回はかなりゆっくりで、「500エラーになるのではないか」と心配するくらい時間がかかりました。 |
| 3 | サイトパスの変更 | 管理画面よりブログのサイトパスを http://www.koikikukan.com/ に、アーカイブパスを http://www.koikikukan.com/archives に変更して全て再構築。エントリー・アーカイブはかなり時間がかかりました(40エントリーで数分)が500エラーにはなりませんでした。 これで現在のドメインで全て再構築されましたが実際にはトップページのみ登録時のドメインで表示を確認して、他のアーカイブページへのリンクは現サイトにジャンプしてしまう状態なので未確認でした(直接URL指定すれば参照できますが)。 |
4.ドメイン取得会社
| 1 | ネームサーバ設定 | 先ほどのネームサーバの設定を行います。取得したドメイン(koikikukan.com)を、さくらインターネットのネームサーバに登録するよう設定します。 |
| 2 | ダイナミックDNSの無効化 | 私の場合、自宅サーバからレンタルサーバへの移転のため、ネームサーバはそもそも設定されていませんでした。理由は、ネームサーバはIPアドレスが固定でないと有効でないのですが、自宅サーバのIPアドレスは動的に割り当てられるため、「ダイナミックDNS」という設定を行っていました。で、このダイナミックDNSの設定を無効にします。ちなみにこのダイナミックDNSサーバに対し、PCにインストールされた Dice というツールが、自PCのIPアドレスが変化する度に通知するという仕組みになっている訳です。 ということで、ネームサーバ設定とダイナミックDNS設定を無効にする切り替えのタイミングが不明でしたが、とりあえずほぼ同時に行いました。後はネームサーバの設定が有効になれば自動的に新サーバ側が表示されます。 |
5.新サーバ
| 1 | mt-config.cgi 修正 | このファイルにある CGIPath を正規のURLに変更します。これで管理画面のログインが正規のURLで行えるようになります。また Typekey の設定も有効になるはずなのですが、私のテンプレートは3.1xのものでしたので現在Typekeyコメントができない状態になっています。 |
6.PCの hosts 変更
C:\WINDOWS\system32\drivers\etc\hosts ファイルに設定していた
192.168.0.xx www.koikikukan.com
という設定を削除します。これはPCでDNS解決させてアクセスするための技です。
7.数々の失敗
次回移転時の備忘録として記しておきます。
- ダウンロード用スクリプト・プラグインのアップロードもれ
- sb/Serene Bach のテンプレートのアップロードもれ
- スタイルシート生成ツールのアップロードもれ
- StyleCatcher用リポジトリのアップロードもれ
- インデックステンプレート類のリンク切れ(インデックステンプレートはひとまとめに再構築したのですが、再構築オプションにチェックのついていないテンプレートの再構築を忘れていました)
- さらにナビゲーションバーのモジュール化(再構築後にディレクトリを変更したためナビゲーションバーが表示されない状態になっていました)
- JavaScript にもバグがあったため(既存)、併せて修正
2005.01.06 追記
7項を修正しました。
Movable Type 3.2-ja-2 へアップグレード
すでにお気づきの方もいらっしゃると思いますが、昨日 3.171-ja から 3.2-ja-2 にようやくアップグレードしました。以下、アップグレード時のメモです。手順は Windows 自宅サーバのものですので予めご了承ください。
- mt-comments.cgi、mt-tb.cgi のファイル名変更(コメント・トラックバック抑止のため)
- エントリーのバックアップ
- 念のため phpMyAdmin を利用して MySQL のデータもバックアップ
- cgi-bin 配下のファイルを丸ごとコピーしてバックアップ(盛り込んでいるパッチ類を新ファイルに適用させるため)
- 3.2-ja-2 のパッケージを解凍し、search_template 以外のすべてのディレクトリ・ファイルを上書き
- 3.2-ja-2 の mt-comments.cgi、mt-tb.cgi のファイル名変更(コメント・トラックバック抑止のため)
- mt-config.cgi-config の内容を修正してファイル名を mt-config.cgi に変更
- mt-check.cgi 実行→OK
- mt.cgi 実行→自動認識によりアップグレード開始画面へ遷移
- アップグレード実施→OK(緊張しました…)
- クレジットバナーの再構築(モジュール化しているため個別に再構築)→「3.2-ja-2」が表示
- 全てのアーカイブを試しに再構築→OKでしたが Util.pm の修正を忘れており、記事のリスト類の改行が欠落してしまったため、再度再構築
また、アップグレードを実行した後、MySQLのデータサイズを変更するのを忘れていたことに気がつきましたが、問題ありませんでした。
「カスタマイズについて」のページ更新
ナビゲーションバーにある「Customize(カスタマイズについて)」のページに、カスタマイズ記事へのリンクを掲載しました。
これまでは、人気のあるカスタマイズの紹介と検索方法の説明に留めるという手抜きな内容でしたが、初心者等の慣れない方への配慮と、過去の記事で役に立つと思われるものをこのまま埋もらせてしまうのも何なので、恒常的に使用可能と思われるカスタマイズを抜き出して列挙してみました(下記)。
![]() |
3.1x の記事が多く残っているので、サンプルリストのタグ等については 3.2 と若干相違があるかも知れません。予めご了承ください。
また掲載しているカスタマイズの適用範囲について「MT(Movable Type)「SB(Serene Bach」「その他」に分けて○×もつけてみようと思います。とりあえず欄だけは作りましたのでこれから少しずつ加えていきたいと思います。
「はじめての方へ」のページ追加
「ブログがどういうものかよく分からない」という方のために以前からこういうページを作りたかったのですが、時期を逸しておりました。新しくサイトを訪れる方の一助になれば幸いです。 |
エントリーを XHTML 1.0 Transitional に修正
W3C:Markup Validation Service で XHTML 1.0 Transitional に従っていなかったエントリーのHTMLを修正しました。ブログを始めてから valid なエントリーを書き始めるまで、約1年分という膨大な量のエントリーを見直すという作業で、先月のリニューアルから Another HTML-lint gateway を使って少しずつ進めておりましたが、ようやく完了しました(多分)。
修正した主な内容は以下の通りです。
- & を & に修正
- 終了タグの追加(主に<li> に対する </li>)
- img 要素を "/" で閉じる
- img 要素の "/" の前に空白を挿入
- 属性の省略書式(readonly → readonly="readonly")
- 不明な実体参照の修正(テンプレートで使われている &id 等)
- img 要素に alt 属性を追加
- table 要素に summary 属性を追加
- ブロック要素の入れ子や重なりを修正
なお、nobr 要素、wbr 要素をサンプルとして用いているエントリーについては valid になっておりませんので、別途ページを分ける等の対策を行いたいと思います。
併せて、記述に不備があるエントリーについて一部修正しました。
HTMLの修正は、斜め読みながら過去の記事を読み返す行為でもあり、「そういえばこういうエントリーもあったな」と感慨に耽る場面も多々ありました。
XHTML 1.0 Transitional バナーを表示
The W3C Markup Validation Serviceが配布している「XHTML 1.0 Transitional」であることを示すバナーを右下に表示しました。valid であることを確認できているのは今のところトップページのみですので予めご了承ください。
先日買った Designing with Web Standards をようやく読破しまして、ウェブスタンダードなサイトを作ることの重要性を改めて認識致しました(CSSはハックを利用しているので valid ではありませんが)。ウェブスタンダードのスキルがほとんどない状態から1年余りでそれなりに身につけられたのはラッキーだったと思います。
ダジャレMovable Type のテンプレートやカスタマイズを中心に運営しているサイトですので、今後はできるだけウェブスタンダードに準拠する内容にできればと考えています。またこれまでに公開してきたエントリーでウェブスタンダードに準拠していない(またはそうであることを示唆していない)内容については適宜訂正していきたいと思います。
なお BlogPeople の List Me!! が Validation Service にひっかかっていたのですが、カスタマイズによってクリアできました。これについては追ってエントリーしたいと思います。
BlogPeopleの被リンク数を減らさずにURLを変更する
本日、BlogPeopleのURLを変更しました。こちらで変更する前にURLを手動で変更くださっていたサイトさんがかなり増えてきたのを発見して(ありがとうございます)、あわてて変えました。
さて、BlogPeopleのURLは、メニューにある「サイト情報の設定/変更」で簡単に変更できるのですが、これを行うとこれまでの被リンク情報が消滅してしまいます。被リンク数を維持したままURLを変更するには、メニューの「各種申請」をクリックした次のページにある「サイトURLの変更・追加申請」から申請します。
参考サイトは以下です。ありがとうございました。
昨晩申請して、本日の午前中には作業完了のメールを頂きました。この作業は人手を介して行われているようですが、迅速に対応くださりありがとうございます。
あとは重複リンクを整理したいところです(600より下回らない程度に)。
BlogPeople表示しました
リンクのページに移動した BlogPeople のリンクリストを各ページに表示するようにしました。巷で有名な中継君を使っていますが、手を加えてもう少し軽く表示するようにしています。
なおリストの更新は正常にできていない状態ですので、予めご容赦ください(リンクのページのリンクリストは適正に更新されます)。MyBlogListも可能であれば追って追加します。
サイトリニューアル
- 3カラムスタイルはこれまで通りですが、絶対値指定ではなく float 指定によって可変3カラムを実現しています(IEでは幅を狭くし過ぎると中央のカラムがおちることがありますのでご注意ください)。また左右にマージンをつけ、下部にフッタを与えてコンテンツ全体を括るようにしてみました。随分前からこのスタイルにしてみたかったのですが、スキル不足でできませんでした。そういう意味では目標達成というところです。
- 中央カラムのコンテンツを折りたためるようにしました。タイトルまたは概要後方にあるリンクをクリックすることで切り替えられます。折りたたみ状態も保持します。また折りたたみによって過度なスクロールを避けられるので、カテゴリーアーカイブと月別アーカイブはページ分割をなくしてみました。メインページは逆にページ分割を導入して1ページ毎の件数を減らしてスクロール量をさらに絞ってみました。
なおこの機能はIEのみで、Mozzila系は不具合(またはスキル不足)のため折りたたみできない設定にしています(詳細は別途エントリーします)。 - ページ内の空白を増やしたので左右のサイドバーを折りたためるようにして、コンテンツの情報量を確保できるようにしました。ナビゲーションバーの「«」「»」で切り替わります。これにより3カラムおよび仮想的な2カラム/1カラムを実現しています。状態も保持します。
本当は折りたたんだ場合に反対のカラムへメニューを表示する予定でしたがIE系のブラウザで正常に動作しないことと、ページを切り替えた際に状態を保持する実装が面倒なため、とりあえず隠すだけにしました。 - タイトルバナー下にナビゲーションバーを追加しました。ナビゲーションからのジャンプ時はロールオーバー状態を保持してユーザビリティを向上させています。右サイドバーの「menu」をクリックすると折りたたむこともできます(お遊びレベル)。
- 各アーカイブページにパンくずリスト(らしきもの)を追加して現在位置を把握できるようにしました。
- スタイルシート切り替えにより公開テンプレートのデザインを表示できるようにしています。右サイドバーの「Stylesheets」の "Original" で選択できます。
- トップページは XHTML1.0 valid にしました。
ただしコメントやトラックバックについてはスコープ外ですのでご容赦ください。また過去のエントリーは文法違反のコンテンツが満載なため、これからボチボチ修正していきます。 - BlogPeople/MyBlogList等のリンクは独立したページに移動しました。これは float による3カラムの場合、中央カラムを最後に表示しなければならないため、リンクリストの影響で中央カラムの表示を遅延させないための考慮です。2005.07.23 追記:中継君を使って表示しています。
リンク誤りがありましたらお知らせください。それでは今後ともどうぞよろしくお願い致します。
追記:
リニューアル中に不具合があり、コメント・トラックバック受信を一時停止していました。7/19 2:10頃回復しています。
2005.07.19 追記
不具合の対処後、文法エラーが多発していましたので修正しました。またトップページは valid XML1.0 になりましたので記述の一部を削除しました。
ドメイン取得
本サイトのドメインはDynDNSを利用させて頂いておりますが、このたび独自ドメインを取得致しました。新しいドメインは
- www.koikikukan.com
です。これまでのドメインからもアクセスできます(Apacheの設定でとりあえず同じパスを参照するようにしています)。
先日のExpireされた件とは全く関係ありません。
テンプレートのバナーを設置
サイドバーに2/3カラムテンプレートのページへジャンプするバナー(というには大きいですが)を設置しました。今のところ個別エントリーアーカイブの右上に表示しています。
最近のトラックバックを拝見させていただくと、カスタマイズで当サイトを訪れて下さる方が多くなってきたようで、大変嬉しく存じます。で、訪問された際にダジャレテンプレートも積極的に紹介させて頂こう、というのが設置した目的です。またカスタマイズ記事で公開テンプレートのタグを出現させている割合が少なくないので、タグの構成が不明な場合にテンプレートのページへ速やかにジャンプできる配慮、という意味も含んでいます。
以前よりページ右下にテンプレートのテキストリンクは貼ってありますが分かりにくいので、もう少しアピールしてみようかと。
2005某日 追記
現在は外しています。
サイトリニューアル(MySQL化)
デザインのリニューアルではありませんが、Movable Type 3.151-ja 新規インストール + MySQL という大幅な改修を行いました。これによりコメント・トラックバックのレスポンスが相当速くなると思います(多分)。
一部旧環境からの修正が完了しておりませんが、とりあえず開始します。
リンクのアンダーライン全部削除
![]() 以前、本文・投稿者欄・カレンダーのリンクのアンダーライン常時表示をやめた経緯があります。その時、全ての表示をやめてみたところ自分のサイトでなくなってしまったので、サイドメニューは残すことにしました。 で最近かなり見慣れてきました(+他サイトのアンダーラインなし表示に見慣れてきた)ので、今回サイドメニューのアンダーラインについても全部外してみることにしました。アンダーライン(および色変更)はマウスをのせた時のみ表示します。デザイン的にはアンダーライン表示または色変更のいずれか一方でもよいのかもしれませんが、一応これでいきます。 賢明な読者の皆様はお気づきと思われますが、このサイトのリンクや文字・線等は、ほとんど Movable Type のデフォルトテンプレートや管理画面で使われている配色をそのまま使っています。 余談でした。 |
カテゴリーをちょっと変更
今まで Movable Type 関係のエントリーは使用しているバージョンで記事を一律振り分けていましたが、この方法では訪問くださる方にはかなり分かりにくいことを薄々感じてました。私も分からなくなってきました(笑)。
バージョン自体に関する記事は該当のエントリーで構わないとしても、例えば折りたたみについては改善の途中でアップグレードがあり、結果的に異なるカテゴリーに含まれてしまっています。テンプレートも同様で、テンプレートの記事がバージョンカテゴリーに埋もれてしまっているので探しにくいです。
そういう訳で手始めにテンプレート関係のエントリーを分けました。カスタマイズも内容別に徐々に振り分けていきます。カテゴリー名も「Movable Type」の文言を省いてバージョンのみの表示にしていますがサブカテゴリー化に向けた修正過渡期ということで。
カテゴリーのメニューリストは直接そのアーカイブページを参照する・しないとは別に、どのような記事が掲載されているかが分かる重要なファクターのひとつであると思っています。将来的にはサブカテゴリー化を含め、少なくとも Movable Type 関連のカテゴリーが一目瞭然になるような体系にしたいと思います。
トラックバック連続投稿を受け付けないタイミングを設定しました
トラックバックの連続投稿を受け付けないの設定を本日より実施しています。
同一サイト(IP)からのトラックバックは10分間受け付けない設定にしています。また同一サイトからのコメントは60秒に設定しています。ちなみにトラックバック pingの重複を受け付けない場合のエントリー登録は正常終了するように見えます。
とりあえずこれで様子を見たいと思います。
#ただいま3.11-jaテンプレート実験中です。頂いているコメントの返事遅くなりますがお許しください。
テンプレートご利用者一覧を掲載
我楽さんよりご提案頂きまして、BlogRollingを利用した表題のリストを「このサイトについて」の右サイドバーに掲載致しました。
リストに掲載させて頂いているサイトは、
- コメント・トラックバック等でご連絡・ご質問を頂いた方(サイトURLが既知)
- logPeople等のリンクリストから当サイトを登録くださっている方
- 他のテンプレートに変更されていない(と思われる)方
と致しました。換言すると、BlogPeople・MyBlogListからの抜粋です。チェックしたつもりですが不足がございましたらお知らせください。リストは随時更新していきたいと思います。
テンプレートを公開してから約3ヶ月が経ちまして、大変多くの方にご利用頂き非常に嬉しく思っています(こんなに使って頂けるとは予想もしていませんでした)。まだまだ未熟者ですが今後ともどうぞよろしくお願い致します。
それからこのテンプレートの原型である「すちゃらかCSS」さんにもこの場をお借りして感謝の意を表します。この方の3カラムテンプレートがなければ今のテンプレートはなかったと思います。
MyBlogList追加
これまでのリンクは全てBlogPeople上に登録していたのですが、何サイトかMyBlogListで登録下さっている方もいらっしゃるのでMyBlogListにも登録してメニューを追加、BlogPeopleと分割しました。
重複しているサイトもありますがとりあえずそのまま(自分でどちらを削除すれば良いか決められないので…)。またどちらにも属していないサイトは引き続きBlogPeople上で。
リンクリスト追加(その2)
BlogPeopleの「ガチャガチャブログ(ランダムに新着サイトを表示してくれる機能)」を使って見つけたblogサイトからリンクリストにいくつか追加させて頂きました。
お暇な方はここに表示されているバナーと同じものが右下にありますので、それをクリックしてください。相当数のblogが登録されているはずなのに同じサイトが2回表示される時もありますので「新着サイト」というのはかなり際どい時間分しかピックアップしていないのかもしれません。
リンクリスト追加
MT4iでお世話になっているTonkeyさんのサイトからリンク頂きましたのでこちらからもリンク致しました。って、こうやってひとつひとつ紹介しない方が一般的なんでしょうか?でも折角先にリンクしてもらったので感謝の意を込めて。
普通のWebサイトでリンクを設定する時は、いつも相手の方に「リンク設定してよろしいでしょうか?」というメールを出して返事を頂いてから生HTMLを書いて追加…ということを繰り返してましたが、blogの世界は暗黙のリンクフリー状態のようです。しかもBlogPeople会員同士であればワンクリックで自サイトに追加できるという便利な機能まであり、今までの「リンクを設定する」という振る舞いに対する概念が覆されます。
また、リンクが増えてくると自分のサイトが外界と接点を持っているという実感が沸いてきますね(だからどうしたって感じですが)。



