先日、MT4.2から最新のMT5.1へとバージョンアップを試みたときの話です。

別サイトとして運営している「米子いんふぉねっと」はMovable Type version 4.23-ja（MTOS）にて
動作しています。
オープンから３年半が過ぎ投稿数は１２００件を超え投稿時にエラーが出ることが多くなりました。
原因は安い共用サーバーで運営しているためでもあるのですがIE9標準モードでは入力できない不具合も
あるためMTOS-5.14-jaへバージョンアップすることに決めました。

普通なら上書きすれば自動的にデータベースがアップデートされ、しばらく待つと最新環境へと変わる
はずなのですが、再構築すらエラーとなる膨れ上がったデータを前にアップデートは行われず停止。
仕方なくバックアップしておいた4.23-jaを書き戻してMTのバックアップ機能を利用するも出力が行われ
無いまま停止。
最後の手段としてテンプレート情報の入った旧バックアップデータとエクスポート情報を元に
仮フォルダーで動作させたMTOS-5.14-jaに情報を送り込みコピーサイトを作りました。

ココまでは無事に完了。

ところが最新MTOS-5.14-jaは重かった。
ブログ記事アーカイブどころか、カテゴリアーカイブの構築も Internal Server Error で停止。
プラグインで通信タイミングを遅らせても効果ありません。
MySQLから不要なデータを消して軽くするも効果無し。
ただ、大量のデータをPageButeで区切っていることが原因なのは判っています。
ブログの表示数を10・20・40・・と増やしつつ確認していくと80件ならカテゴリアーカイブの構築可能
100件ではInternal Server Errorとなることが判りました。

結果的にはこの段階で諦めました。
新しくなった分、効率的に動作して構築時のエラーが減ることに期待したのですが機能盛りだくさんの
バージョン５シリーズは動作も重かったと言うことで・・。

ちなみに共有するMySQLデータを消して軽くなったためかMTOS4.23-jaの構築エラーは少なくなりました。
件数的にもそろそろ限界なのは判っていますけど、なかなかサーバー移転の予算は取れず後１年くらいは
安い共用レンタルサーバで乗り切る予定です。

最後にカスタマイズしたfc2用スマートフォン専用テンプレート custom_pmblack  です。
＊画像をクリックするとＰＣ用ブラウザにて仮想的にスマートフォン用ページが開きます。

特徴としてはjQuery ライブラリを利用したほか、横フリックに対応する jQueryプラグイン
jQuery.flickSimple http://d.hatena.ne.jp/makog/20110526/1306428975 を利用させて頂きました。
本来ならばjQuery Mobileにてスマートフォン専用テンプレートを作成すべきですが
fc2の広告表示に利用されているライブラリとの相性が悪くて誤動作することと
他にjQuery Mobileを利用されている方がいらっしゃいましたので別アプローチとして
jQueryプラグインを利用しました。
jQuery Mobileを利用すると似たようなカスタマイズになってしまいますから・・。

ただ、まあ・・このテンプレートは可愛げもなく地味すぎたのか６種の中では一番不人気でした。
それに重い処理をしているため快適さはいまひとつ。
私としても実験的な意味合いのテンプレートと考えています。
ブログの場合は記事が増え、カテゴリが増え・・と次々と項目が増加して処理の重さに繋がりますが、ショッピングサイトの商品紹介や企業ホームページなどページ数がある程度限られた用途では使い方次第でおもしろい表現ができるのではないかと思います。

・・コンテスト中なので直接的なリンク等は行いませんでした。

fc2でテンプレートコンテストが開催されているので空き時間にカスタマイズしてみたものの、評判はいまひとつ・・万人受けのカスタマイズはなかなか難しいものだと実感しています。
基本デザインは最初に作った上段の左端を利用し、下段へと拡張させました。
スマートフォン＝アイコンの様な安易な発想も敗因の一つかもしれませんが、凝った作りではなくシンプルでも好感が持てるようなデザインが好まれている感じです。
時間はまだあるので何か新しい発想が生まれたときには再チャレンジしたいと思っています。

半分は新しく作られたFC2のスマートフォン専用テンプレートの仕様を覚えるためカスタマイズしているようなものなので何かと試してみるの仕方ないとしても途中で手を抜いてしまうのは悪い癖です・・背景画像の選定は手を抜き過ぎだと反省。
素直な気持ちで楽しみながらカスタマイズしないと選んでくれないのは判っているのですが・・。

Platinum color サイトのテンプレートは、無料配布中の「WHITE CUSTOM Mk2」テーマをカスタマイズしたものです。
エントリータイトルの背景画像を、ほぼそのまま利用しているため気づかれた方も多いでしょう。
以前のＨＰではWordPress用「wp.Vicuna Ext」を利用させて頂いていましたが
ビジネス調の少し堅い雰囲気のデザインになっていたため気分を新たにリニューアルしてみました。

「WHITE CUSTOM Mk2」と、Platinum color 新ホームページテンプレートの大きな違いは２カ所です。
・ヘッダー画像をブラウザ横幅全体に表示すること。
・ページをセンタリングせず、left配置（左寄せ）すること。

その他にもβ・γカラムの表示位置をずらしていたり、ヘッダー部分にメニュー表示されていたりしますが
これらは微調整の範囲でしょう。

一番の違いはページの横幅全体にヘッダー領域が表示されていることでカスタマイズポイントは単純そのもの。
WHITE CUSTOM Mk2テンプレートではページ内部に定義しているヘッダー領域の要素を
ページ外部に記述するだけでサイトのイメージが大きく変わります。

具体的にはWHITE CUSTOM Mk2テンプレートのheader.phpでは下記のようになっています。
※以後、半角「＜,＞」は誤動作の原因となるため全て全角「＜,＞」で表します。
　　・
　　・
＜/head＞
＜body＞
＜div id=”page”＞
＜div id=”header”＞
＜div id=”headerimg”＞
　　・
　　・

「body」の始まりのあとすぐにページの定義である「page」が呼び出されヘッダー部分の「header」と
ヘッダー画像等が格納される「headerimg」が呼び出されています。

しかし、Platinum color サイトのテンプレートでは下記のようにカスタマイズ。
　　・
　　・
＜body＞
＜div id=”header”＞
＜div id=”headerimg”＞
＜/div＞
＜/div＞
　　・
　　・
＜div id=”page”＞
　　・
　　・

「header」関連の処理が終わったあとにページ全体（α・β・γのカラムとフッター）を格納する「page」が
呼び出されて表示を行います。

つまり、ヘッダー関連は上部で自由に表示させ、本来のサイト表示である「page」を規律正しくまとめて表示
させることが「WHITE CUSTOM Mk2」から「Platinum color サイト」新ホームページへとカスタマイズする
際の要点と言うことになります。

残るはカスタマイズポイントはleft配置です。
こちらは単純とは言えず幾つか修正部分がありますが、要点はページをヘッダー画像に重なるように配置させること。

ます、WHITE CUSTOM Mk2テンプレートの「style.css」では下記のようになっています。
※以後、直接関係ないタグは未記載

#page {
margin: 10px auto;
}

上下に10ピクセル分の余白を取って左右は自動的に配置。

そして、Platinum color サイトでは下記のようにカスタマイズされています。

#page {
margin: -340px auto 0px 0px;
float:left;
}
ヘッダーの背景画像と重ねて表示させるため上に、マージン設定で340ピクセル分表示下垂し位置を上げ
右の余白は自動配置、左の余白はゼロとしています。
IE7・8及びFirefox、Google Chrome等ではマージン設定のみで左寄せ配置が行えました。
しかし、IE6ではセンタリングされたままになります。
そこで「float:left」を行って強制的に左配置置にしています。

以上が主なカスタマイズポイントです。

その他の修正点としては右上のLED点滅表示（headerled）を消したり、β・γカラムの背景画像定義を
消すことでしょうか。

細かな部分ではいろいろ修正を行っていますが要点は以上のようになります。

無料ブログやMovableType・WordPressのカスタマイズではスタイルシート（CSS）の変更・調整が主な作業であり、センスの見せ所です。

しかし、カスタマイズを初めて行う方や、熟れない方は、スタイルシートのどこをどう弄れば良いのか、目的とする部分がどこに書かれているのか・・何もかもが全く判らない謎のアルファベットの集合体がスタイルシートの印象です。

DIVなどで定義される要素は名前を付けて指定範囲を認識しているわけですが
「/* 注釈*/」はあるにせよ、熟れていないとスタイルシート上のどの名前が表示と対応しているのか判別できません。

通常は、ブラウザで表示させるソースを見てDIV要素の名前を把握し、スタイルシートの該当部分を変更します。
ところが、初心者の方はHTMLソース上から定義されたDIV部分を探すこともままならない状況・・。
そんなときに紹介していたのが以下で解説する２つの方法です。

・手間が掛からなくて簡単な方法は「Google Chorme」を利用する方法です。
Google Chormeは、Google社のタブブラウザでシンプルさと軽さで人気です。
しかし、使いやすさだけでなく、右クリックメニューにある「要素の検証」がGoogle Chormeの特徴でありスタイルシートカスタマイズの強力な味方とになってくれます。

カスタマイズを行いたいサイトを表示させ右クリックメニューを開き「要素の検証」を表示させて
みてください。
<div id=･･>タグで定義されたコンテナがブロックごとに表示され、右向き▲をクリックする毎に
より深いレベルのブロックを表示しつつも、Chormeブラウザ上に半透明のカラーで色づけされたdivの定期範囲を示してくれます。

つまり、Google Chormeのカラーブロック表示と要素検証を利用すればもっとも下位で定義された<div id=･･>タグが視覚的に発見できますし、要素の検証にはスタイルシートに記述された値も表示されます。＊複数のcssがある場合は、どのURLにあるcssかのかも判ります。

また、Google Chormeは「margin」で定義された透明な範囲であってもカラーブロックで視覚的に把握できるため２カラム・３カラムの調整には大いに役立つツールです。

・原始的な方法ですが画面をキャプチャして色から探す方法は初心者でも簡単です。
ブラウザでカスタマイズしたいサイトを表示させ、「Ctrl+PlintScreen」キーを押し
画像レタッチツールに貼り付けて、該当部分の色を取得したのちスタイルシートで
色の値を検索してみたください。

ちょっとした色変更にしか使えない技かもしれませんが、１ドットの枠を描かせる値はどこなのか調べたり、ソースを見たりGoogle Chormeを起動するのも面倒なときには、かなり役立つ技です。

カスタマイズを行う際はフォトショップ等のレタッチソフトで背景作成と平行して行うことが
多いのですが、色情報をもとにスタイルシートから該当部分を探せば短時間で発見できるため
利用する機会は多いと言えますし、「background」や「border」の指定をまとめて置換する
場合にも多用する技です。

もちろん、同じ色指定を複数定義されていたなら意味のない方法ですが、状況によっては
かなり便利なので覚えておくと良いでしょう。
要素の名前はソースを見て探すのが一番確実ではありますが、「原因不明なとき」面倒なとき」
「なにもかもが訳わからないとき」には、上記の方法を併用すればスタイルシートから目的の
記述を探し出すことができるでしょう。
と言っても・・・結局は慣れなのですが・・。