特集ページ作りにオススメ！ ブログ記事リスト機能の基本操作を解説

前回はBiNDupのブログ機能「BiND Press2」の基本的な使い方を説明しました。今回はその続編で、カテゴリーやタグごとの記事リストページの編集について説明いたします。

今回の目標

新しいBiND Press2には、記事ごとに「カテゴリー」と「タグ」を設定する機能が用意されていて、それらを設定した記事を、カテゴリー／タグごとにまとめてリスト表示したページを作成することができます。

この「カテゴリー」や「タグ」の記事リストを使えば、特定のテーマに沿った特集ページを簡単に作ることができます。例えば、企業のリクルートサイトで「福利厚生」のタグをつけた記事を投稿していき、まとまったところで「福利厚生」タグを集めた記事リストページを作れば、情報を簡単に整理可能です。同じテーマの新しい記事に共通のカテゴリー／タグをつけて投稿すれば、自動で追加されるので、更新作業の効率もよくなります。

今回は、そうしたブログ記事リストページを編集したいと思います。

リストページを確認・編集

前回、新規にブログを組み込んだサイトで引き続き、作業をしていきます。

サイトエディタから「template.list」を選択して編集

まずサイトエディタの左側にあるサイトマップのブログコーナーの中から「template.list」を選択します。

BiND Pressのブログの記事、カテゴリとタグ、記事リスト、およびtemplate.listの関係について、詳しくは以下の記事を参照してください。

新BiND Press：カテゴリの記事一覧ページの仕組みと使い方

ここでは、template.listの編集手順を中心に説明をしていきます。

テンプレートの初期状態では、template.listのヘッダーエリアおよびフッターエリアは仮のものです。他のページに揃えるなどして整えましょう。この作業は、通常のBiNDのページと同じ手順で行います。ページレイアウトを変更してサイドエリアを追加したりできるのも通常のページと同様に可能です。

記事リストのブロックを開く

次に記事リストのブロックを編集します。記事リスト部分は、BiND Press専用のコード「BPタグ」で記述されていて、その記述に応じてカテゴリー／タグごとに自動で生成される仕組みになっています。

それらのカスタマイズするには、BPタグを正しく記述すればできるのですが、BPタグを誤って消してしまうと記事リストが表示されなくなったりするので注意が必要です。そこで初心者の方にお勧めするのが、次に説明するブロックテンプレートを使って変更する方法。これは、前回の記事とインデックス（新着記事一覧）の編集と同じです。

10分で完了! サイトに新規にブログを組み込む基本の手順

ちなみに、記事を一覧で表示するということで、記事リストのブロックと、インデックスのブロックは似た構造になっています。この２つの違いは、インデックスページがブログの記事すべてを対象にして見出しなどを更新時期に応じて一覧表示するのに対して、記事リストページはカテゴリーやタグによって記事を絞り込んで一覧表示にする点です。

ブロックテンプレートで記事リストを変更

記事リストのブロックをブロックエディタで開き、ブロックテンプレートの「ブログ」から「ブログ記事リスト１」を選択。「適用」ボタンをクリックして配置します。

これで、記事リストブロックが変更されました。

記事リストページを表示して確認

「template.list」の編集が終わったら、次は記事リストページをプレビューして確認してみましょう。

サイトエディタでサイトを再構築

サイトエディタで「サイト全体の再構築」を実行してから「プレビュー」をクリック。全ページのプレビューを表示して確認しましょう。

記事リストページへアクセスする方法

記事リストページへアクセスする方法の１つは、記事の下にあるリンクボタンをクリックして開きます。

記事リストページのURLは、ブログコーナーのディレクトリ下になります。カテゴリーは、カテゴリー作成時に設定した「URLリンク時の名前」がHTMLファイル名になります。一方、タグは初期状態ではタグの文字列がHTMLファイル名となって自動的に生成されます。これらのURLへのリンクを作成してアクセスしてもOKです。

記事リストページのURLをあとから編集する方法

自動生成されたページのURLは変更可能です。BiND Pressの記事エディタで「ブログ設定」をクリックして設定画面を開き、画面上部の「カテゴリー」タブや「タグ」タブをクリックします。

「カテゴリー」タブでは、カテゴリー名を選択してから「編集」ボタンをクリックすると、「カテゴリーの名前」と「URLリンク時の名前」が変更できます。

「タグ」タブでは、設定したタグが一覧表示されています。各タグの右側にある鉛筆アイコンをクリックすると、タグそのものと、自動生成される際のURLが変更可能になります。

プレビューで確認

設定などを変更したら、忘れずサイトエディタで「サイト全体の再構築」を実行してからサイト全体をプレビューして確認しましょう。

以上でリストページを編集する手順の完了です。前編と合わせて実践していただけば、BiND Pressの基本的な操作をご理解いただけたのではないでしょうか。

さらなるカスタマイズに挑戦

最後にBPタグについて、すこしご説明したいと思います。まずBPタグを編集する際は、バックアップとして、ページの複製を作っておくことをお勧めします。

BPタグの種類を把握すれば、テンプレートの記述から追加したり削除してカスタマイズできます。詳細については、下の記事の中にある「自在にレイアウトを変更したい」項目を参照してください。

新BiND Pressの定形デザインをカスタマイズする2つの方法

さらにBPタグの便利なところは、通常のテキストを同様にブロックエディタでスタイルをカスタマイズできる点です。

またブロックエディタの「設定」タブで、ブロックレイアウトやカラム数を変更することもできます。

もし編集に失敗してレイアウトが崩れたり、記事リストが表示されなくなってしまったら、複製したページからブロックをコピーしてやり直しましょう。

BPタグは、投稿ページやインデックスページの編集にも使えますので、使い方を覚えれば、BiND Pressでのカスタマイズの幅が大きく広がります。テンプレートに飽きたという人は、ぜひチャレンジしてみてください。

BiND Pressについて詳しくみる