a-blog cmsインストール時の初期状態について

ようこそa-blog cmsへ

数あるCMSの中からa-blog cmsをインストールしていただきありがとうございます。「インストールしたはいいけど何から始めたらいいかわからない」「短期間でもちゃんと理解できるか不安」そのような方に向けて、ここではインストール直後のa-blog cmsの仕様についてご紹介します。

ログインするには

まずはサブカラム右下にある [login] ボタンをクリックしてください。もしくは、表示されているURLの語尾に /login を追記しても同じページが表示されます。

例）https://example.com/login

次に「ユーザーID/メールアドレス」「パスワード」の各欄に管理者が発行した情報を入力し、[ログイン] ボタンをクリックします。

「ユーザーIDまたはパスワードが違います。」と表示されたら？

[ログイン] ボタンをクリックした時に「ユーザーIDまたはパスワードが違います。」と表示された場合は、以下のような原因が考えられます。

メールアドレス、パスワードが半角英数字で入力されていない
意図しないスペースが入っている

パスワードを忘れてしまったら？

パスワードを忘れてしまった場合は、パスワードを再発行しましょう。

[パスワードをお忘れですか？] をクリックして登録してあるメールアドレスを入力すると、パスワードを変更するためのリンクと新しいパスワードがメールで送られてきます。メールの内容に従って新しいパスワードでログインしてください。

これでログインは完了です。

ログイン中は、ヘッダーの直後とフッターの直前に灰色の管理ボックスが表示されます。サイトの運営は主にこの管理ボックスを使って行っていきます。

またヘッダー直後の管理ボックスにある [ログアウト] というボタンをクリックすることで、ログイン前の状態に戻ることもできます。

インストール時のサイトマップについて

a-blog cmsはインストール時より、実際に企業のサイトを制作した場合の仕上がりの例として、あらかじめ複数のサンプル記事が入力されています。このサイトは下図のような構造になっています。

a-blog cmsでは、これらの階層に関わる情報を3種類に区別しています。それが「ブログ」「カテゴリー」「エントリー」です。

ブログ: 全てのエントリーとカテゴリーを含むサイトの最大単位をブログといいます。サンプルサイトでは全てのエントリーとカテゴリーを「a-blog cms サンプルサイト」というブログで総括しています。

カテゴリー: 複数のエントリーをジャンル別に分類する単位をカテゴリーといいます。サンプルサイトでは「お知らせ」「会社概要」「製品情報」などが当てはまります。; また、製品情報カテゴリーのように、カテゴリー中でさらに「家庭用製品」「業務用製品」とカテゴリーを分けることもできます。これらは「親カテゴリー」「子カテゴリー」と区別されます。

エントリー: ページの最小単位をエントリーといいます。サイトを更新する際には、主にこのエントリーを新規作成してページを追加します。

子カテゴリーを作成して階層を分けることもできますが、ブログの下の階層にさらに子ブログを設置することもできます。規模の大きさや用途によってカテゴリーで分けるのかブログで分けるのかを判断していきましょう。
またサイトの構成次第では、カテゴリーを持たないエントリーを用意することもあります。この際でも、カテゴリーがエントリーを内包し、ブログがカテゴリーを内包するような主従関係が逆転することはありません。

テーマについて

テーマ: テンプレート(HTMLファイル)やイメージファイル(画像ファイル)、CSSファイル、JavaScriptファイル等、サイトを構成するファイルを1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsでは、テーマごとにサイトの見た目や機能を設定することができます。

2022年6月現在では、デフォルトのテーマとして「site」「beginner」「utsuwa」「blog」「develop」を用意しています。また、各場合の初期テーマは以下のように設定されています。

a-blog cmsをインストールしている場合：セットアップ時に選択したテーマ
a-blog cms.ioで体験している場合：beginner

テーマを変更するには？

テーマはブログごとに設定します。
テーマを変更、もしくは現在適応されているテーマの確認は、以下の手順で行います。

管理ボックスの [管理ページ] をクリック
サイドメニューの [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリック
コンフィグ一覧内 [テーマ設定] をクリック

テーマ設定画面で「テーマディレクトリ名」という項目に表示されているテーマが現在適応されているテーマです。こちらで任意のテーマを選択し、保存ボタンをクリックすることでテーマの変更ができます。

チュートリアルでは、主にテーマ「beginner」を使います。「テーマディレクトリ名」を「beginner」に設定し、保存をしておきましょう。

ディレクトリー構造について

a-blog cmsサイトの各ページは、複数のテンプレートファイルによって構成されています。

テンプレートファイル: ページを構成するHTMLファイルのことです。しばしば「テンプレート」と省略します。基本的なテンプレートとして、トップページに設定する _top.html 、一覧ページに設定する index.html 、詳細ページに設定する _entry.html があります。

ファイル名先頭のアンダーバーの有無について

a-blog cmsでは _top.html や _entry.html など、テンプレートファイル名の先頭にアンダーバーがつく場合があります。これはファイル名を含んだURLである「https://example.com/top.html」や「https://example.com/index/entry.html」へのアクセスを無効にするためのものです。詳しくは「直接表示させないテンプレートを指定する | a-blog cms developers」をご覧ください。

各テーマにおいて設定されているテンプレートは、テーマ設定画面で確認することができます。「テンプレート選択ファイル（template.yaml）の値を優先する」にチェックがある場合はテンプレート選択ファイル template.yaml 内に書かれた指示通りにテンプレートが適応され、チェックがない場合は管理画面上の入力欄から直接テンプレートを指定することができます。

チェックがある場合に適応されるテンプレート

チェックがない場合に適応されるテンプレート

インストール時には、先ほどのサイトマップに掲載した項目がそれぞれ以下のテンプレートで表示されています。

また各ページにおいて表示されているページのテンプレートは、管理ボックスから確認することができます。例えばトップページの管理ボックスには、「現在表示中のテンプレート：/themes/site2020/_top.html」と表記されています。

ページタイトルの背景画像と説明文を設定する

目標

「スタッフ紹介」一覧ページ内ページタイトル部分に説明文と背景画像を設定しましょう。

解説使用テーマ	beginner

Before

After

初期設定のページタイトルの仕様について

「会社概要」や「製品情報」などの一覧ページには、ページタイトル部分に画像や説明文が表示されるようになっています。しかし新規作成した「スタッフ紹介」の一覧ページには説明文が登録されていません。また背景画像は、画像が未設定の時に表示されるnoimage画像が表示されています。

テーマ「beginner2020」では、これらの説明文や背景画像などはカテゴリーが持つ情報の一部として設定されています。試しに「会社概要」カテゴリーの例を見てみましょう。まずは以下の手順でカテゴリーの設定画面へ移動します。

管理ボックスから [管理ページ] ボタンをクリックする
サイドメニュー内 [カテゴリー] をクリックする
リスト内「会社概要」右側の [変更] ボタンをクリックする
タブを [カスタム設定] に切り替える

上図を見てみると、設定画面に「ページタイトル設定」という項目があるのがわかります。こちらで設定されている背景画像や説明文が、まさしくページタイトルの要素として反映されているものです。

フィールド: ITの分野では、個々の入力項目をしばしば「フィールド」と呼びます。先ほどカテゴリーの入力項目から背景画像と説明文を設定したように、a-blog cmsではエントリー・カテゴリー・ブログに対してそれぞれ「基本設定」「カスタム設定」などのフィールドが設けられています。

カスタムフィールド: a-blog cmsでは、特に「カスタム設定」内の表示を「カスタムフィールド」と呼んでいます。これらの項目は、基本設定とは別にテーマごとに独自に設置できるものです。テーマ「beginner」ではSEO・OGP設定・ページタイトル設定の3項目になっていますが、オリジナルのテーマを作る際はこの限りではありません。; またこのカスタマイズの方法については、チュートリアル「フィールドの入力項目をカスタマイズする①テキストのみ | HTMLとCSSだけでサイトを制作する | ドキュメント | a-blog cms developer」以降で学習していきます。