ablogcms.ioメニューを開閉する公式サイト開発者向けサイトテーマを編集してみよう難易度テーマの基本エントリーのデータを表示する元となるhtmlファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。cmsで独自のサイトを作るためにはこのテーマをカスタマイズをする必要があります。SFTPでの接続に成功した後、リモートにあるファイル群をダウンロードすると図のように、themesフォルダがあります。その直下にあるフォルダがそれぞれテーマになります。新規でテーマを作る際もこのthemesフォルダ内にフォルダを作成し、アップロードしてください。systemフォルダは管理画面等で使用され、cmsのアップデート時に変更される可能性のあるフォルダですのでこちらを直接編集せず、次に紹介するテーマ設定で設定されているテーマを編集するようにしましょう。データを表示するテーマファイルは、管理ページから設定します。アクセスしてください。表示したいテーマを選択し、「保存」ボタンを押せばそのテーマが選択されます。設定したテーマ内においてどのファイルを「トップページ」、「一覧ページ」、「詳細ページ」にするかといった設定も同じ画面内の「テンプレートファイル」の項目で行います。「テンプレート選択ファイル(template.yaml)の値を優先する」の項目にチェックが入っていると、先ほどの「テンプレートファイル」の設定よりもtemplate.yamlの設定が優先されます。このtemplate.yamlは選択しているテーマディレクトリの直下にtemplate.yamlファイルを設置することで有効になります。以下はtemplate.yamlの記述例です。ログインページのHTML表示中のテンプレートの確認ログインしている状態だと、下のイメージのように現在どのテンプレートファイルを使用しているのか確認することができます。開発者ツールやソースコードを表示すると、各パーツごとのインクルード先がHTMLコメントにとして表示され、使用しているテンプレートがわかります。右側の赤い枠で囲われた検索フォームをトップページから外してみましょう。サイトテーマを設定します。siteテーマを設定します。トップページにどのテンプレートが設定されているのかを確認します。「テンプレート選択ファイル(template.yaml)の値を優先する」にチェックが入っている場合は下の図のようにtemplate.yamlファイルの設定を確認します。今回はtop.htmlを使用しますのでtop.htmlが設定されていない場合は、template.yamlを編集してトップページにtop.htmlが使用されるように設定してください。「テンプレート選択ファイル(template.yaml)の値を優先する」にチェックが入っていない場合は「テンプレートファイル」の設定を確認します。今回はtop.htmlを使用しますのでtop.htmlが設定されていない場合は、top.htmlに変更し保存してください。top.htmlの編集top.htmlを開くと以下のように検索フォームを読み込むinclude文の記述があります。-->include文とはfile="設定されているブログのテーマからテンプレートへのパス"を記述することでそこのテンプレートに記述されている内容を読み込むためのものです。このまま、include文を削除していただいても大丈夫ですが、以下のように、##を二つつけるなどすることでテンプレートを読み込まないようにすることができます。-->これにより、検索フォームがトップページ上から見えなくなりました。cmsのインストーラが設置されています。cmsをインストールしてみましょう。提供するテストサーバ環境へは、SFTP接続できます。テーマ(テンプレート)をカスタマイズする場合には、サーバへファイルをアップロードする必要があります。cmsではカスタムフィールドをコード(HTML)で作成・管理します。HTMLなので入力画面を入力しやすいレイアウトできます。モジュールを使ってみよう動的コンテンツを表示するモジュールを使って、コンテンツを更新できるようにしてみましょう。cmsの環境のセットアップが完了した後、どのようにインストールしたテーマをカスタマイズしていけばよいでしょうか?ここでは各テンプレートの役割や基本的なテーマの考え方について説明します。