---

「スタッフ紹介」というコンテンツをグローバルナビゲーションに表示しましょう。

---

---

1. モジュールについて
2. グローバルナビゲーションの表示設定を変更する
3. クイックサーチを活用しよう

---

---

モジュール

ブラウザ上から更新できる部分には、「モジュール」と呼ばれるパーツが表示用テンプレートのHTMLファイルに貼り付けられています。モジュールを使うことで a-blog cms に登録した様々なデータを処理/表示することができ、基本的にモジュールを使い動的なサイトを制作していきます。例えばテーマ「site」のトップページでは、「ナビゲーションモジュール」「エントリーヘッドラインモジュール」「エントリーサマリーモジュール」などが使われています。

---

---

サイトを制作する際は、既にa-blog cmsが用意しているモジュールの中から最適なものを組み合わせ、HTMLやCSSで独自にスタイルを調整していきます。

---

他にもモジュールには様々な種類があり、それぞれのモジュールはその役割ごとにグループ分けされています。一番大きな括りは、テンプレートを組み立てるためのGETモジュール、サーバーにデータを送信するためのPOSTモジュールです。

---

---

さらにGETモジュールは、ビルトインモジュール・フィールドモジュール・タッチモジュールの3種類に、POSTモジュールはPOST_2GETモジュール・ダウンロードモジュールの2種類に分けられます。

---

今回のハンズオンで作業していくナビゲーションモジュールはビルトインモジュールの1つです。これらのモジュールの区分は少々発展的な内容になるため、詳しくは以下の関連記事をご覧ください。なお、今回のチュートリアルについてはこれらの区分を理解していなくても進められるようになっています。

---

• ビルトインモジュール | リファレンス | ドキュメント | a-blog cms developer
• タッチモジュール | ドキュメント | a-blog cms developer
• フィールドモジュール | ドキュメント | a-blog cms developer
• モジュール | ドキュメント | a-blog cms developer

---

---

それでは、グローバルナビゲーションに「スタッフ紹介」というコンテンツを追加していきましょう。以下の手順でモジュールの表示設定画面へ移動します。

---

1. ログインした状態でグローバルナビゲーションモジュールをマウスオーバーする
2. 右上に表示される [モジュール] というボタンをクリックする

---

---

モジュールの表示設定画面が表示されました。続けて「採用情報」の右側にある [追加] ボタンをクリックし、新しく設定された入力欄にスタッフ紹介のラベルとURLの情報を入力していきます。

---

---

---

URL欄は、a-blog cmsのグローバル変数を使った方法で記述しています。

---

グローバル変数

a-blog cms側で特定の情報に変換できる文字列をグローバル変数といいます。％{変数}の形式で書かれ、例えば「%{HOME_URL}staff/」の文字列は、a-blog cmsによって「https://example.com/staff/」と解釈されます。

URLなどをグローバル変数で指定することのメリットは、ドメインを変更した時などに内部リンクが自動修正されることです。そのため、a-blog cms内でリンクのパスなどを記述する際は、一般的にグローバル変数を使うことが推奨されています。

---

以上でグローバルナビゲーションの表示設定が変更できました。画面の右上にある、青い「保存」ボタンを押して設定を保存します。トップページで表示を確認すると、「スタッフ紹介」のコンテンツが追加されているのがわかります。

---

---

以上でチュートリアルの目標は達成です。

---

---

補足としてモジュールやグローバル変数への理解を深めるのに役立つ「クイックサーチ」という機能をご紹介します。

---

クイックサーチ

a-blog cmsが用意するモジュールのスニペットやグローバル変数を、管理ページを通さずに素早く検索することができる機能です。Macでは command+K 、Windowsでは Ctrl+k を押すことで、ログイン中であればどのページにいても起動することができます。

---

---

今回学習した「モジュール」や「グローバル変数」のパターンはそれぞれ数多く用意されています。目的に合ったものを効率よく探し出すために、是非クリックサーチを積極的に取り入れていきましょう。

---

---

---

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

---

---

1. 初期設定のページタイトルの仕様について
2. 「スタッフ紹介」一覧ページのページタイトルに背景画像と説明文を設定する
3. おまけ：サイトタイトルを変更する

---

---

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

---

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

---

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

---

---

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

---

フィールド

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

---

---

カスタムフィールド

a-blog cmsでは、特に「カスタム設定」内の表示を「カスタムフィールド」と呼んでいます。これらの項目は、基本設定とは別にテーマごとに独自に設置できるものです。テーマ「beginner」ではSEO・OGP設定・ページタイトル設定の3項目になっていますが、オリジナルのテーマを作る際はこの限りではありません。

またこのカスタマイズの方法については、チュートリアル「フィールドの入力項目をカスタマイズする①テキストのみ | HTMLとCSSだけでサイトを制作する | ドキュメント | a-blog cms developer」以降で学習していきます。

---

---

---

---

---

以上を踏まえて、「スタッフ紹介」一覧ページのページタイトルを編集していきましょう。ページタイトル部分をマウスオーバーすると、右上に [編集] ボタンが表示されます。

---

---

1. ボタンをクリックしてカテゴリーのカスタムフィールドを開き、背景画像と説明文を設定しましょう。
2. 設定をしたら、画面上部の「保存」ボタンを押します。

---

---

---

以上でハンズオンの目標は達成です。

---

---

ブログのカスタムフィールドでは、カテゴリーと同じ要領でブログ全体に関する設定ができます。以下の手順でブログ管理の設定画面へ移動し、サイトタイトルを変更してみましょう。

---

1. 管理ボックスから [管理ページ] ボタンをクリックする
2. サイドメニュー内 [ブログ] をクリックする
3. タブを [カスタム設定] に切り替える

---

---

---

「サイト設定 基本」内にあるサイトタイトルを編集して、[保存] ボタンをクリックします。

---

以上でサイトタイトルが変更できました。

---

---

他にもブログのカスタムフィールドは、Google Analytics やSNSアカウントなど、外部サービス情報の登録にも最適です。サイトを運営していく上で重要な資産を管理する場所にもなるので、様々なアイデアを出して設計してみてくださいね。