テーマの基本



エントリーのデータを表示する元となるhtmlファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsで独自のサイトを作るためにはこのテーマをカスタマイズをする必要があります。


SFTPでの接続に成功した後、リモートにあるファイル群をダウンロードすると図のように、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_404404ページの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" -->

これにより、検索フォームがトップページ上から見えなくなりました。確認してみましょう。


a-blog cmsのインストール

サーバへの接続

カスタムフィールドを作ってみよう

モジュールを使ってみよう

テーマを編集してみよう

インストールとサーバへの接続について