「ver4/テーマ制作チュートリアル」を編集中
提供: baserCMS公式ガイド
警告: ログインしていません。
編集すると、IPアドレスがこのページの編集履歴に記録されます。この編集を取り消せます。
下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 | 編集中の文章 | ||
行1: | 行1: | ||
+ | [このコンテンツは内容調整中です] | ||
+ | |||
## baserCMSのダウンロードとインストール | ## baserCMSのダウンロードとインストール | ||
行13: | 行15: | ||
* [http://basercms.net/download/index.html baserCMS コアパッケージダウンロード] | * [http://basercms.net/download/index.html baserCMS コアパッケージダウンロード] | ||
+ | |||
+ | ### baserCMSのドキュメントルート | ||
+ | [[ファイル:document_root.png]]</br> | ||
+ | |||
+ | baserCMS のパッケージを解凍し、中身をそのまま設置すると、静的ファイルを設置する「ドキュメントルート」が強制的に変更されます。 | ||
+ | これは baserCMS のフレームワーク 「CakePHP」のセキュリティ上の仕様です。 | ||
+ | HTML等の静的ファイルを配置する際は、 webroot フォルダの中に配置してください。 | ||
+ | するとドキュメントルート配下に配置されたものとしてブラウザで参照する事ができます。 | ||
+ | /app/webroot/test.html のように配置すると | ||
+ | http://exapmle.com/test.html | ||
+ | として参照できます。 | ||
行26: | 行39: | ||
## テーマと表示の設定 | ## テーマと表示の設定 | ||
### テーマの変更 | ### テーマの変更 | ||
− | [[ファイル: | + | [[ファイル:theme_change.png|350px]]</br> |
theme/ フォルダの中に「corp」という名前でフォルダを作成し、サーバーにアップします。 | theme/ フォルダの中に「corp」という名前でフォルダを作成し、サーバーにアップします。 | ||
− | 管理システムから「テーマ管理」をクリックし、「corp」というテーマが表示されているのを確認します。 | + | 管理システムから「テーマ管理」をクリックし、「corp」というテーマが表示されているのを確認します。(<span style="color:red;">この段階ではまだテーマを有効化しないでください</span>) |
+ | 《「Pages」フォルダに書き込み権限を与えて下さい。》というメッセージが出ているはずですので、/theme/corp/ 内にPagesフォルダを作成し書き込み権限を与えます。 | ||
その後、一番左の緑色のチェックマークをクリックしテーマを有効化します。 | その後、一番左の緑色のチェックマークをクリックしテーマを有効化します。 | ||
### 公開サイトの表示を確認する | ### 公開サイトの表示を確認する | ||
− | [[ファイル: | + | [[ファイル:koukai_side.png|350px]]</br> |
画面左上のサイト名部分をクリックすると公開サイドのトップページを表示できます。 | 画面左上のサイト名部分をクリックすると公開サイドのトップページを表示できます。 | ||
現時点では、テーマフォルダ内にテンプレートが存在しないので、baserCMSコアパッケージのデザインが反映された状態となっています。 | 現時点では、テーマフォルダ内にテンプレートが存在しないので、baserCMSコアパッケージのデザインが反映された状態となっています。 | ||
行65: | 行79: | ||
### レイアウトテンプレートの作成 | ### レイアウトテンプレートの作成 | ||
レイアウトテンプレートは、「Layouts」というフォルダ内に保存します。 | レイアウトテンプレートは、「Layouts」というフォルダ内に保存します。 | ||
− | * <span style="color:red;">まずは、[http://basercms.net/files/uploads/ | + | * <span style="color:red;">まずは、[http://basercms.net/files/uploads/html.zip こちら]からthemeフォルダに設置するhtmlファイルをダウンロードしてください。</span> |
* テーマフォルダ(theme/corp/)内に「Layouts」というフォルダと「Elements」というフォルダを作成します。 | * テーマフォルダ(theme/corp/)内に「Layouts」というフォルダと「Elements」というフォルダを作成します。 | ||
* 「Layouts」フォルダ内に「default.php」というファイルを作成します。(文字コードはUTF-8) | * 「Layouts」フォルダ内に「default.php」というファイルを作成します。(文字コードはUTF-8) | ||
* 「Elements」フォルダ内は今は空のままで問題ありません。 | * 「Elements」フォルダ内は今は空のままで問題ありません。 | ||
− | * 添付しているhtmlフォルダ内のindex. | + | * 添付しているhtmlフォルダ内のindex.htmlの内容をそのまま貼り付けて保存してください。 |
### CSSと画像の配置 | ### CSSと画像の配置 | ||
行223: | 行237: | ||
## コンテンツの登録・編集 | ## コンテンツの登録・編集 | ||
− | ### | + | ### indexページの登録 |
− | + | * 管理システムにログインし、「固定ページ管理」より「index」ページ の編集画面を開きます。 | |
− | * | + | |
* 「本文」欄をソースビューに切り替え、htmlファイルのコンテンツ本 体部分のソースを貼り付けます。 | * 「本文」欄をソースビューに切り替え、htmlファイルのコンテンツ本 体部分のソースを貼り付けます。 | ||
※今回のテーマであれば、```<*‒ Main Contents -->``` の記述がある<u>DIVタグ部分の中身</u>がコンテンツ本体となります。 | ※今回のテーマであれば、```<*‒ Main Contents -->``` の記述がある<u>DIVタグ部分の中身</u>がコンテンツ本体となります。 | ||
− | |||
行346: | 行358: | ||
メインイメージの出力箇所に下記のタグを記述します。 | メインイメージの出力箇所に下記のタグを記述します。 | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
− | <?php $this->BcBaser->mainImage(array( | + | <?php $this->BcBaser->mainImage(array(‘all’ => true, ‘id’ => ’MainImage’)) ?> |
</syntaxhighlight> | </syntaxhighlight> | ||
行420: | 行432: | ||
もう少し詳しく知りたい方は、公式サイトの情報も参考にしてください。わらかない事があったら[http://forum.basercms.net フォーラム]で質問してみましょう。 | もう少し詳しく知りたい方は、公式サイトの情報も参考にしてください。わらかない事があったら[http://forum.basercms.net フォーラム]で質問してみましょう。 | ||
− | なお、今回のお手本となったテーマが次のURLよりダウンロードできます。[ | + | なお、今回のお手本となったテーマが次のURLよりダウンロードできます。[http://barket.jp/products/detail.php?product_id=14 こちら]も確認してみてください。 |
<br> | <br> | ||
行433: | 行445: | ||
* [http://basercms.net/manuals/3/index baserCMS公式マニュアル] | * [http://basercms.net/manuals/3/index baserCMS公式マニュアル] | ||
* [http://wiki.basercms.net/ baserCMS公式ガイド] | * [http://wiki.basercms.net/ baserCMS公式ガイド] | ||
− | * [http:// | + | * [http://goo.gl/skaVyE 関数リファレンス] |
* [http://forum.basercms.net/ baserCMSユーザーズフォーラム] | * [http://forum.basercms.net/ baserCMSユーザーズフォーラム] | ||
* [http://www.facebook.com/groups/basercms.zatsudan/ baserCMSの雑談広場(Facebook)] | * [http://www.facebook.com/groups/basercms.zatsudan/ baserCMSの雑談広場(Facebook)] |