カスタマイズ小話「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は、一長一短としか言いようがありませんね。

ページトップ画像作成 Q&A 「フラッシュ（flash）の価格が載っていませんが」

Q 「フラッシュ（flash）の作成料金が価格表に載っていませんが、おいくらなのでしょうか」

フラッシュにつきましては正式サービスとして作成代行を行っていません。
ただ、状況に応じて現在のサービス範囲内で作成をおこないます。

つまり、フラッシュを用いる方が効果的と判断した場合や、ご要望があった場合など
ページトップ画像の作成としてフラッシュを作成致します。

通常のページトップ画像の作成と、とフラッシュの作成に掛かる時間や手間はあまり違いありません。
もちろん、さらに本格的なアニメーションを行わせるのならば相応の手間と時間をお掛けしますし
費用もページトップ画像作成の２倍や３倍を頂くことになります。

しかし、当サイトのトップに用いたフラッシュと同程度の画像数や時間ならば
「トップ画像作成タイトルロゴ有り（複雑合成・デザイン指示なし）」と同じ費用で作成可能です。

その他、ご要望に応じて対応させて頂きますので、まずはお問い合わせください。

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表示のもたつきが気になりますが、気づいた点がありましたら、そのつど追加・変更していきます。

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

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

サンプル利用させて頂いていたgoogleガジェットのサービス中止のため
表示されなくなっていたカレンダー部分の修正を行いました。

圧縮して登録済みの「yaho_custom.zip」を再度ダウンロードして頂くか
下記の内容と差し替えてください。
＊右クリックでファイルに保存を選択してください。

・天気とカレンダ(ウィジェット３カラムのサイドバーサブ).txt

ちなみに天気予報として利用させて頂いているのは・Pinpoint Weather Japan
カレンダーは・萬年曆

その他、。不明な点や判らない点がありましたら気軽にお問い合わせください。

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

何気なく利用している「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風テンプレートにカスタマイズして学べた事も数多くあるでしょう。
利用者として使っていると何も感じないサイトも、カスタマイズの手本にしてみると新たな発見があるかもしれません。

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

WordPressを初めて扱ったときは衝撃をうけたほど素晴らしいソフトウェアでした。
先進的で操作性も良く高機能と、まさに言うこと無しです。

ただ、無料ブログサービスを利用している方が、いきなりWordPressでサイトを作成しようとしても、壁のように立ちはだかる難易度かもしれませんね。
サーバーへのインストールや設定は、ほぼ自動で行われるので恐れることはありませんが、それぞれの機能を理解しながら少しずつ覚えていくしかないでしょう。
スタイルシート（CSS）やテーマ・ウィジェットの選択と操作法はMovableTypeと同じなので戸惑うこともありません。
極端に言えばlivedoorブログとたいして変わりありません。
しかし、WordPressにしてもMovableTypeにしても、テーマ選択の関係でスタイルシート（CSS）から実際に利用するスタイルシートを呼び出すようになっていたり、共通スタイルの記載されたスタイルシートとは別に個別の設定が記載されスタイルシートがあったりと、やや複雑になっています。

当スタジオのホームページである「Platinum color 涼優彩色」では、WordPressとテーマに「wp.Vicuna Ext」を利用させて頂いてます。
WordPressはともかくwp.Vicuna Extは、少し熟れてから利用した方が良いかもしれません・・。
最初はどこに何のスタイルが記載されているか解らずに苦労した覚えがあります。
もちろん、wp.Vicunaのサイトに親切丁寧詳しい解説がなされているので目を通せば十分解るのですが、初めてWordPressに触れる方がチャレンジするにはハードな道だと思います。

しかし、ハードな道のりも楽しみながら歩けば楽しい散歩です。
私はMovableTypeの３．３からWordPressを触って、複雑に分かれたスタイルシートに悩みつつもどうにか対応できましたから。
それでも２日間くらいは、MovableTypeに戻りたいと嘆きつつカスタマイズ作業を進めたことを覚えています。

カスタマイズの基本はWordPressもMovableTypeも、他の無料ブログサービスも同じで、HTML（PHP）の要素とスタイルシートを眺めながら数値を調整したり追加したりして目的のイメージに近づけます。
WordPressと無料ブログサービスの違いは、表現の幅が広がることと広告が入らないことくらいですから。
・・メンテで止まるとか、知らない間に改良（改悪）されて使い辛くならないことも。

無料ブログサービスも安定してるし、「無料」ですし、スタイルシート（CSS）に対応しているならカスタマイズできるのでオススメですが、新しいことにチャレンジしたくなったならWordPressでブログやビジネスホームページを作成してみてください。
もちろん手に負えなくなったなら、当スタジオへのご依頼をお待ちしています。