03_ポートフォリオページのブロックを見てみる

ポートフォリオページに使われているブロックをひとつづつ見ていきます。(概出のものは省いてます。)

PC表示とスマホ表示のキャプチャ画像を用意したので、表示のされ方の違いを確かめることができます。

PC表示のほうに、オレンジで「ブロック」、黄色で「ブロックテンプレート」「カスタムクラス」を入れてあります(設定されている場合のみ)。

PC表示

ブロックをひとつづつ解説

  • トピックリスト」は、トピックツリーをリスト表示してくれるブロックです。ブロックテンプレートに「フラットフィルター」が設定されています。トピックはカテゴリやタグのようなものです。もちろん自分で設定できます。
  • ページリスト」(概出)。このページリストで表示されているのは、プロジェクトページ(全部で6ページ)です。「他のブロックからこのページリストの絞り込みを有効にする」にチェックが入っています。

トピックリストのトピックをクリックすると、そのトピックがついてるページが、ページリストに表示されます。(こうするには少し準備が必要です。後半で解説してます。)

スマホ表示

PC表示:トピックリストをクリックした結果

「トピックリストをクリック」で該当ページをリスト表示するには

ページリストブロックを設置

トピックリストをクリックした結果を表示するページに、ページリストブロックを配置します。

ページリストブロックの設定:他のブロックからこのページリストの絞り込みを有効にする

ページリストブロックの「他のブロックからこのページリストの絞り込みを有効にする」にチェックを入れておきます。ページリストブロックの位置は、表示するページ内ならどこでも大丈夫みたいです。

ページにトピック属性をつける

ページリストで表示させたいページに、トピックリストのトピックを設定しておきます。

ページの属性を設定するには、「ツールバー左上の歯車アイコンをクリック > 属性をクリック」します。何もしていないページでは「名前・作成時間・投稿者・説明文」の入力欄のみが表示されています。

左にずらっと表示されているものの中から「xxトピック」をクリックすると、入力欄に追加されてチェックができるようになります。チェックを入れておきます。(「xxトピック」は自分で作ることができます)

3.トピックツリー.png

属性は、サムネイルやタグなど色々追加できます。

画像の中の、青文字で表示されている「ブログ」「ポートフォリオ」は、属性のセット名です。自分で属性をセットにしておくことができます。

スマホ表示