Webアプリケーションの見た目をテーマ(theme)を作ってガラっと変更することができます。今回はその方法を解説したいと思います。1.自分用のテーマフォルダを作成する2.標準で用意されているテーマをコピーする3.アプリケーション初期構成ファイルにテーマの設定を追加4.テーマ用の独自CSSファイルや画像などを用意する5.テーマファイルからCSSや画像を参照する1.自分用のテーマフォルダを作成するまずはテーマ関連のファイルをまとめておくためのフォルダを「/themes」直下に作成しましょう。この時に重要なのがフォルダ名で、ここで決めたフォルダ名がテーマ名になります。今回は試しに「mytheme」という名前で作成してみます。本番で使いたい人は自分のサイト用の独自のテーマ名にしておいてください。2.標準で用意されているテーマをコピーするテーマファイルを0から作るのは大変ですから、まずは標準で用意されているテーマフォルダをコピーしちゃいましょう。標準のテーマは「/protected/views」フォルダです。このフォルダをカスタマイズしている人でもそのままコピーしてOKです。コピーできたら、1で作成しておいたテーマディレクトリ「/themes/mytheme」内にペーストしましょう。3.アプリケーション初期構成ファイルにテーマの設定を追加そして最後のステップ。アプリケーション初期構成ファイル(/protected/config/main.php)にテーマを切り替える旨のプロパティを追加します。array('basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',...'theme'=>'mytheme',...);たったこれだけ。これだけで次から「mytheme」内のファイルを編集すれば独自のテーマで表示されるようになりますし、テーマを増やしたければ1~3のステップで新たに作成すればOKです。4.テーマ用の独自CSSファイルや画像などを用意するさて、独自のテーマを作成した後はやはり独自のCSSファイルや画像をテーマファイルに適用したいもの。標準ではアプリケーションベースフォルダ直下に「css」「images」フォルダがありますが、テーマの場合はテーマ別に管理したいですよね。テーマフォルダ直下に専用フォルダを作成テーマごとにCSSや画像を配置する場合は「/themes/mythme」直下に「css」「img」「js」等のフォルダを作成しましょう。普通であればこれらのフォルダには全ページで共通のCSSや画像のみを入れておき、viewsフォルダ内の階層化されたそれぞれのディレクトリに個別のCSSや画像を入れたいところなのですが、これは推奨されていません。いうのも、Yiiのドキュメントには以下のように書かれているためです。ディレクトリは、セキュリティに関わるデータを含む事が有り得るため、ウェブユーザからのアクセスを防ぐ様に設定するべきです。念の為にviewsディレクトリ直下に「.htaccess」を配置して次のように外部から直接アクセスできないようにしておきましょう。これで残念ながらviewsディレクトリ内にCSSファイルや画像を配置しても参照することができなくなります。セキュリティ向上のためです。all階層ごとに個別に適用させたいCSSファイルや画像などは「/themes/mytheme/css」や「/themes/mytheme/img」フォルダに「views」と同じような階層を作って配置するのが良いでしょう。5.テーマファイルからCSSや画像を参照する配置したCSSファイルや画像をテーマファイルから参照する場合はアプリケーションのthemeプロパティからbaseUrlを参照し、CSSや画像フォルダのパスを繋げて参照します。/>このページをシェアする関連記事はありません。コメントをキャンセルメールアドレスが公開されることはありません。Webサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。田舎に生まれ育ち東京へ。技術はDTPデザインからプログラミングまで、インフラはCD-ROM全盛からクラウドサーバーまで、いろいろなビジネスを作り、関わってきました(知見を生かして専門学校の講師も3年ほど)。今ではAWSで月間100万PVを超えるサービスを制作・運営しながらさらなるノウハウを蓄積中。このサイトではビジネスをITコンサルタント視点で考え、感じた知見や経験が世の中のお役に立てば、という視点で無料記事として公開しています。最近は機械学習による仕事の効率化を研究中。reserved.代表者のライフハックブログ。