個人用ツール

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

提供: baserCMS公式ガイド

移動: 案内, 検索

警告: ログインしていません。

編集すると、IPアドレスがこのページの編集履歴に記録されます。
この編集を取り消せます。 下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 編集中の文章
行1: 行1:
テーマのデザインやレイアウトを変更する上で役立つ情報を掲載しています。(なお、ここに記載されている関数の詳細は「[[関数リファレンス|関数リファレンス ver.3系]]」「[[ver4/関数リファレンス|関数リファレンス ver.4系]]」を参照してください)
+
テーマのデザインやレイアウトを変更する上で役立つ情報を掲載しています。(なお、ここに記載されている関数の詳細は「[[関数リファレンス]]」を参照してください)
  
  
行5: 行5:
 
== テーマの場所 ==
 
== テーマの場所 ==
 
テーマは以下の場所に入っています。新たにダウンロードした場合は、以下の場所にいれることで管理画面が自動的に認識します。なおテーマに内包される各種フォルダとファイルの詳細は「[[テーマの構造]]」を参照してください。
 
テーマは以下の場所に入っています。新たにダウンロードした場合は、以下の場所にいれることで管理画面が自動的に認識します。なおテーマに内包される各種フォルダとファイルの詳細は「[[テーマの構造]]」を参照してください。
 
###Ver.3系統
 
 
<pre>
 
<pre>
/app/webroot/theme/
+
/app/webroot/themed/
 
</pre>
 
</pre>
  
###Ver.2系統
 
<pre>
 
/app/webroot/themed/
 
</pre>
 
 
 
 
 
  
行25: 行19:
 
レイアウトテンプレートに記述出来る内容を、わざわざ別ファイルにしてエレメントファイル化するのは、主に保守性やソースの可視性を高める為ですので、エレメントファイル化せずに全てをレイアウトテンプレート内に書き込む事もできます。なお、エレメントファイルの設置場所については「[[テーマの構造#elementsフォルダ|elementsフォルダ]]」を参照してください。
 
レイアウトテンプレートに記述出来る内容を、わざわざ別ファイルにしてエレメントファイル化するのは、主に保守性やソースの可視性を高める為ですので、エレメントファイル化せずに全てをレイアウトテンプレート内に書き込む事もできます。なお、エレメントファイルの設置場所については「[[テーマの構造#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>を使う場合、そこに[[テーマに関する用語#テーマフック|テーマフック]]を利用できます。
+
ヘッダー部分のエレメントファイルと、フッター部分のエレメントファイルについては、それぞれ「header.php」「footer.php」という名前でエレメント化しておくと、これらを読み込む為の特別な関数<code>$bcBaser-&gt;header()</code><code>$bcBaser-&gt;footer()</code>が使えるようになります。通常の<code>$bcBaser-&gt;element(’header’)</code><code>$bcBaser-&gt;element(’footer’)</code>を使っても呼び出せますが、<code>$bcBaser-&gt;header()</code>や<code>$bcBaser-&gt;footer()</code>を使う場合、そこに[[テーマに関する用語#テーマフック|テーマフック]]を利用できます。
  
 
 
 
 
行32: 行26:
 
記述の方法は基本的に変わりません。ただし、設置場所にルールが存在します。以下の場所に設置してください。
 
記述の方法は基本的に変わりません。ただし、設置場所にルールが存在します。以下の場所に設置してください。
  
####Ver.3系統
 
<pre>
 
(モバイル)
 
/app/webroot/theme/(テーマのフォルダ)/Layouts/mobile/
 
(スマートフォン)
 
/app/webroot/theme/(テーマのフォルダ)/Layouts/smartphone/
 
</pre>
 
 
 
####Ver.2系統
 
 
<pre>
 
<pre>
 
(モバイル)
 
(モバイル)
行53: 行37:
 
baserCMSではテーマを利用した際、画像やCSS、JSファイルの設置階層が深くなってしまいます。また、スマートURLの有無など、ルーティングの関係もあり、通常のHTMLタグでの読み込みが煩雑で面倒です。そこでテーマ作成・編集の場面において、それらのファイルを読み込む場合には、一般的にヘルパー(表示用のビューファイルで使われる関数)を利用します。
 
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>)を利用します。なお、各ファイルの設置場所については、[[テーマの構造]]を参照してください。
+
画像の読み込みは<code>[[画像を読み込む|$bcBaser-&gt;img()]]</code>、CSSは<code>[[CSSを読み込む|$bcBaser-&gt;css()]]</code>、JSファイルは<code>[[jsファイルを読み込む|$bcBaser-&gt;js()]]</code>を利用します。なお、各ファイルの設置場所については、[[テーマの構造]]を参照してください。
 
+
 
  
 
 
  
 
==ウィジェットエリア ==
 
==ウィジェットエリア ==
[[ウィジェットエリア管理]]で管理できるウィジェットのレイアウトを変更する必要が有る場合、CSSのみで対応できるならば問題ありませんが、出力されるHTMLを変更する場合、baserCMSのコアフォルダからテーマ内の所定の場所に、ウィジェット用のビューファイルをコピーして、それを変更する事ができます。ファイルをコピーすることで、別々の場所に同機能の同名ファイルができますが、テーマフォルダ内のファイルが優先して読み込まれます。
+
[[ウィジェットエリア管理]]で管理できるウィジェットのレイアウトを変更する必要が有る場合、CSSのみで対応できるならば問題ありませんが、出力されるHTMLを変更する場合、baserフォルダからテーマ内の所定の場所に、ウィジェット用のビューファイルをコピーして、それを変更する事ができます。ファイルをコピーすることで、別々の場所に同機能の同名ファイルができますが、テーマフォルダ内のファイルが優先して読み込まれます。
  
 
ウィジェット用のファイルは、もともと以下のフォルダに入っています。
 
ウィジェット用のファイルは、もともと以下のフォルダに入っています。
 
####Ver.3系統でのウィジェット配置場所
 
<pre>
 
/lib/Baser/Views/Elements/widgets/
 
</pre>
 
 
####Ver.2系統でのウィジェット配置場所
 
 
<pre>
 
<pre>
 
/baser/views/elements/widgets/
 
/baser/views/elements/widgets/
 
</pre>
 
</pre>
 
  
 
変更が必要なフォルダとファイルを、以下にコピーします。
 
変更が必要なフォルダとファイルを、以下にコピーします。
 
####Ver.3系統でのコピー先
 
 
<pre>
 
<pre>
/app/webroot/theme/(テーマのフォルダ)/Elements/widgets/
+
/app/webroot/(テーマのフォルダ)/elements/widgets/
</pre>
+
 
+
####Ver.2系統でのコピー先
+
<pre>
+
/app/webroot/themed/(テーマのフォルダ)/elements/widgets/
+
 
</pre>
 
</pre>
  
 
なお、blogなどのプラグインに依存するウィジェット(月別アーカイブ一覧など)の変更は
 
なお、blogなどのプラグインに依存するウィジェット(月別アーカイブ一覧など)の変更は
 
####Ver.3系統でのプラグインウィジェット
 
<pre>
 
/app/webroot/theme/(テーマのフォルダ)/(プラグイン名)/Views/Elements/widgets/
 
</pre>
 
 
####Ver.2系統でのプラグインウィジェット
 
 
<pre>
 
<pre>
/app/webroot/themed/(テーマのフォルダ)/(プラグイン名)/views/elements/widgets/
+
/app/webroot/(テーマのフォルダ)/(プラグイン名)/views/elements/widgets/
 
</pre>
 
</pre>
 
に変更対象ファイルを入れて編集します。
 
に変更対象ファイルを入れて編集します。
行107: 行68:
  
 
なお、サーバーキャッシュは管理画面にログインしているユーザーは使用しないようになっていますので、最新のページが見えるはずです。しかし、そのせいでサーバーキャッシュが残っていることをサイト管理者や制作者が気が付かず、一般ユーザーは古い情報を見ている、という可能性も考えられます。変更をしたらサイバーキャッシュを削除することに注意してください。
 
なお、サーバーキャッシュは管理画面にログインしているユーザーは使用しないようになっていますので、最新のページが見えるはずです。しかし、そのせいでサーバーキャッシュが残っていることをサイト管理者や制作者が気が付かず、一般ユーザーは古い情報を見ている、という可能性も考えられます。変更をしたらサイバーキャッシュを削除することに注意してください。
 
 
<br /><br />
 
''テキスト寄贈:[http://hiniarata.jp/ 馬庭 吾一@株式会社ヒニアラタ]''
 

baserCMS公式ガイドへのすべての投稿は、他の利用者によって編集、変更、除去される場合があります。 あなたの投稿を、他人が遠慮なく編集するのを望まない場合は、ここには投稿しないでください。
また、投稿するのは、あなたが書いたものか、パブリック ドメインまたはそれに類するフリーな資料からの複製であることを約束してください (詳細は[[Basercms:著作権 ]]を参照)。 著作権保護されている作品を、許諾なしに投稿してはいけません!

Add Categories
  

中止 | 編集の仕方 (新しいウィンドウで開きます)