レベル1エントリーを投稿する

エントリー

ユニット

ユニット設定

目標

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

解説使用テーマ	beginner2020

Before

After

使用素材について

チュートリアルの課題で使用する画像は、下のzipファイルよりダウンロードしてご利用ください。

チュートリアル課題用画像

新規作成するエントリーのURLについて

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

トップページ	https://example.com/
一覧ページ	https://example.com/ブログコード/カテゴリーコード/
詳細ページ	https://example.com/ブログコード/カテゴリーコード/エントリーファイル名

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

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

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

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

ステータス	公開
タイトル	スタッフ1

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

カテゴリー名	スタッフ紹介
コードネーム	staff

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

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

詳細設定

詳細設定欄からは、エントリー毎にURLに表示するエントリーファイル名（エントリーコード）「任意の英数字.html」を指定することができます。今回のハンズオンでは staff1.html と設定します。

ファイル名	staff1.html

以上の作業をもってエントリーのURLを https://example.com/staff/staff1.html に設定することができました。

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

公開日時	あらかじめ設定した時間になると記事が自動的に公開されます
掲載期限	あらかじめ設定した時間になると記事が自動的に非公開になります
概要	一覧ページで表示する本文の範囲を決めることができます
インデキシング	チェックを外すと一覧ページにエントリーがリストされない設定になります
リンク先URL	別のページのリンク先を設定することで、エントリーにアクセスがあった際に対象のページへ誘導することができます

SEO設定

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

ユニットを組み立てて本文を入力する

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

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

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

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

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

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

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

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

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

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

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

ダイレクト編集を活用しよう

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

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

ユニット設定でユニットを使いやすくしよう

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

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

例えば画像ユニットのデフォルトの配置は「おまかせ」となっていますが、これを「左」に変更したい場合は、このユニット設定画面から任意の項目を選択することで仕様を切り替えることができます。

特に画像の大きさは、サイトのパフォーマンスにも関わる大事な項目です。デフォルトでは「そのまま」となっていますが、ユニット設定であらかじめ大きさを指定しておきましょう。

編集設定から YouTube ユニットを追加しよう

a-blog cms では、デフォルトで以下のユニットを用意しています。

テキストユニット
画像ユニット
テーブルユニット
ファイルユニット
標準マップユニット
Googleマップユニット
Yahoo!地図ユニット
ビデオユニット
画像URLユニット
引用ユニット
メディアユニット
リッチエディター
改ページユニット
モジュールユニット
カスタムユニット

しかし現時点では、以下のユニットしか使えません。

このボックスに表示されていないデフォルトのユニットについては、編集設定画面より追加することができます。例として、「YouTube」と名付けたビデオユニットを設置してみましょう。

まずは以下の手順で編集設定画面へ移動します。

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

編集設定画面の「ユニット追加ボタン」内 [追加] ボタンをクリックし、モードを「ビデオ」ラベルを「YouTube」として保存します。

画面上部の「保存」ボタンを押して保存してください。これで設定は完了です。試しにエントリー作成画面を表示すると、「製品スペック」の右側に「YouTube」のボタンが追加されていることがわかります。またこのボタンをクリックすると、a-blog cms が用意しているビデオユニットが表示されます。

動画を挿入するには、このユニットの「Video ID」で動画のIDを、「サイズ」で表示サイズを指定します。

以上でエントリー内にYouTubeの動画が表示できました。今回は YouTube を挿入する想定でラベルを設定しましたが、ビデオユニットでは Video ID が作成できる動画コンテンツであれば動画が指定できるようになっています。他にもデフォルトで様々なユニットを用意していますので、必要に応じてカスタマイズしてみてくださいね。