「テーマのデザイン編集」を編集中

テーマのデザインやレイアウトを変更する上で役立つ情報を掲載しています。（なお、ここに記載されている関数の詳細は「[[関数リファレンス|関数リファレンス ver.3系]]」「[[ver4/関数リファレンス|関数リファレンス ver.4系]]」を参照してください）



== テーマの場所 ==
テーマは以下の場所に入っています。新たにダウンロードした場合は、以下の場所にいれることで管理画面が自動的に認識します。なおテーマに内包される各種フォルダとファイルの詳細は「[[テーマの構造]]」を参照してください。

###Ver.3系統
<pre>
/app/webroot/theme/
</pre>

###Ver.2系統
<pre>
/app/webroot/themed/
</pre>
　

== HTMLはレイアウトテンプレートに記述 ==
[[テーマに関する用語#レイアウトテンプレート|レイアウトテンプレート]]で調整します。（レイアウトテンプレートの設置については「[[テーマの構造#layoutsフォルダ|layoutsフォルダ]]」を参照してください。）　

レイアウトテンプレートと[[テーマに関する用語#エレメントファイル|エレメントファイル]]等との関係をイメージ図で示すと以下のようになります。


レイアウトテンプレートに記述出来る内容を、わざわざ別ファイルにしてエレメントファイル化するのは、主に保守性やソースの可視性を高める為ですので、エレメントファイル化せずに全てをレイアウトテンプレート内に書き込む事もできます。なお、エレメントファイルの設置場所については「[[テーマの構造#elementsフォルダ|elementsフォルダ]]」を参照してください。

ヘッダー部分のエレメントファイルと、フッター部分のエレメントファイルについては、それぞれ「header.php」「footer.php」という名前でエレメント化しておくと、これらを読み込む為の特別な関数<code>$this->BcBaser->header()</code>（Ver.2系統では<code>$bcBaser-&gt;header()</code>）と<code>$this->BcBaser->footer()</code>（Ver.2系統では<code>$bcBaser-&gt;footer()</code>）が使えるようになります。通常の<code>$this->BcBaser->element('header')</code>（Ver.2系統では<code>$bcBaser-&gt;element(’header’)</code>）や<code>$this->BcBaser->element('footer')</code>（Ver.2系統では<code>$bcBaser-&gt;element(’footer’)</code>）を使っても呼び出せますが、<code>$this->BcBaser-&gt;header()</code>や<code>$this->BcBaser-&gt;footer()</code>を使う場合、そこに[[テーマに関する用語#テーマフック|テーマフック]]を利用できます。

　

=== モバイル・スマートフォンのレイアウトテンプレート ===
記述の方法は基本的に変わりません。ただし、設置場所にルールが存在します。以下の場所に設置してください。

####Ver.3系統
<pre>
（モバイル）
/app/webroot/theme/（テーマのフォルダ）/Layouts/mobile/
（スマートフォン）
/app/webroot/theme/（テーマのフォルダ）/Layouts/smartphone/
</pre>


####Ver.2系統
<pre>
（モバイル）
/app/webroot/themed/（テーマのフォルダ）/layouts/mobile/
（スマートフォン）
/app/webroot/themed/（テーマのフォルダ）/layouts/smartphone/
</pre>
　

== 画像、CSS、JSファイルの読み込み ==
baserCMSではテーマを利用した際、画像やCSS、JSファイルの設置階層が深くなってしまいます。また、スマートURLの有無など、ルーティングの関係もあり、通常のHTMLタグでの読み込みが煩雑で面倒です。そこでテーマ作成・編集の場面において、それらのファイルを読み込む場合には、一般的にヘルパー（表示用のビューファイルで使われる関数）を利用します。

画像の読み込みは<code>$this->BcBaser->img()</code>（Ver.2系統では<code>$bcBaser->img()</code>）、CSSは<code>$this->BcBaser->css()</code>（Ver.2系統では<code>$bcBaser->css()</code>）、JSファイルは<code>$this->BcBaser->js()</code>（Ver.2系統では<code>$bcBaser->js()</code>）を利用します。なお、各ファイルの設置場所については、[[テーマの構造]]を参照してください。
　

　

==ウィジェットエリア ==
[[ウィジェットエリア管理]]で管理できるウィジェットのレイアウトを変更する必要が有る場合、CSSのみで対応できるならば問題ありませんが、出力されるHTMLを変更する場合、baserCMSのコアフォルダからテーマ内の所定の場所に、ウィジェット用のビューファイルをコピーして、それを変更する事ができます。ファイルをコピーすることで、別々の場所に同機能の同名ファイルができますが、テーマフォルダ内のファイルが優先して読み込まれます。

ウィジェット用のファイルは、もともと以下のフォルダに入っています。

###Ver.3系統でのウィジェット配置場所
<pre>
/lib/Baser/Views/Elements/widgets/
</pre>

###Ver.2系統でのウィジェット配置場所
<pre>
/baser/views/elements/widgets/
</pre>


変更が必要なフォルダとファイルを、以下にコピーします。

###Ver.3系統でのコピー先
<pre>
/app/webroot/theme/（テーマのフォルダ）/Elements/widgets/
</pre>

###Ver.2系統でのコピー先
<pre>
/app/webroot/themed/（テーマのフォルダ）/elements/widgets/
</pre>

なお、blogなどのプラグインに依存するウィジェット（月別アーカイブ一覧など）の変更は

###Ver.3系統でのプラグインウィジェット
<pre>
/app/webroot/theme/（テーマのフォルダ）/（プラグイン名）/Views/Elements/widgets/
</pre>

###Ver.2系統でのプラグインウィジェット
<pre>
/app/webroot/themed/（テーマのフォルダ）/（プラグイン名）/views/elements/widgets/
</pre>
に変更対象ファイルを入れて編集します。

　

== 変更をブラウザで確認する ==

===サーバーキャッシュ===
[[サーバーキャッシュ]]が残っていると、変更点が反映されないことがあります。その場合は、システム管理からサーバーキャッシュの削除を行います。

なお、サーバーキャッシュは管理画面にログインしているユーザーは使用しないようになっていますので、最新のページが見えるはずです。しかし、そのせいでサーバーキャッシュが残っていることをサイト管理者や制作者が気が付かず、一般ユーザーは古い情報を見ている、という可能性も考えられます。変更をしたらサイバーキャッシュを削除することに注意してください。


<br /><br />
''テキスト寄贈：[http://hiniarata.jp/ 馬庭 吾一@株式会社ヒニアラタ]''