うぇびん a-blog cmsの静的サイトからのカスタマイズに手を付けてみたので、手順をまとめておきます。
MovableType で運営している本サイトを、a-blogcmsに切り替えたいと思っているので、移行の練習も兼ねて、本サイトを今回の実験台としてみます。
テーマファイルの設定
まずは現状の本サイトの主要ページ（トップページ・個別ページ・404等）を、静的HTMLに変換したものを用意しました。
普通のXHTMLベースのコンテンツです。
このセットが入ったフォルダに「webbing0908」と適当な名前を付け、
[a-blogcmsの設置ディレクトリ]/themes/
以下に放り込みます。
既に「system」「plain」「company1」というディレクトリができていますが、これらはa-blogcmsの基本テーマです。消さないで置いておきます。
それから管理メニューに入り（サイトと同じデザインでない内部ページです）、
「コンフィグ一覧」→「テーマ設定」で…
- どのフォルダを表示用テンプレートとするのか
- フォルダ内のどのファイルを
- トップページにするか
- アーカイブページにするか
- 個別ページにするか
を、ファイル名を入力して指定していきます。
このうち、「管理ページ」「ログインページ」は、初期設定のままにしておくと「system」テーマに入っている基本のデザインがオーバーライドされるので（webbing0908に同名のファイルがないと自動的にsysytemから探す）、特に変更の必要はないと思います。
また、「エントリー編集ページ」は「詳細ページ」と同じ方が楽です。
ここまでやってブログトップへ戻ると
」ﾟ口ﾟ)」 あらもう反映されてますわよ奥様。
「webbing0908」フォルダのサイト構成が、そのままブログトップを起点に反映されます。
現時点ではブログと連動していないので、静的ページのサイトをアップしているのと全く変わりません。とりあえずこの時点で静的サイトとしてアップしておいて、段階的にa-blog cmsと連動することも可能です。
※今回は相対パスで動作を確認しています。スラッシュからの絶対パスでうまくいくかどうかは未検証ですが、たぶん対応しているんじゃないかと思います。
a-blog cmsとの関連付け
私のサイトと、a-blog cmsのデフォルトサイトで同じ役割を持っているのは「Information」と、下の「参加予定のイベント（正方形のバナー）」です。
なので、これらを「webbing0908」テーマに結び付けてみます。
「company1」テーマの「index.html」から、それらしい記事表示部分のコードをかっぱらってきて、「webbing0908」テーマの「index.html」の該当個所に埋め込んでいきます。
※現状サイトでは、バナー部分はHTMLを手入力しています。MovableTypeで動的にするのがめんどくさかったのです＾＾；
HTMLのコメントを使った独自タグは、宣言用のブロックタグが多くてちょっと鬱陶しい印象。MTと同じくらいのボリュームかな。Dreamweaverのスニペット併用は必須かと思います。
個別ページに関しては、どこから手を付けていいかわからないくらい独自タグが書かれているので、「company1」テーマの「main.html」の本文枠をガサッと突っ込みます。
これで「index.html」を上書きアップロードすればOK…と思ったのですがうまくいきません。
HTMLはきちんと動的になったのですが、「ログイン中のメニューボタン」や「記事の投稿・編集フォーム」が崩れてしまいます。
いろいろソースコードを調べて、「システム用のCSSとJSを追加しなければならない」ことがわかりました。
記事投稿画面のデザイン調整
※ここから先の手順は、もっと確実な方法があるのかもしれません。その場合は後日訂正します。
「webbing0908」テーマの<head>の最後に「ログインしているときだけ管理画面用のCSS・JSを読み込ませる」コードを追加します。
「plain」か「company1」テーマからそのまま持ってきます。
これだけでもいいのですが、まだ崩れが出たり、グレーベースの投稿画面がサイトに合わない場合はCSSの上書きが必要になります。
「system」テーマに入っている、以下の３つのCSSを自分のテーマディレクトリの同じ階層（css）にコピーすると、テーマ専用に記事中のタグ・投稿画面のスタイルを指定することができます。
- style.css
- フォーム枠のクリアフィックス、本文枠のデザイン全般のスタイルが書かれています。ディレクトリに入れるだけではなく他のCSSと一緒に読み込みます。
- adminBtn.css
- ログイン・ログアウトのボタンセット用CSSです。ボタンを横一列に揃えたりするスタイルが書かれています。ディレクトリに入れるだけで反映されます。
- entryForm.css
- 記事投稿・編集時のフォームのスタイルが書かれています。ディレクトリに入れるだけで反映されます。
あとは、各CSSの説明を参考に、該当する部分を探してスタイルの調整をしていきます。
私はせっかくなので、グレーベースだった投稿フォームを自分のサイトに合わせてみました。
テーマファイルにないものをデフォルトのテーマから反映しようとする挙動（オーバーライド）は、WordPressに似ている印象です。
投稿フォームをブラウザで表示させながら微調整していった方が早いので、Firefoxのプラグイン「FireBug」か「Webdeveloper」があると楽です。
これが使えない場合は、ログイン状態のHTMLをローカルに落として、Dreamweaverで調整することになります。
いずれにしても、「オリジナルデザインのサイトに複雑なフォームを突っ込む」という作業は、カスタマイズの経験がないと難しいです。
また、フォームや段落ののマージン・パディングをリセットしていることを前提にCSSが組まれているので、元のHTMLが後方互換モードだったり、リセットCSSが入っていないと、手数が増えることが予想されます。
そういう意味では、a-blog cmsは最初のテーマ導入は非常に楽ですが、その後の工程はやや熟練者向けと言えます。
これは、ウェブサイトのデザインをそのまま編集画面にできるCMSが抱えている、共通の弱点でもありますね。
そんなこんなで、a-blog cmsのデータを、本サイトのデザインに反映することができました。
バナーの差し替えなんかもしてみたり。ちゃんと管理画面の「バナーの設定」で管理できるようになりました。
もちろん、私のサイトは新着情報以外にもコンテンツがありますし、このブログとデータを共有している個所もあるので、まだまだ作業はあります。
カスタムフィールドの追加や、カテゴリーごとにデザインを変更する「ルール設定」も必要になります。
配布サイトにはマニュアルもありますし、だいたい勝手がわかってきたので、またいろいろいじってみます。& lt;/p>