「テーマ制作チュートリアル」を編集中
提供: baserCMS公式ガイド
警告: ログインしていません。
編集すると、IPアドレスがこのページの編集履歴に記録されます。この編集を取り消せます。
下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 | 編集中の文章 | ||
行1: | 行1: | ||
− | + | # baserCMSのダウンロードとインストール | |
− | + | ## サーバー環境について | |
まずはサーバー環境の準備をしましょう | まずはサーバー環境の準備をしましょう | ||
行9: | 行9: | ||
− | + | ## baserCMSのダウンロード | |
baserCMS の公式サイトから最新版の baserCMS をダウンロードして解凍してください。 | baserCMS の公式サイトから最新版の baserCMS をダウンロードして解凍してください。 | ||
* [http://basercms.net/download/index.html baserCMS コアパッケージダウンロード] | * [http://basercms.net/download/index.html baserCMS コアパッケージダウンロード] | ||
− | + | ## baserCMSのドキュメントルート | |
[[ファイル:document_root.png]]</br> | [[ファイル:document_root.png]]</br> | ||
行26: | 行26: | ||
− | + | ## アップロード&インストール | |
1. 構成変更を終えたファイル群を全てサーバーにアップロードします。 | 1. 構成変更を終えたファイル群を全てサーバーにアップロードします。 | ||
(XAMPP、MAMPの場合はドキュメントルートフォルダへコピーします。) | (XAMPP、MAMPの場合はドキュメントルートフォルダへコピーします。) | ||
行33: | 行33: | ||
4. インストールが完了したらダッシュボードに移動し、動作を確認します。 | 4. インストールが完了したらダッシュボードに移動し、動作を確認します。 | ||
− | |||
− | + | # テーマと表示の設定 | |
− | + | ## テーマの変更 | |
[[ファイル:theme_change.png|350px]]</br> | [[ファイル:theme_change.png|350px]]</br> | ||
theme/ フォルダの中に「corp」という名前でフォルダを作成し、サーバーにアップします。 | theme/ フォルダの中に「corp」という名前でフォルダを作成し、サーバーにアップします。 | ||
行44: | 行43: | ||
− | ## | + | ## 公開サイドの表示を確認する |
[[ファイル:koukai_side.png|350px]]</br> | [[ファイル:koukai_side.png|350px]]</br> | ||
画面左上のサイト名部分をクリックすると公開サイドのトップページを表示できます。 | 画面左上のサイト名部分をクリックすると公開サイドのトップページを表示できます。 | ||
行50: | 行49: | ||
− | + | ## 事前にデバッグモードへ切り替える | |
* baserCMSのページ機能は表示速度を少しでも改善する為、サーバーキャッシュ機能というものを利用している為、テンプレートをFTPにてアップロードした場合、表示が変わらない場合があります。 | * baserCMSのページ機能は表示速度を少しでも改善する為、サーバーキャッシュ機能というものを利用している為、テンプレートをFTPにてアップロードした場合、表示が変わらない場合があります。 | ||
* その場合、管理システムより「サーバーキャッシュの削除」を実行すると表示を更新する事ができます。 | * その場合、管理システムより「サーバーキャッシュの削除」を実行すると表示を更新する事ができます。 | ||
行58: | 行57: | ||
(システム管理 > 下部「オプション」クリック後 > 制作・開発モード変更 > 保存ボタン) | (システム管理 > 下部「オプション」クリック後 > 制作・開発モード変更 > 保存ボタン) | ||
− | |||
− | + | # テンプレートの作成 | |
− | + | ## テンプレートの構成について | |
[[ファイル:template_kousei.png|350px]]</br> | [[ファイル:template_kousei.png|350px]]</br> | ||
行75: | 行73: | ||
− | + | ## レイアウトテンプレートの作成 | |
レイアウトテンプレートは、「Layouts」というフォルダ内に保存します。 | レイアウトテンプレートは、「Layouts」というフォルダ内に保存します。 | ||
* <span style="color:red;">まずは、[http://basercms.net/files/uploads/html.zip こちら]からthemeフォルダに設置するhtmlファイルをダウンロードしてください。</span> | * <span style="color:red;">まずは、[http://basercms.net/files/uploads/html.zip こちら]からthemeフォルダに設置するhtmlファイルをダウンロードしてください。</span> | ||
行84: | 行82: | ||
* 添付しているhtmlフォルダ内のindex.htmlの内容をそのまま貼り付けて保存してください。 | * 添付しているhtmlフォルダ内のindex.htmlの内容をそのまま貼り付けて保存してください。 | ||
− | + | ## CSSと画像の配置 | |
* htmlフォルダ内のcssフォルダ、imgフォルダ、jsフォルダをテーマフォルダ(theme/corp/)内に配置します。 | * htmlフォルダ内のcssフォルダ、imgフォルダ、jsフォルダをテーマフォルダ(theme/corp/)内に配置します。 | ||
<u>この時点では、画像やCSS、Javascritpのリンクのパスが解決できていない為、リンク切れの状態となります。</u> | <u>この時点では、画像やCSS、Javascritpのリンクのパスが解決できていない為、リンク切れの状態となります。</u> | ||
− | + | ## 外部ファイルを参照するタグの書き換えについて | |
* 配布を目的としたテーマとして作成する場合は、サブフォルダに設置される可能性もある為、A、IMG、CSS、JAVASCRIPTタグについて、自動的に適切なパスとなるよう、baserCMS用のタグに書き換える必要があります。 | * 配布を目的としたテーマとして作成する場合は、サブフォルダに設置される可能性もある為、A、IMG、CSS、JAVASCRIPTタグについて、自動的に適切なパスとなるよう、baserCMS用のタグに書き換える必要があります。 | ||
* <u>配布を前提としない場合、通常のHTMLタグで記述されても構いません</u> | * <u>配布を前提としない場合、通常のHTMLタグで記述されても構いません</u> | ||
が、ヘッダーやフッターなどの共通部品は、違う階層のファイルから読み込まれる事があるので、スラッシュ(/)から始まる「ルートパス」で記述します。 | が、ヘッダーやフッターなどの共通部品は、違う階層のファイルから読み込まれる事があるので、スラッシュ(/)から始まる「ルートパス」で記述します。 | ||
− | + | ## CSSタグの書き換え | |
CSSタグを次のコードに書き換えます。 | CSSタグを次のコードに書き換えます。 | ||
行101: | 行99: | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
− | + | <?php $this->BcBaser->css('style') ?> | |
</syntaxhighlight> | </syntaxhighlight> | ||
二つ以上を一行で指定する場合は配列で指定します。 | 二つ以上を一行で指定する場合は配列で指定します。 | ||
行113: | 行111: | ||
− | + | ## Javascriptタグの書き換え | |
Javascriptタグを次のコードに書き換えます。 | Javascriptタグを次のコードに書き換えます。 | ||
行121: | 行119: | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
− | + | <?php $this->BcBaser->js('jquery-1.10.1.min') ?> | |
</syntaxhighlight> | </syntaxhighlight> | ||
二つ以上を一行で指定する場合は配列で指定します。 | 二つ以上を一行で指定する場合は配列で指定します。 | ||
行133: | 行131: | ||
− | + | ## IMGタグの書き換え | |
レイアウトテンプレート内の各IMGタグを書き換えます。 | レイアウトテンプレート内の各IMGタグを書き換えます。 | ||
行150: | 行148: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | + | ## Aタグの書き換え | |
レイアウトテンプレート内の各Aタグを書き換えます。 | レイアウトテンプレート内の各Aタグを書き換えます。 | ||
* URLは baserCMS設置場所のスラッシュから始まるルートパスで記述 | * URLは baserCMS設置場所のスラッシュから始まるルートパスで記述 | ||
行167: | 行165: | ||
− | + | ## IMGタグをAタグで挟む場合 | |
IMGタグをAタグで挟む場合は次のように、urlオプションをつけます。 | IMGタグをAタグで挟む場合は次のように、urlオプションをつけます。 | ||
行181: | 行179: | ||
− | + | ## ブラウザで一旦確認 | |
[[ファイル:browser_check.png|350px]]</br> | [[ファイル:browser_check.png|350px]]</br> | ||
行187: | 行185: | ||
先ほどは、リンク切れした状態でしたが、 CSSや、Javascript、画像のパスがきちんと解決していれば、上図のように正常に画像等が表示され、スライダーが動作するはずです。 | 先ほどは、リンク切れした状態でしたが、 CSSや、Javascript、画像のパスがきちんと解決していれば、上図のように正常に画像等が表示され、スライダーが動作するはずです。 | ||
− | + | ## タイトル・メタタグの埋込 | |
* レイアウトファイル(default.php)のheadタグ内に次のタグを書き込みます。 | * レイアウトファイル(default.php)のheadタグ内に次のタグを書き込みます。 | ||
行201: | 行199: | ||
− | + | ## baser標準タグの埋込 | |
* baserCMSが用意している標準の機能を利用する為に次のタグを ```</head>```の前に埋め込みます。 | * baserCMSが用意している標準の機能を利用する為に次のタグを ```</head>```の前に埋め込みます。 | ||
行217: | 行215: | ||
− | + | ## ブラウザで一旦確認 | |
ここらへんで、一旦ブラウザ上でフロントの表示がどのようになっているかを確認しておきましょう。 | ここらへんで、一旦ブラウザ上でフロントの表示がどのようになっているかを確認しておきましょう。 | ||
PHPのエラーが発生していなければ問題ありません。リンクをクリックしても全てトップページになるはずです。 | PHPのエラーが発生していなければ問題ありません。リンクをクリックしても全てトップページになるはずです。 | ||
リモートのサーバーで確認している場合は、通常のWeb制作と同様、編集したファイルをその都度FTPでアップロードして確認します。 | リモートのサーバーで確認している場合は、通常のWeb制作と同様、編集したファイルをその都度FTPでアップロードして確認します。 | ||
− | + | ## グローバルメニューの書き換え | |
* グローバルメニューを管理画面で管理する為、ULタグの部分も含め次のタグで書き換えます。ヘッダー・フッターともに書き換えます。 | * グローバルメニューを管理画面で管理する為、ULタグの部分も含め次のタグで書き換えます。ヘッダー・フッターともに書き換えます。 | ||
行232: | 行230: | ||
<span style="color:red;"><u>管理機能が不要であれば、書き換える必要はありません。</u></span> | <span style="color:red;"><u>管理機能が不要であれば、書き換える必要はありません。</u></span> | ||
− | |||
− | + | # コンテンツの登録・編集 | |
− | + | ## indexページの登録 | |
* 管理システムにログインし、「固定ページ管理」より「index」ページ の編集画面を開きます。 | * 管理システムにログインし、「固定ページ管理」より「index」ページ の編集画面を開きます。 | ||
* 「本文」欄をソースビューに切り替え、htmlファイルのコンテンツ本 体部分のソースを貼り付けます。 | * 「本文」欄をソースビューに切り替え、htmlファイルのコンテンツ本 体部分のソースを貼り付けます。 | ||
行242: | 行239: | ||
− | + | ## コンテンツ部分の書き換え | |
* コンテンツ出力タグとして次のタグを記述します。 | * コンテンツ出力タグとして次のタグを記述します。 | ||
行253: | 行250: | ||
− | + | ## 下層でトップメイン画像非表示 | |
下層ページではトップのメインイメージは不要ですので、トップのみ表示するというようにします。 [http://wiki.basercms.net/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/isHome $this->BcBaser->isHome関数] を利用します。 | 下層ページではトップのメインイメージは不要ですので、トップのみ表示するというようにします。 [http://wiki.basercms.net/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/isHome $this->BcBaser->isHome関数] を利用します。 | ||
行267: | 行264: | ||
− | + | ## フィードの実装 | |
先程編集したindexページにフィード読み込みを実装します。 | 先程編集したindexページにフィード読み込みを実装します。 | ||
管理システムのトップページ編集よりULタグ部分を次のタグで書き換えます。 | 管理システムのトップページ編集よりULタグ部分を次のタグで書き換えます。 | ||
行286: | 行283: | ||
<u>固定ページは、PHPタグの埋め込みが可能です。</u> | <u>固定ページは、PHPタグの埋め込みが可能です。</u> | ||
− | + | ## ブログテンプレートのコピー | |
トップページのブログ記事の読み込み部分について、日付とタイトルの間に改行が入ってしまっているので調整します。 | トップページのブログ記事の読み込み部分について、日付とタイトルの間に改行が入ってしまっているので調整します。 | ||
baserCMSコアパッケージに対象テンプレートが存在するのですが、直接編集した場合、baserCMSのバージョンアップ時に先祖返りを起こしてしまうので、テーマフォルダーにコピーして編集します。 | baserCMSコアパッケージに対象テンプレートが存在するのですが、直接編集した場合、baserCMSのバージョンアップ時に先祖返りを起こしてしまうので、テーマフォルダーにコピーして編集します。 | ||
行296: | 行293: | ||
<strong>theme/corp/Blog/default/posts.php</strong> | <strong>theme/corp/Blog/default/posts.php</strong> | ||
− | + | ## ブログデザインのカスタマイズ | |
* 先程コピーした posts.php をお題のデザインにあわせて編集します | * 先程コピーした posts.php をお題のデザインにあわせて編集します | ||
* SPAN タグを P タグに書き換えます。 | * SPAN タグを P タグに書き換えます。 | ||
行302: | 行299: | ||
* 完了したら保存してトップページの表示を確認します。 | * 完了したら保存してトップページの表示を確認します。 | ||
− | + | ## フィードテンプレートのコピー | |
トップページのフィードの読み込み部分について、日付とタイトルの間に改行が入ってしまっているので調整します。 | トップページのフィードの読み込み部分について、日付とタイトルの間に改行が入ってしまっているので調整します。 | ||
baserCMSコアパッケージに対象テンプレートが存在するのですが、直接編集した場合、baserCMSのバージョンアップ時に先祖返りを起こしてしまうので、テーマフォルダーにコピーして編集します。 | baserCMSコアパッケージに対象テンプレートが存在するのですが、直接編集した場合、baserCMSのバージョンアップ時に先祖返りを起こしてしまうので、テーマフォルダーにコピーして編集します。 | ||
行311: | 行308: | ||
<strong>theme/corp/Feed/default.php</strong> | <strong>theme/corp/Feed/default.php</strong> | ||
− | + | ## フィードデザインのカスタマイズ | |
* 先程コピーした default.php をお題のデザインにあわせて編集します | * 先程コピーした default.php をお題のデザインにあわせて編集します | ||
* SPAN タグを P タグに書き換えます。 | * SPAN タグを P タグに書き換えます。 | ||
行317: | 行314: | ||
* 完了したらアップロードしてトップページの表示を確認します。 | * 完了したらアップロードしてトップページの表示を確認します。 | ||
− | + | ## サイドバーコンテンツの読み込み | |
ブログの最新記事一覧などのウィジェットが配置されているサイドバーを読み込みます。 | ブログの最新記事一覧などのウィジェットが配置されているサイドバーを読み込みます。 | ||
サイドバーのABOUT US のDIVタグの後に次のタグを記述します。 | サイドバーのABOUT US のDIVタグの後に次のタグを記述します。 | ||
行325: | 行322: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | + | ## コンテンツ名出力タグ埋込 | |
デザインの柔軟性を高めるよう、baserCMSがページごとに出力するコンテンツ名をbodyタグにID属性として埋め込みます。 | デザインの柔軟性を高めるよう、baserCMSがページごとに出力するコンテンツ名をbodyタグにID属性として埋め込みます。 | ||
Bodyタグを次のように書き換えます。 | Bodyタグを次のように書き換えます。 | ||
行335: | 行332: | ||
固定ページのカテゴリごとに読み込むCSS設定を変更する場合などに有用です。 | 固定ページのカテゴリごとに読み込むCSS設定を変更する場合などに有用です。 | ||
− | + | # テーマの詳細設定 | |
− | + | ## テーマ画像の配置 | |
− | + | ||
− | + | ||
ロゴとメインイメージは管理システムのテーマ設定より変更する事ができるようになっています。 | ロゴとメインイメージは管理システムのテーマ設定より変更する事ができるようになっています。 | ||
メインイメージについては、カルーセル等に対応できるよう、5枚まで設定できるようになっています。 | メインイメージについては、カルーセル等に対応できるよう、5枚まで設定できるようになっています。 | ||
行348: | 行343: | ||
※ numには1~5の番号が入ります。 | ※ numには1~5の番号が入ります。 | ||
− | + | ## テーマ画像の出力 | |
ロゴの出力箇所に下記のタグを記述します。 | ロゴの出力箇所に下記のタグを記述します。 | ||
行365: | 行360: | ||
* id - 全ての画像を取得する際に ul タグに付与する id 属性 | * id - 全ての画像を取得する際に ul タグに付与する id 属性 | ||
− | + | ## テーマカラーの設定 | |
メインカラー、サブカラー、テキストリンク、 テキストホバーをテーマで定義しておくと、管理システムで変更できるようになります。 | メインカラー、サブカラー、テキストリンク、 テキストホバーをテーマで定義しておくと、管理システムで変更できるようになります。 | ||
テーマカラーの設定は、テーマカラーとなるCSSを抜き出し、設定元CSSとして、次のファイルに記述します。 | テーマカラーの設定は、テーマカラーとなるCSSを抜き出し、設定元CSSとして、次のファイルに記述します。 | ||
行376: | 行371: | ||
* HOVER ・・・テキストホバーカラー | * HOVER ・・・テキストホバーカラー | ||
− | + | ## テーマカラー設定ファイル例 | |
``` | ``` | ||
行393: | 行388: | ||
``` | ``` | ||
− | + | ## テーマカラー設定における注意事項 | |
* テーマ内のCSSを書き換えるのではなく、あくまで設定上書き用のCSSを作成し、両方を読み込むので、条件によっては上書きができない場合があります。 | * テーマ内のCSSを書き換えるのではなく、あくまで設定上書き用のCSSを作成し、両方を読み込むので、条件によっては上書きができない場合があります。 | ||
※ 設定用CSSのプロパティに important を付与する事で対応できます。 | ※ 設定用CSSのプロパティに important を付与する事で対応できます。 | ||
行399: | 行394: | ||
* テーマカラーを設定した場合、$this->BcBaser->script() を記述した箇所にCSSを挿入しますので、上記関数の後にCSSを読み込まないようにしてください。 | * テーマカラーを設定した場合、$this->BcBaser->script() を記述した箇所にCSSを挿入しますので、上記関数の後にCSSを読み込まないようにしてください。 | ||
− | |||
− | + | # 初期データの設定 | |
− | + | ## 初期データの用意 | |
データベース用の初期データをテーマで用意する事ができます。 | データベース用の初期データをテーマで用意する事ができます。 | ||
管理システムで、メニューや、固定ページの内容を変更した後、その状態を初期データとしてテーマに梱包する事ができます。 | 管理システムで、メニューや、固定ページの内容を変更した後、その状態を初期データとしてテーマに梱包する事ができます。 | ||
行411: | 行405: | ||
これは、居酒屋テーマを作成したい等、baserCMSが最初から準備している初期データではテーマのコンセプト合わない場合に利用します。<span style="color:red;"><u>必要でなければ作業は不要です。</u></span> | これは、居酒屋テーマを作成したい等、baserCMSが最初から準備している初期データではテーマのコンセプト合わない場合に利用します。<span style="color:red;"><u>必要でなければ作業は不要です。</u></span> | ||
− | + | ## 初期データ配置 | |
ダウンロードしたデータは、下記フォルダに配置します。 | ダウンロードしたデータは、下記フォルダに配置します。 | ||
<strong>theme/corp/Config/data/</strong> | <strong>theme/corp/Config/data/</strong> | ||
行420: | 行414: | ||
パターンB・・・<strong>theme/corp/Config/data/pattern-b/</strong> | パターンB・・・<strong>theme/corp/Config/data/pattern-b/</strong> | ||
− | + | ## baserCMSのリセットと、初期データのインストール | |
インストール前に初期データを梱包したテーマを配置しておくと、インストールステップ3や、テーマ管理で、選択できるようになります。 | インストール前に初期データを梱包したテーマを配置しておくと、インストールステップ3や、テーマ管理で、選択できるようになります。 | ||
baserCMSをリセットしてテストしてみるとよいでしょう。 | baserCMSをリセットしてテストしてみるとよいでしょう。 | ||
行426: | 行420: | ||
<strong>http://[baserCMSの設置場所]/installations/reset</strong> | <strong>http://[baserCMSの設置場所]/installations/reset</strong> | ||
− | + | ## 動作を確認する | |
最後に、動作に問題がないかフロントページを確認します。このように、baserCMSは柔軟にデザインのカスタマイズを行う事ができます。 | 最後に、動作に問題がないかフロントページを確認します。このように、baserCMSは柔軟にデザインのカスタマイズを行う事ができます。 | ||
もう少し詳しく知りたい方は、公式サイトの情報も参考にしてください。わらかない事があったら[http://forum.basercms.net フォーラム]で質問してみましょう。 | もう少し詳しく知りたい方は、公式サイトの情報も参考にしてください。わらかない事があったら[http://forum.basercms.net フォーラム]で質問してみましょう。 | ||
行432: | 行426: | ||
なお、今回のお手本となったテーマが次のURLよりダウンロードできます。[http://barket.jp/products/detail.php?product_id=14 こちら]も確認してみてください。 | なお、今回のお手本となったテーマが次のURLよりダウンロードできます。[http://barket.jp/products/detail.php?product_id=14 こちら]も確認してみてください。 | ||
− | |||
− | + | # その他 | |
− | + | ## 他にもいろいろ機能があります | |
* 制作者向け機能の詳細は下記URLの「制作者向け機能一覧」を御覧ください | * 制作者向け機能の詳細は下記URLの「制作者向け機能一覧」を御覧ください | ||
[http://basercms.net/about/feature.html 制作者向け機能一覧] | [http://basercms.net/about/feature.html 制作者向け機能一覧] | ||
− | + | ## マニュアル、質問先はこちら | |
* [http://basercms.net/manuals/3/index baserCMS公式マニュアル] | * [http://basercms.net/manuals/3/index baserCMS公式マニュアル] | ||
* [http://wiki.basercms.net/ baserCMS公式ガイド] | * [http://wiki.basercms.net/ baserCMS公式ガイド] | ||
行448: | 行441: | ||
* [http://api.basercms.net/ APIドキュメント] | * [http://api.basercms.net/ APIドキュメント] | ||
− | [[ファイル:bessy.png| | + | [[ファイル:bessy.png|350px]] |
</br> | </br> | ||
Copyright 2016 baserCMS All rights reserved | Copyright 2016 baserCMS All rights reserved |