Typoのテーマ機能

Posted by mito Thu, 09 Aug 2007 08:00:00 GMT

今日はTypoのテーマ機能について書きます．

テーマはAdminメニューのDESIGN->Choose a themeをクリックすると表示されます．この中から好きなテーマのActivateリンクをクリックすることで変更することが出来ます．

デフォルトではAzureとScribbish-2.0というテーマしか用意されていませんのが以下のサイトで大量に公開されています．好きなテーマを探してダウンロードしてきましょう．

新しいテーマを追加するにはダウンロードしたファイルをサーバのtypo_url/themes/以下に展開します．展開してから先程のテーマ選択画面を表示すると新しいテーマが表示されるのでそれをActivateすればテーマを変更することが出来ます．

テーマは自分で作成することもできます．このBlogのテーマはAzureを改造して作成しました．

テーマは基本的に以下のようなファイルで構成されています．

about.markdown	テーマ選択画面で表示されるテキスト
preview.png	テーマ選択画面で表示される画像
stylesheets	public/stylesheetsに相当するCSSのディレクトリ
images	public/imagsに相当する画像のディレクトリ
layout/default.rhtml	Blogのヘッダ，フッタ，サイドバーなどの基本デザインを定義するファイル
views	app/viewsに相当するディレクトリ

では今回このBlogをデザインする際に行った作業手順を元にそれぞれのファイルの役割を解説していきます．

レイアウト
まずlayout/default.rhtmlを開きヘッダ，フッタなどのBlog全体にかかわる部分のHTMLを書きます．

サイト上部のメニュー部分やサイドバー下のtypo poweredのバナーリンクなどはこのファイルに記述されています．
Viewの微修正
app/views以下のファイルで定義されているViewを修正したい場合はtheme_name/views以下に同名のディレクトリ・ファイルを置くことで特定のViewだけ上書きすることができます．

このBlogでは記事の本文にクラスをつけたかったためviews/articles/_article.rhtmlを修正しています．
デザイン
HTML部分が出来上がったらスタイルシートを書きます．スタイルシートはtheme_name/stylesheets以下にCSSファイルを置くことで適用することができます．theme_name/stylesheetsディレクトリはviewsディレクトリなどと同様にpublic/stylesheetsに上書きされます．

以上でTypoのテーマを作成することができます． TypoのテーマはほとんどHTMLとCSSの知識だけで書けるので比較的作りやすく感じました．気に入ったテーマが見つからない人は自分で作ってみるのはいかがでしょうか？