テーマの編集
エントリーのデータを表示する元となるhtmlファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsで独自のサイトを作るためにはこのテーマをカスタマイズをする必要があります。
テーマの階層
テーマディレクトリ
a-blog cms設置ディレクトリにthemesフォルダがあります。その直下にあるフォルダがそれぞれテーマになります。新規でテーマを作る際もこのthemesフォルダ内にフォルダを作成してください。
ただし、systemフォルダは管理画面等で使用され、cmsのアップデート時に変更される可能性のあるフォルダですのでこちらを直接編集せず、次に紹介するテーマ設定で設定されているテーマを編集するようにしましょう。
テーマの設定
a-blog cms のデータを表示するテーマファイルは、管理ページから設定します。 カスタマイズ管理 > コンフィグ > ブログ > テーマ設定 にアクセスしてください。
表示したいテーマを選択し、「保存」ボタンを押せばそのテーマが選択されます。
また、設定したテーマ内においてどのファイルを「トップページ」、「一覧ページ」、「詳細ページ」にするかといった設定も同じ画面内の「テンプレートファイル」の項目で行います。
また、「テンプレート選択ファイル（template.yaml）の値を優先する」の項目にチェックが入っていると、先ほどの「テンプレートファイル」の設定よりもtemplate.yamlの設定が優先されます。このtemplate.yamlは選択しているテーマディレクトリの直下にtemplate.yamlファイルを設置することで有効になります。
以下はtemplate.yamlの記述例です。
tpl_top : top.html tpl_index : index.html tpl_detail : entry.html tpl_404 : 404.html tpl_admin : admin.html tpl_entry_edit : entry.html tpl_entry_add : entry.html tpl_login : login.html
| tpl_top | トップページのHTML |
| tpl_index | 一覧ページのHTML |
| tpl_detail | 詳細ページのHTML |
| tpl_404 | 404ページのHTML |
| tpl_admin | 管理ページのHTML |
| tpl_entry_edit | 詳細ページの編集ページのHTML |
| tpl_entry_add | 詳細ページのユニット追加ページのHTML |
| tpl_login | ログインページのHTML |
表示中のテンプレートの確認
ログインしている状態だと、下のイメージのように現在どのテンプレートファイルを使用しているのか確認することができます。
また、開発者ツールやソースコードを表示すると、各パーツごとのインクルード先がHTMLコメントにとして表示され、使用しているテンプレートがわかります。
1. サイトテーマを設定します。
管理画面 >> コンフィグ >> テーマ設定 よりsiteテーマを設定します。
2. トップページにどのテンプレートが設定されているのかを確認します。
「テンプレート選択ファイル（template.yaml）の値を優先する」にチェックが入っている場合は下の図のようにtemplate.yamlファイルの設定を確認します。今回はtop.htmlを使用しますのでtop.htmlが設定されていない場合は、template.yamlを編集してトップページにtop.htmlが使用されるように設定してください。
「テンプレート選択ファイル（template.yaml）の値を優先する」にチェックが入っていない場合は「テンプレートファイル」の設定を確認します。今回はtop.htmlを使用しますのでtop.htmlが設定されていない場合は、top.htmlに変更し保存してください。
3. top.htmlの編集
top.htmlを開くと以下のように検索フォームを読み込むinclude文の記述があります。
<!-- 検索フォーム --> <!--#include file="/include/parts/search.html" -->
include文とはfile="設定されているブログのテーマからテンプレートへのパス"を記述することでそこのテンプレートに記述されている内容を読み込むためのものです。 このまま、include文を削除していただいても大丈夫ですが、以下のように、##を二つつけるなどすることでテンプレートを読み込まないようにすることができます。
<!-- 検索フォーム --> <!--##include file="/include/parts/search.html" -->
これにより、検索フォームがトップページ上から見えなくなりました。確認してみましょう。
