インデックスブロックで目次を作る

ここでは、トップページにインデックスブロックで記事の目次を作る手順を案内します。

【インデックスブロックとは?】
インデックスブロックとは、ブログの目次一覧を表示するブロックです。
インデックスブロックを設定することで、目次のように対象ブログの各種記事へのリンクを設定可能です。

例えばサイトのトップページにインデックスブロックを作成することで、ブログ記事の最新投稿へのリンクを随時表示させることが可能です。

※エディタモードでの編集をすることで、レイアウトの調整や1ブロックに複数のブログの設定を行うことも可能です。

エディタモードでの編集に限らずスマートモードでの編集も可能です。スマートモードを利用する場合は手順6をご覧ください。手順1~5はエディタモードでの手順となります。

インデックス範囲の開始部分を設定する

トップページにインデックスブロックを設定したいブロックを新規作成し、ブロックエディタ画面を開きます。

右側の「ブログ系パーツ」から「インデックス開始」を選びます。
インデックス開始

ブロックエディタ上に設定されたインデックス開始のアイコンをダブルクリックします。

ブログインデックスブロックの設定画面が表示されました。

出力するブログ情報を設定する

まずはどのブログの目次を表示させるかを選択します。「+」のマークをクリックします。

ブログコーナー一覧の中から、表示させたいブログを選択します。

次に、表示させる記事表示数や、新着記事の設定を行い「OK」をクリックします。

新着記事には「NEW」のマークが表示されます。

インデックス範囲の終了パーツと、出力用のタグを設定する

ブロックエディタに戻り、インデックス終了のパーツを設定します。
インデックス終了のパーツを設定

インデックスブロックでは、開始パーツと終了パーツの間に設定したタグに関するデータが、記事の数だけ繰り返し出力される仕組みです。
開始パーツと終了パーツの間に、出力するデータのタグを設定します。
データのタグを設定

設定可能なタグの種類については、以下を参照してください。

[%title%]
記事エディタで「タイトル」に設定した項目を表示します。

[%lead%]
記事エディタで「リード文」に設定した項目を表示します。

[%article%]
記事エディタで「本文」に設定した項目を表示します。

[%article_short_数字%]
本文を数字の文字数だけ切り出し、末尾に「…」を付与して表示させることができます。

[%category%]
記事エディタで「カテゴリ」に設定した項目を表示します。

[%tags%]
記事エディタで「タグ」に設定した項目を表示します。

[%article_date%]
記事の日付を”yyyy/MM/dd HH:mm”形式で表示します。

[%article_date_notime%]
記事の日付を”yyyy/MM/dd”形式で表示します。

[%article_date_wa%]
記事の日付を”yyyy年MM月dd日 HH時mm分”形式で表示します。

[%article_date_notime_wa%]
記事の日付を”yyyy年MM月dd日”形式で表示します。

[%article_date_dot%]
記事の日付を”yyyy.MM.dd HH:mm”形式で表示します。

[%article_date_notime_dot%]
記事の日付を”yyyy.MM.dd”形式で表示します。

[%new%]
「NEW」マーク表示用のspanタグを出力します。(記事本文も含まれたインデックスブロックでは出力されません。)

[%link%]
記事へのリンクを行います。
※リンクの設定手順については、後述の「4.リンク設定について」をご確認ください。

ここでは例として、
[%title%]
[%lead%]
[%article_short_30%]
[%article_date%]
を設定します。
例

表示ページには、「記事のタイトル」、「リード文」、「本文の最初の30文字」、「投稿の日付」が、投稿した記事の数だけ出力されます。

インデックスの開始パーツ、終了パーツの間に記載したタグに関するデータのみ出力されます。
タグを入れ忘れると、該当のブロックには何も出力されませんのでご注意ください。

リンク設定について

インデックスブロック内に表示された記事に「該当記事へのリンク」を設定するにはリンクの設定も必要です。

リンクを設定したいタグをリンクパーツにし、
「リンク先」に、[%link%]を設定します。(※ [%article_link%] でも同様の設定が可能です。)
例として、[%title%]を出力するタグをリンクパーツにし、リンク先に[%link%]を設定しました。
リンクを設定

記事タイトルに、該当記事へのリンクが設定されました。

1ブロックに複数設定する

インデックスブロックを1ブロック内に複数設定することも可能です。
例として、ブロックを分割線で2カラムに分けた状態で設定し、それぞれのカラム内にインデックスブロックを設定します。
1ブロックに複数設定

サイト側では、2つのブログが1ブロック内に出力されました。

スマートモードで編集する場合

トップページにインデックスブロックを設定したいブロックを新規作成し、ブロックエディタ画面を開いた後、
左下の「ブロックテンプレート」の「ブログ」カテゴリーから「記事インデックス」タイプのブロックテンプレートを選択します。

「インデックス開始」をダブルクリックします。
インデックス開始

設定するブログなどの情報を設定し、適用を行います。
適用

RSSフィードの設定について

ブログ機能ではインデックスブロックのRSSフィードの出力を行なっていただくことが可能です。
ブログインデックス画面にて歯車のマークをクリックします。

RSSの「出力する」にチェックを入れた状態で、サイトのアップロードを行います。

「サイトURL/対象のブログコーナーのディレクトリ名/rss.xml」
にて、RSSフィードを取得することが可能です。