カスタマイズ小話 « Platinum color 涼優彩色『ブログカスタマイズ・ホームページ作成代行』

‘カスタマイズ小話’ カテゴリーのアーカイブ

カスタマイズ小話「配布中のテンプレートをカスタマイズしてイメージ一新」

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）を消したり、β・γカラムの背景画像定義を
消すことでしょうか。

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

WordPress用無料テンプレートの配布「WHITE CUSTOM Mk2」

WordPressのDefaultテンプレート「WordPress Default」をベースにカスタマイズしたテンプレート（WHITE CUSTOM Mk2）テーマを配布致します。

先に配布を行った「BLACK CUSTOM」「WHITE CUSTOM 」テンプレートは変則的な３カラムのため、汎用３カラムテンプレートとしてWHITE CUSTOM Mk2を制作しました。

WHITE CUSTOM Mk2はガンプラアフィリエイト専用テンプレートとしてカスタマイズを行っていますが、マクロス系やミリタリー系ならば合うのではないでしょうか。

当テンプレートも、個人利用及び商用利用にかかわらず利用制限等はございません。（フリー）

＊再配布のみ不可。

「WHITE CUSTOM Mk2」テンプレートのサンプルサイトリンク

WHITE CUSTOM Mk2テンプレートテーマのダウンロード

まだまだ未完成部分があるとおもいますが、お好みでカスタマイズしてみてください。

インストール方法

１）「whitecustom_mk2.zip」ファイルのダウンロードを行い、書庫のフォルダ内容を復元するように解凍してください。

２）themes内にある「whitecustom_mk2」フォルダーを「wp-contentのthemes」に転送してください。

３）「images」フォルダーはサイトURL直下に転送（サイトパス直下）。

＊alpha が中央のメインカラム、betaが左側カラム、gammaが右カラムとなっています。
＊サイト内容に応じて各ウィジェットに表示項目を登録してください。

WHITE CUSTOM Mk2テンプレートのコンセプトは白ですが、白から灰色のグレー配色を用いたミリタリー調をイメージして作成しています。
「BLACK CUSTOM」「WHITE CUSTOM 」の変則３カラムは汎用性に欠けることもあり、カスタマイズベースになるtwtの３カラムテンプレートを作成するにあたり、趣味も反映させて頂きました。
基本はガンダムフィギュア・プラモの紹介・アフィリエイトサイトをイメージしていますが、ご自身で画像を入れ替えるなら応用範囲も広いと思います。

テーマ内で用いる画像ファイルはすべてテンプレートに付属しています
「whitecustom_mk2」フォルダー内のimagesがテンプレートでしている画像ファイルです。
同名のファイルを作成してimages内に転送を行えばテーマ内で表示する各背景画像が変わります。

また、タイトルロゴも「images」フォルダー内にに入っています（logo.png）。
現在は「CTWM2」のシンプルなロゴなのでお好みに応じて書き換えてください。
＊「無地logo.png」は、文字のないベース用の画像です。

その他、気づいた点がありましたら、そのつど追加・変更していきます。

また、カスタマイズに関するご質問等ございましたらお気軽にご連絡ください。

カスタマイズ小話「スタイルシート（css）のどこをカスタマイズ？」

無料ブログや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」の指定をまとめて置換する
場合にも多用する技です。

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

カスタマイズ小話「MovableTypeとWordPressのカスタマイズ」

しばらく無料テンプレートの配布が続いたので、カスタマイズに関する話題でも・・。

配布用のテンプレートを作成のためMovableTypeのカスタマイズをおこなったわけですが、
あらためて感じたのはWordPressよりもシンプルな分だけ素直であること。
正しくは、ホームページの時代から使ってきたhtml技術の発展系として作られたシステムが故の
使いやすさがMovableTypeにはあります。

ただ、ホームページにしてもブログにしても、カスタマイズ作業のメインはスタイルシート（css）にあるため
MovableTypeがどうで、WordPressはこうだと、意識する必要はありません。
しかし、わずかなれど発生するthml部分の修正（phpを含め）では、自動化されていない
MovableTypeの方が素直な動きだと感じました（正しくは余計な事しない）。

以前、当サイトである「Platinum color 涼優彩色」のw3c対応を行ったのですが
その際もWordPressが勝手に改行を書き換えたり、＜p＞コードを入れたりと
文書部分の調整に苦労をした覚えがあります。
MovableTypeは不必要な加工を勝手に行わない分だけ素直に感じるのでしょう。
ただし、二つの違いはカスタマイズというより編集部分の処理にあるため
使い勝手と好みによる違いです。

少なくとも、テンプレート（テーマ）作成のためのスタイルシート（css）カスタマイズにおいては
苦労も仕上がりも同じでしょうね。

作業工程で考えるとMovableTypeの再構築は煩わしさがあります。
基本的にはcssファイルをftpから転送するだけなので調整するごとに再構築する必要はありませんが
html側のカスタマイズを行ったときには再構築の必要があります。
その点、書き換えたテキストファイルをftpで転送するだけでサイトに反映されるWordPressは
クリックもなければ待ち時間もないためストレスが少ない。
この違いは、作業に追われてストレスが増えたときには大きな差となって現れます。

では、MovableTypeとWordPressは、どちらが好きか、どちらがオススメなのかと聞かれると
答えづらいですね。
使い慣れたMovableTypeは好きなのですが、代行サービスとしてお客様のホームページを作成する
立場で考えると後々のサポートが行いやすいWordPressを選ぶかもしれません。

やはり、MovableTypeとWordPressは、一長一短としか言いようがありませんね。

WordPress用無料テンプレートの配布「WHITE CUSTOM」

WordPressのDefaultテンプレート「WordPress Default」をベースのカスタマイズテーマ「BLACK CUSTOM」を、さらにカスタマイズした白銀のテンプレート（WHITE CUSTOM）テーマを配布致します。

当テンプレートも、個人利用及び商用利用にかかわらず利用制限等はございません。（フリー）
＊再配布のみ不可。

「白銀のテンプレート」サンプルサイトリンク

白銀のテンプレートテーマのダウンロード
白銀のテンプレートも漆黒のテンプレートと同じく、３カラム仕様のウィジェット用サイドバーを左側の２列に配置するテンプレートです。

また、右側にメインコンテンツ配置していますが、最上段はウィジェットに対応していて、状況に応じたコンテンツの入れ替えが可能となっています。

まだまだ未完成部分があるとおもいますが、お好みでカスタマイズしてみてください。

インストール方法
１）zipファイルをダウンロードして、書庫のフォルダ内容を復元するように解凍。
２）「whitecustom」フォルダーを「wp-contentのthemes」に転送してください。
３）「images」フォルダーはサイトURL直下に転送（サイトパス直下）。
４）イメージflashファイルを利用する場合は、「whifla.swf」をURL直下に転送後、
「flash（alpha ウィジェット).txt」の内容でテキストウィジェットを作成してください。
＊alpha が右側のメインカラム、betaが左側カラム、gammaが中央カラムです。
５）betaカラムでリンクメニューを利用する場合は、「メニュー（betaウィジェットテキスト）.txt」を参考にテキストウィジェットを作成してください。
＊サイト内容に応じてリンク先及びメニュー項目を変更してください。

白銀のテンプレート（WHITE CUSTOM）のコンセプトは白であり、キッチンや厨房をイメージして作成しました。
裏のコンセプトを意識するあまり、壁紙のタイル模様に不釣り合いな配色もありますが、白と銀色の清潔感あるデザインなので応用範囲は広いと思います。
また、壁紙タイルの原画でもある「bodyback.psd」も同梱していますので、気になる方は赤・青・黄色のタイルを白に入れ替えると良いでしょう。

また、タイトルロゴは透過GIFにて作成し、サイトURL直下に転送（サイトパス直下）「images」フォルダーにアップロードしてください。
その後、themesのblackcustom内にある「header.php」を書き換えればタイトルが変わります。
＊編集はUTF-8でエンコード

「whifla.swf」」は、alpha ウィジェットカラムの利用サンプルです。
飲食系のホームページ向きのフラッシュにしましたが、本来はアフィリエイトやサイトの紹介画像・広告等を設置します。
＊alpha ウィジェットは、インデックスページ・ページで表示、カテゴリやアーカイブページ等では表示しません。

その他、気づいた点がありましたら、そのつど追加・変更していきます。

また、カスタマイズに関するご質問等ございましたらお気軽にご連絡ください。

WordPress用無料テンプレートの配布「BLACK CUSTOM」

WordPressのDefaultテンプレート「WordPress Default」をベースにカスタマイズした漆黒のテンプレート（BLACK CUSTOM）テーマを配布致します。

当テンプレートも、個人利用及び商用利用にかかわらず利用制限等はございません。（フリー）
＊再配布のみ不可。

「漆黒のテンプレート」サンプルサイトリンク

漆黒のテンプレートテーマのダウンロード
漆黒のテンプレートは、３カラム仕様となっていますが左右のウィジェット用サイドバーを
左側の２列に配置しています。

また、右側にメインコンテンツ配置していますが、最上段はウィジェットに対応していますので
状況に応じたコンテンツの入れ替えが可能です。

まだまだ未完成部分があるとおもいますが、お好みでカスタマイズしてみてください。

インストール方法
１）ダウンロードしたzipファイルは、書庫のフォルダを復元するように解凍してください。
２）「blackcustom」フォルダーは「wp-contentのthemes」に転送。
３）「images」フォルダーはサイトURL直下に転送（サイトパス直下）。
４）イメージflashファイルを利用する場合は、「mihonight.swf」をURL直下に転送後、
「flash（alpha ウィジェット).txt」の内容でテキストウィジェットを作成してください。
＊alpha が右側のメインカラム、betaが左側カラム、gammaが中央カラムです。

漆黒のテンプレート（BLACK CUSTOM）トのコンセプトは黒であり、秘密基地、アジトをイメージしています。
こちらも裏のコンセプトを意識しながら、デザイン性の高いテンプレート（テーマ）にカスタマイズしてみました。
実用性はあまりないかもしれません。
レイアウトはビジネスにも対応できるタイプですが、個性が強すぎますね。
社長ブログのような自分を表現するタイプには良いかもしれません。

「黒」が前提にあってカスタマイズを始めたため、夜のイメージや隠れ家的な表現を
（工事中な気もしますが）多く取り入れています。
「白」がテーマなら全く違ったデザインになります。＊次は白にしましょう。

タイトルロゴは透過GIFにて作成し、サイトURL直下に転送（サイトパス直下）「images」フォルダーに
アップロードしてください。
その後、themesのblackcustom内にある「header.php」を書き換えればタイトルが変わります。
＊編集はUTF-8でエンコード

「mihonight.swf」」は、alpha ウィジェットカラムの利用サンプルとして作成しましたが
本来はアフィリエイトやサイトの紹介画像・広告等を設置します。
＊alpha ウィジェットは、インデックスページ・ページで表示、カテゴリやアーカイブページ等では表示しません。

WordPressのDefaultテンプレートは、不思議で複雑なテンプレートでした。
外観がシンプルなので中身もシンプルな構造を想像していましたが
ある程度理解して２カラムから３カラムに変えるまでに１日も掛かってしまいました。
＊それでもVicuna Extの方が難しいかもしれません。
ただ、一度カスタマイズしてしまえば根本はシンプルなので、さらなるカスタマイズには最適です。
MovableType （MTOS）用のスタイルが続いたのでWordPressのテーマも充実させていきたいと思います。

その他、気づいた点がありましたら、そのつど追加・変更していきます。

また、カスタマイズに関するご質問等ございましたらお気軽にご連絡ください。

MovableTypeOS用無料テンプレートの配布「RED CUSTOM」

MovableType （MTOS）用スタイルテンプレート「BLUE CUSTOM」をさらにカスタマイズした紅色特製型板（RED CUSTOM）テンプレートを配布致します。

当テンプレートも、個人利用及び商用利用にかかわらず利用制限等はございません。（フリー）
＊再配布のみ不可。

「紅色特製型板」サンプルサイトリンク

http://platinumcolor.net/mtos/redcustom/redcustom.zip
紅色特製型板テンプレートは、BLUE CUSTOMのトップ３カラムに対してTW の２カラムです。
領域の広さを生かした画像付き記事に適しています。

ya風テンプレートからBLUE CUSTOMの変更に比べると紅色特製型板テンプレートは
配色とデザイン変更が主なカスタマイズです。
２カラムの変更に伴うスタイルシートの修正もありますがwith値の変更程度でした。
そのため、基本的動作等はBLUE CUSTOMと同じです。

まだまだ未完成部分があるとおもいますが、お好みでカスタマイズしてみてください。

インストール方法
１）BLUE CUSTOMやya風と同じく、zipを書庫のフォルダを復元して解凍してください。
２）「redcustom」フォルダーは「mt-staticのthemes」に転送。
３）「image」フォルダーはサイトURL直下に転送（サイトパス直下）。
４）index.html及びtxtファイルの内容を「ブログのテンプレート」の各項目と差し替えて（コピペ貼り付け）ください。

注意点等はBLUE CUSTOMと同じですので別記事にて解説した内容も参考にしてください。

重要 google検索及びリンクに用いたIDは、当スタジオ取得のアドセンスＩＤとなっています。
IDをお持ちの方は、ご自身のＩＤに書き換えてください。

紅色特製型板（RED CUSTOM）テンプレートのコンセプトは赤・紅・朱と和の融合。
紅を和で表すのならば他にも表現方法がありますが、裏コンセプトもあるため
日本的すぎるのもシリーズ的な融合性がとれなくなります。
そのため、ありがちですが紅葉と重ねることで表・裏のコンセプトを同時に表しました。

こちらも、アフィリエイト系のサイトに対応するためトップページの左カラムは234pxバナー、
カテゴリー・個別ページの右カラムは300px前後のバナーに対応しています。

また、トップページでは３カラムのメインウィジェットを表示、カテゴリー（アーカイブ）・個別ページでは
２カラムウィジェットを表示ていますので状況に応じたアフィリエイトリンクの使い分けが可能となっています。

画像データ作成に用いたフォトショップのpsdファイルも同梱しています。
ページトップの画像作成に用いたpsdファイルのサイズの関係でzipファイルも大きくなりました。
不要な方にはご迷惑かと思いますがご了承願います。

その他、気づいた点がありましたら、そのつど追加・変更していきます。

また、カスタマイズに関するご質問等ございましたらお気軽にご連絡ください。

MovableTypeOS用無料テンプレートの配布「BLUE CUSTOM」

MovableType （MTOS）用スタイルテンプレート「ya風」をカスタマイズしたBLUE CUSTOMテンプレートを配布致します。

個人利用、及び商用利用にかかわらず利用制限等はございません。（フリー）
＊再配布は不可。

「BLUE CUSTOM」サンプルサイトリンク

http://platinumcolor.net/mtos/bluecustom/bluecustom.zip
ya風よりも汎用性を重視しています。
こちらもまだまだ未完成部分がありますので、お好みでカスタマイズしてみてください。

インストール方法 : zipを書庫のフォルダを復元して解凍してください。
「bluecustom」フォルダーを「mt-staticのthemes」に転送、「image」フォルダーはサイトURL直下に転送（サイトパス直下）、index.html及びtxtファイルの内容を「ブログのテンプレート」の各項目と差し替えて（コピペ貼り付け）ください。

「簡単な解説」
BLUE CUSTOMテンプレートは、２カラムを標準として作成し、HTMLヘッダーとindex.hemlに追加したタグによりトップページを３カラムにしています。
＊詳細につきましては「MovableTypeOS用無料テンプレートの配布「ya風」」の解説をご覧ください。

そのため、付属するtxtファイルをアーカイブテンプレートと書き換えて、モジュールを追加する必要があります。
また、トップページの中心カラム（alpha）はウィジェットとして表示させているため、ウィジェットセットの作成で「メイン」作成してください。
＊ウィジェットセットの「メイン」を未作成のまま再構築を行うとエラーが発生します。

重要 google検索及びリンクに用いたIDは、当スタジオ取得のアドセンスＩＤとなっています。
IDをお持ちの方は、ご自身のＩＤに書き換えてください。

BLUE CUSTOMテンプレートのコンセプトはミリタリー。
タイトルロゴは下記のサイトで配布されているフォントを利用しています。
http://www.dafont.com/usaaf-stencil.font

用途としてアフィリエイト系のサイトを想定しているため左カラムは100px前後のバナー
中カラムは478pxのバナー、右カラムは300px前後のバナーを貼ることができます。
アフィリエイトのリンクはウィジェットとして作成することで、状況に応じた広告の入れ替えが可能です。
また、トップページ以外のカテゴリやアーカイブは、2カラムのサイドバーに設定されたウィジェットが
表示されるのでトップページと他のページで異なるアフィリエイトが可能となっています。

画像データ作成に用いたフォトショップのpsdファイルも一部同梱しています。
お好みでサイトに合わせたデザインと配色へ書き換えてください。

その他、気づいた点がありましたら、そのつど追加・変更していきます。

また、カスタマイズに関するご質問等ございましたらお気軽にご連絡ください。

MovableTypeOS用無料テンプレートの配布「ya風」

前回のコラムでお知らせした MovableType （MTOS）用スタイルテンプレート「ya風」を配布致します。

http://platinumcolor.net//mtos/ya_custom/yaho_custom.zip
未完成部分もありますが、細かな部分はお好みでカスタマイズしてみてください。

インストール方法 : zipを書庫のフォルダを復元しつつ解凍し、「yaho_custom」フォルダーを「mt-staticのthemes」に転送、「image」フォルダーはサイトURL直下に転送（サイトパス直下）、index.html及びtxtファイルの内容を「ブログのテンプレート」の各項目と差し替えて（コピペ貼り付け）ください。

「簡単な解説」
ya風テンプレートは、２カラムを標準として作成しているためスタイルの変更だけでは地味な表示となります。
ウィジェットセットの作成で「メイン」作成し、index.hemlとHTMLヘッダー・バナーヘッダー・バナーフッターの書き換えで上記サンプルのような表記に変わります。

「カテゴリトップ表示」のウィジェットはメインに配置、「定番サイト」と「天気とカレンダー」（共にgoogleガジェットを利用）を左右のカラムに配置すれば、サンプルと同様の構成になります。
あとは、ウィジェットタグ参考に記載したタグを参考にアフィリエイトリンクを作成してみてください。

ya風テンプレートでは、トップページは３カラム、各カテゴリ表示や個別ページは２カラムとなっています。
MovableType OSではカラムの設定を個別に変えることができませんが「HTMLヘッダー」に

<mt:if name=”page_layout_override”>
<mt:setvar name=”page_layout” value=”$page_layout_override”>
</mt:if>

index.htmlに

<mt:setvar name=”page_layout_override” value=”layout-twt”>

を追加してカラム数を変更しています。

また、なるべく書き換え項目が少なくて済むように、テンプレートモジュールに分割せず
index.htmlに埋め込みました。
あまり美しいやり方ではありませんので、お好みで分割してください。

その他、カテゴリページや個別ページのカスタマイズが甘かったり、
java表示のもたつきが気になりますが、気づいた点がありましたら、そのつど追加・変更していきます。

微妙にサイズを変えたり表記を変えていますが、問題等がございましたら
メールにてご連絡ください。
また、遊びで作成したテンプレートなので至らない点も多くありますがご了承ください。

カスタマイズ小話「Ｙａｈｏｏのテンプレート」

何気なく利用している「Yahoo! Japan」ですが、テンプレートやスタイルシート（css）の面からデザイン見本として眺めてみると洗練された新たな方向性に驚きを感じさせてくれます。

Yahoo! Japan（以後Yahoo略）のトップページは、インターネットの歴史みたいなもので、htmlで書かれた初期のサイトから最新のCMSで作られる現在のサイト（予想です）まで少しずつ変化を遂げてきました。
最新のトップページに変わったのは２００８年の１月だったでしょうか（それ以前からテスト利用はされていましたけど）。
ログインやメールリンクの位置が変わって使いづらさを感じていましたが、今ではすっかり馴染んでいます。

そのYahooのトップページのレイアウトを改めて眺めると、一般的なスタイルを超越したデザインセンスに感動を覚えます。
今でこそ３カラムで中・右を大きく取ったサイトやブログが増えていますが、テストを開始した１年半前なら３カラムであってもホームページ的なデザインが多く見受けられた時期です。
特にYahooの場合は中央のカラムもウィジェット化されていることがポイントでしょう。
広告収入が主となるポータルサイトでは、広告バナーの挿入位置が重要であり、状況に応じた変更の必要性から現在のスタイルになったのと思われますが、１年半も前に実装していたと考えたなら驚きを隠せません。

空き時間と土日を利用してyahoo風のテンプレートを作成してみました。
参考 http://platinumcolor.net/mtos/ya_custom/
＊無料テンプレートとして配布したいと考えていますので少々お待ちください。

配布テンプレート用にカスタマイズしながらいろいろ考察してみたのですが、Yahooのトップページと現在主流のデザインで大きく異なる点はトップヘッダー部分に配置されたリンク用のアイコンです。
ロゴマークの左右に配置された６個のアイコン型リンクですが、同様のデザインを用いた海外のYahooでは利用されていません。
日本オリジナルなのでしょうか。
デザイン的にどうなのかや、手本にしたいかどうかはともかく、利用者視点で見れば使いやすい配置です。

その他のデザインは一般的と言えますが、過去のデザインと考えれば先進的かつ素晴らしい発想です。
もちろん、メインのカラムをウィジェット化する必要性はあまりないものの、商用ホームページやアフィリエイトをされている方は利便性の良さを実感するでしょう。
デザインと言うより熟れに近いのですが、Yahooのテンプレートにアフィリエイトバナーを貼っても違和感がありません。
どんなジャンルでも、どんなに派手でも、ごく自然な感じがします・・。
ウィジェットブロックとして仕切られていれば、アフィリエイトバーナー特有の目障りさが軽減されるのでしょうか。
ゴチャゴチャと貼り付けた方がyahooぽくなることに驚きました。

カスタマイズ視点でYahooを見れば、メインカラムのタブ切り替えが困難でした。
配布用に作成しているテンプレートはMovableTypeOSを用いていますが、MovableTypeにはカテゴリIDで一覧表示させるタグが無いことと、再読み込み無しで表示を切り替えるにはJavaを使う必要があることなど、一般利用では高性能なMTも高機能な業務用CMSと比べればかなり劣っています。
WordPressならカテゴリ表示がIDですし、phpなので、もっと近い動きができたかもしれませんね。
熟れてる分だけMTの方が使いやすいもので・・。

まとめとしては、一流企業のデザイナーは流石だなと感じたひとときでした。
物まねデザインでカスタマイズすることに批判的な方もいらっしゃると思いますが、自分には無いセンスを学ぶためにも良い学習方法だと思っています。
言うなれば模写でしょうか。
当スタジオとしてもポータルサイトの作成代行を行っていきたいと考えているため、代表格でもあるYahooは最上の手本です。
またまだ未完成ですがYahoo風テンプレートにカスタマイズして学べた事も数多くあるでしょう。
利用者として使っていると何も感じないサイトも、カスタマイズの手本にしてみると新たな発見があるかもしれません。