a-blog cms にはモジュールと呼ばれる仕組みがあり、この「モジュール」がa-blog cmsで管理しているコンテンツの表示を管理しています。

モジュールには、大きく分けてビルトインモジュール・フィールドモジュール・タッチモジュールの3種類がありますが、今回はよくサイト制作で使われているビルトインモジュールを使ってみましょう。

ここでは、最終的にお知らせカテゴリーの記事一覧を表示できるように説明していきます。

作業の前に、まずは a-blog cms にログインしてください（ http://あなた専用のURL/login/ のURLでログイン画面が表示されます ）。

モジュールを表示する

1.使用するモジュールのスニペットを入手する

まずは、使用するモジュールのスニペットを入手する必要があります。（スニペットとは、a-blog cms で管理されているコンテンツを表示するために必要なソースコードのことです。）ここでは記事の一覧を表示したいので、「エントリーリスト」というモジュールのスニペットを入手します。

管理者ボックス（ヘッダー下の灰色のボックス）より、「管理ページ」ボタンをクリックし、管理ページに移動したら、左の黒いサイドバーより、「コンフィグ」へ移動します。

「モジュール」項目からエントリーリストを探し、「スニペット」ボタンをクリックしてください。別ウィンドウが表示され、HTMLのコメントタグの文字列とHTMLタグが書かれているのが確認できますが、これがスニペットです。ここまできたら、スニペットをコピーします。

2. テンプレートにモジュールを貼り付ける

ご自分のa-blog cmsが入った環境の /themes/site2015/top.html を開いてください。さきほどコピーしたスニペットを、top.html のお好きな場所にペーストしてください。保存をし、 http://あなた専用のURL/ へ移動すると、リンク付きの記事の一覧が表示されています。

これでサイト全体の記事の一覧が表示されるようになりました。ですが、サイト全体の記事一覧が表示されている状態なので、まだお知らせカテゴリーのエントリー一覧とは言えません。エントリーを表示する条件を追加して、お知らせカテゴリーのエントリーのみを表示してみましょう。

お知らせカテゴリーのエントリーのみを表示する

1. モジュールIDを作成する

お知らせカテゴリーのエントリーのみを表示するには、モジュールIDを作る必要があります。モジュールIDは管理画面で作成します。再度管理ページへ移動し、左の黒いサイドバーから「モジュールID」をクリックして「モジュールID管理」の画面へ移動します。

右上の「モジュールIDを作成」ボタンをクリックします。新規モジュールID画面になったら、以下の項目を入力します。

入力したら、上部にある青い「作成」ボタンをクリックします。

これで、お知らせカテゴリーのみを表示するエントリーリストのモジュールIDができました。

2. モジュールIDをテンプレートに反映させる

今の状態では、管理画面でモジュールIDを作成しただけで「モジュールを表示する」でテンプレートに記述したエントリーリストとは情報がひも付けられていません。モジュールIDの設定を反映するには、テンプレートにモジュールIDを記述する必要があります。

テンプレートに記述したエントリーリストのスニペットの冒頭に、id="newsList"と記入してください。

以下、記述例になります。

<!-- BEGIN_MODULE Entry_List id="newsList" -->

テンプレートを保存したら、サイトを確認しましょう。お知らせカテゴリーのエントリーのみが表示されるようになっています。

そのほかのビルトインモジュール

今回はエントリーリストを使って説明しましたが、ほかにもカテゴリーを表示する「カテゴリーリスト」や、ナビゲーションを表示する「ナビゲーション」などのビルトインモジュールが用意されているので、使用してみてください。

ビルトインモジュールのドキュメントは、以下のページになります。

ビルトインモジュールのドキュメントへ

また、今回は管理画面からスニペットをコピー&ペースとしましたが、ビルトインモジュールのスニペットはa-blog cms 制作者向け情報にも用意しています。

ビルトインモジュールのリファレンスへ

今回の機能紹介記事では、2020年1月14日にリリースされたVer. 2.11.3より加わった、Pretty Scrollの属性をご紹介します。

data-offset-topとdata-offset-bottomの2つ属性が追加されたことにより、オフセット距離が設定できるようになります。

下記のコードではウィンドウの上部より100px離れた位置で要素を固定します。

<div class="js-pretty-scroll-container">
  <div class="main">
  </div>
  <div class="sub js-pretty-scroll" data-offset-top="100">
  </div>
</div>

data-offset-bottomを指定すれば、指定した数値のpx分だけウィンドウの下部から離れた位置で対象の要素を固定します。

Pretty Scrollの使い方はドキュメントをご覧ください。

• スクロールに追従するサイドメニューを実装する（Pretty Scroll）を利用する

エントリーのデータを表示する元となる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

表示中のテンプレートの確認

ログインしている状態だと、下のイメージのように現在どのテンプレートファイルを使用しているのか確認することができます。

また、開発者ツールやソースコードを表示すると、各パーツごとのインクルード先が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" -->

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