1. ようこそa-blog cmsへ
2. ログインするには
3. インストール時のサイトマップについて
4. テーマについて
5. ディレクトリー構造について

---

---

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

---

---

---

---

---

---

「ユーザー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

---

テーマを変更するには？

---

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

---

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

---

---

---

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

---

---

---

---

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」と表記されています。

---

---

サイト内に「スタッフ紹介」という新しいコンテンツを用意し、「スタッフ1」というエントリーを投稿しましょう。

---

---

---

1. 新規作成するエントリーのURLについて
2. ユニットを組み立てて本文を入力する
3. ダイレクト編集を活用しよう
4. ユニット設定でユニットを使いやすくしよう
5. 編集設定から YouTube ユニットを追加しよう

---

---

a-blog cmsでは、各ページにおいて以下のようにURLを定めています。

---

---

URL内のブログコードやカテゴリーコード、エントリーファイル名（エントリーコード）には、それぞれ任意の英数字を設定できます。今回のハンズオンでは、「スタッフ紹介」カテゴリーを作成し、作成したカテゴリー内に「スタッフ1」エントリーを作成します。その際、「スタッフ紹介」のカテゴリーコードを staff 、「スタッフ1」エントリーのエントリーファイル名を staff1.html とします。したがって、新規作成するエントリーのURLは https://example.com/staff/staff1.html となります。

---

新規作成するエントリーの基本設定をする

---

エントリーの新規作成は管理ボックス内にある [エントリー作成] ボタンから行います。

---

---

エントリー作成画面が開いたら、はじめに基本設定を行います。まずはエントリーのステータスとタイトルを設定しましょう。

---

---

---

次にカテゴリーを指定します。今回作成するのは「スタッフ紹介」という新しいコンテンツなので、[追加] をクリックしてカテゴリー名とカテゴリーのコードネームを設定します。

---

---

---

最後にタグを指定します。今回は「営業」「男性」という2つの単語をタグ付けしてみましょう。タグの新規追加は直接入力欄に書き加えます。半角のコンマで区切ることで2つ以上の単語を指定することもできます。

---

---

これで基本設定は完了です。次は日付以下のタブを開いて、詳細設定・関連エントリー設定・SEO設定の項目について見ていきます。

---

詳細設定

---

---

---

---

---

今回のチュートリアルでの設定は以上になりますが、その他にも詳細設定画面からは、公開日時・掲載期限・概要・インデキシング・リンク先URLの設定ができます。

---

---

関連エントリー設定

---

---

その記事に関連するエントリーを検索し、関連するエントリーとして指定することができます。ブログやお知らせの記事など、主に更新頻度が比較的高いコンテンツで活用できる機能です。

---

SEO設定

---

---

a-blog cmsでは、SEO設定欄を入力しなくてもエントリーの作成と同時にタイトルや概要文などのSEO項目が自動的に設定されます。このSEO設定欄は、自動入力される文章と異なるものを設定したい時やサイトマップへの出力を制御する時などに使用するものです。

---

---

基本設定が完了したら本文を入力していきましょう。a-blog cmsでは「ユニット」を組み立てることによって、コンテンツを充実させていきます。

---

ユニット

エントリー内には、テキストや画像など様々なコンテンツが含まれています。a-blog cmsでは、こういったコンテンツの要素を「テキストユニット」「画像・ファイルユニット」など、「ユニット」というブロックで管理しています。テーマ「beginner2020」の初期設定では、テキスト、画像・ファイル、テーブル、地図の計4つのユニット追加ボタンが並んでいます。

---

---

下の図は、「画像・ファイルユニット」「テーブルユニット」「テキストユニット」を使ってコンテンツを組み立てた例です。例のようにユニットを挿入してみましょう。

---

---

ユニットを追加するには？

---

ユニットは下の画像の 3 にある灰色のボックス（以下ユニット追加ボックスと呼びます）内に並ぶボタンをクリックして追加します。ユニットはユニット追加ボックスの直前に追加されます。ユニット追加ボックスは、デフォルトでは編集ページの一番下に配置されていますが下記3通りの方法で移動させることができます。

---

1. ユニット右上にある [+] ボタンをクリックすると、そのユニットの直後に移動
2. ユニットのヘッダーをダブルクリックすると、そのユニットの直後に移動
3. ユニット追加ボックス左上の三本線をマウスオーバーしてボックスを掴み、入れ替えたい位置までドラックし移動

---

---

ユニットを並び替えるには？

---

ユニットを並び替えるには、ユニット左上の三本線をマウスオーバーしてボックスを掴み、入れ替えたい位置までドラックします。または、三本線横の番号を変更することでユニットの並び順を変更します。

---

---

ユニットを組み合わせて記事を完成させたら、保存ボタンを押して公開します。

---

---

以上でチュートリアルの目標が達成できました。

---

ここからは補足として、エントリー編集時に役立つ「ダイレクト編集」と「ユニット設定」、そして新しいユニットを追加する「編集設定」の機能をご紹介します。

---

---

ダイレクト編集

公開画面側から直感的にユニットを編集する機能です。エントリーページを表示した状態で管理ボックスの [ダイレクト編集をONにする] ボタンをクリックすると有効になります。また [ダイレクト編集をOFFにする] の状態でクリックするとダイレクト編集は無効になります。

---

---

---

ダイレクト編集を有効にしている時にユニットをマウスオーバーすると、編集・追加・複製・移動・削除の5つのボタンが表示されます。ここからの変更は表示画面に即座に反映されるため、エントリー編集画面を開く必要はありません。

---

---

ユニット設定画面では、表示するユニットの初期状態を変更することができます。まず以下の手順で設定画面へ移動しましょう。

---

1. 管理ボックスの [管理ページ] をクリック
2. サイドメニュー内 [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリック
3. エントリー内 [ユニット設定] をクリック

---

---

---

---

---

---

---

---

---

---

---

---

---