ここでは、「a-blog cmsをインストールしてみたが、カスタマイズの方法が分からない」という方のために、「ケータイサイト」のテーマを作りながらカスタマイズの方法をご紹介します。

※この解説は、a-blog cms 1.0.0b3をもとに説明しています。ご利用のバージョンによっては画面表示や内容が若干異なる場合があります。ご了承ください。

---

PCサイトのテーマは「company1」を使用します。これから、ケータイ用のテーマ「keitai」を新しく作りましょう。

まず、a-blog cms 1.0.0b3 以降をインストールします。テーマは「company」を選択してください。

a-blog cms では、「テーマ」という単位でサイトのデザインを管理しています。インストールしてあるディレクトリの「themes」ディレクトリ内には、

• company1
• plain
• system

という3つのテーマが入っているかと思います。ここに今回新しく「keitai」というディレクトリを作成します。ディレクトリの中には以下のような index.html というファイルを作ってください。

ケータイ用テーマ

携帯電話でアクセスした際はこのページが出るようになっています。

---

---

何も設定していない状態では、この「keitai」というテーマを表示させることができません。ケータイの場合にはテーマを「keitai」にするというルールを設定します。

管理ページの[環境設定]メニューから[ルール]-[新規ルール作成]の[作成]をクリックします。

ルールの一覧では、すでに2つの設定がされています。a-blog cmsのシステムが優先順位順にルールの内容をチェックし、一致したときにそのルールのコンフィグの設定が適用されます。

---

---

このルールの設定によって、カテゴリーごとにテンプレートのHTMLを変更したり、UA（ユーザーエージェント）によってテーマ自体を変更したり、ブログの設定全体を変更することができます。

---

---

ルール名を「ケータイの時」とし、 UAの設定を、上記のキャプチャのように「＝ Mobile 」とします。[編集]では上記のように設定した条件の変更ができ、 [コンフィグ]では、この条件の時のブログの各種設定が設定できます。設定してない項目は標準の設定になります。

---

---

今回はケータイの時のテーマを変更したいので、[テーマ設定]をクリックし、テーマ名を「keitai」に変更し、保存します。

keitaiテーマの[テーマ設定]

• トップページ index.html
• 一覧ページ index.html
• 詳細ページ entry.html

---

---

それでは、ケータイで設置先のURLをアクセスしてみましょう！Firefox では FireMobileSimulatorという拡張で、簡単にケータイでのサイト表示をチェックすることができ、おすすめです。

---

---

ケータイサイトと言えば、半角カナ を利用して表示するのが一般的になっています。a-blog cms では、システムで半角カナに自動変換する設定があります。[一般設定]をクリックして設定を変更します。

---

---

以下の設定を変更してみてください。

• 文字コードを「Shift-JIS」にする。
• 全角／半角の変換 を「k」（小文字）にする。

以上で、ケータイサイトの作り方から学ぶa-blog cmsのカスタマイズ その1 は終了です。これで、ケータイの時にテーマが切り替わるようになりました。現在は、PCのサイトはCMSで、ケータイサイトは静的なHTMLだけという状況です。

次回は、トップページにお知らせの一覧を出す方法について紹介しようと思います。

---