レベル3ページタイトルの背景画像と説明文を設定する
カテゴリー
ブログ
フィールド
カスタムフィールド
目標
「スタッフ紹介」一覧ページ内ページタイトル部分に説明文と背景画像を設定しましょう。
| 解説使用テーマ | beginner2020 |
|---|
Before
After
目次
初期設定のページタイトルの仕様について
「会社概要」や「製品情報」などの一覧ページには、ページタイトル部分に画像や説明文が表示されるようになっています。しかし新規作成した「スタッフ紹介」の一覧ページには説明文が登録されていません。また背景画像は、画像が未設定の時に表示されるnoimage画像が表示されています。
テーマ「beginner2020」では、これらの説明文や背景画像などはカテゴリーが持つ情報の一部として設定されています。試しに「会社概要」カテゴリーの例を見てみましょう。まずは以下の手順でカテゴリーの設定画面へ移動します。
- 管理ボックスから [管理ページ] ボタンをクリックする
- サイドメニュー内 [カテゴリー] をクリックする
- リスト内「会社概要」右側の [変更] ボタンをクリックする
- タブを [カスタム設定] に切り替える
上図を見てみると、設定画面に「ページタイトル設定」という項目があるのがわかります。こちらで設定されている背景画像や説明文が、まさしくページタイトルの要素として反映されているものです。
- フィールド
- ITの分野では、個々の入力項目をしばしば「フィールド」と呼びます。先ほどカテゴリーの入力項目から背景画像と説明文を設定したように、a-blog cmsではエントリー・カテゴリー・ブログに対してそれぞれ「基本設定」「カスタム設定」などのフィールドが設けられています。
- カスタムフィールド
- a-blog cmsでは、特に「カスタム設定」内の表示を「カスタムフィールド」と呼んでいます。これらの項目は、基本設定とは別にテーマごとに独自に設置できるものです。テーマ「beginner2018」ではSEO・OGP設定・ページタイトル設定の3項目になっていますが、オリジナルのテーマを作る際はこの限りではありません。
- またこのカスタマイズの方法については、チュートリアル「フィールドの入力項目をカスタマイズする①テキストのみ | HTMLとCSSだけでサイトを制作する | ドキュメント | a-blog cms developer」以降で学習していきます。
エントリーのカスタムフィールド
カテゴリーのカスタムフィールド
ブログのカスタムフィールド
「スタッフ紹介」一覧ページのページタイトルに背景画像と説明文を設定する
以上を踏まえて、「スタッフ紹介」一覧ページのページタイトルを編集していきましょう。ページタイトル部分をマウスオーバーすると、右上に [編集] ボタンが表示されます。
- ボタンをクリックしてカテゴリーのカスタムフィールドを開き、背景画像と説明文を設定しましょう。
- 設定をしたら、画面上部の「保存」ボタンを押します。
以上でハンズオンの目標は達成です。
おまけ：サイトタイトルを変更する
ブログのカスタムフィールドでは、カテゴリーと同じ要領でブログ全体に関する設定ができます。以下の手順でブログ管理の設定画面へ移動し、サイトタイトルを変更してみましょう。
- 管理ボックスから [管理ページ] ボタンをクリックする
- サイドメニュー内 [ブログ] をクリックする
- タブを [カスタム設定] に切り替える
| サイトタイトル | 株式会社〇〇 |
|---|
「サイト設定 基本」内にあるサイトタイトルを編集して、[保存] ボタンをクリックします。
以上でサイトタイトルが変更できました。
他にもブログのカスタムフィールドは、Google Analytics やSNSアカウントなど、外部サービス情報の登録にも最適です。サイトを運営していく上で重要な資産を管理する場所にもなるので、様々なアイデアを出して設計してみてくださいね。