[虎の巻]BiND Pressのカスタマイズに役立つタグ一覧とレイアウト崩れの対処法

ホームページ作成サービスBiNDupのブログ機能「BiND Press」をすでに多くの方がをご利用いただいているかと思いますが、
便利な機能であるがために通常のブロックとは違い少々複雑な設定となっています。

そのため、レイアウトの変更や修正を行いたい場合少し躊躇することもあったかと思いますが、
BiND Pressの構造的なところを抑えた上で、ブログページのカスタマイズ方法についてご紹介したいと思います。

BiND Pressの基本のカスタマイズ

編集方法

BiND Pressのレイアウトを編集するときは「エディタモードに切替」あるいは「SMタグ編集」で編集する必要があります。スマートモードになっている方はブロックエディタ右上のメニューからどちらかのモードに変更してください。
ここではエディタモードでの編集方法を解説します。

※編集モードを切替える場合は、バックアップを取ることをおすすめします。

編集モードを切替える場合は、バックアップを取るようにしてください

BiND Pressの構成

新規作成したテンプレートや、ブログコーナーを追加した場合は以下のファイルが用意されているかと思いまが、簡単にそれぞれの違いについて解説したいと思います。

• ブログ一覧
• template.list
• template.detail

ブログコーナーのファイル

template.listとtemplate.detailはブログコーナーに紐付くので、コーナーの外には出さないようにしてください。

index（ブログ一覧）

このページ自体は通常のhtmlページです。
中に記事インデックスのブロックパーツが用意されています。
「記事インデックス」とは記事の一覧を表示するためのパーツで、設定に合わせて記事のリストを出力することができます。

主に以下のような設定が可能です。

• 表示させるブログの選択（複数のブログも設定可能）
• 一度に表示する記事の数（全記事の表示または、数制限）
• 表示する記事の順番（新着順・人気順・タイトルの50音順）
• 特定のカテゴリ、タグでの絞り込み
• 新着マークの表示（対象期間の設定も可能）

記事インデックスの編集画面

「記事インデックス」はブロックパーツですので、このページに限らずどのページでも使用可能ですが、
一般的なブログ一覧ページのように例えば、10件目以降の記事を別ページに分割するページネーション（ページ送り）の機能はありません。

template.list

こちらは記事一覧ページのテンプレートファイルになります。
前述の「記事インデックス」とは違い、ブログコーナーに紐付いたブログの記事一覧ページを自動で作成します。
主に自動作成されるページは以下になります。

• 新着記事一覧
• 特定のカテゴリーの記事一覧
• 特定のタグの記事一覧

こちらの場合は「記事インデックス」とは違い、１ページあたりに表示させる件数をこえる記事については、ページネーション（ページ送り）で２ページ移行で表示されます。

template.listの編集画面

こちらはブログコーナーに紐付くので、コーナーの外には出さないようにしてください。

template.detail

こちらは記事ページのテンプレートファイルです。
template.listと同じくブログコーナーに紐付いたブログの記事ページを自動で作成します。

template.detailの編集画面

こちらもブログコーナーに紐付くので、コーナーの外には出さないようにしてください。

記事一覧ページ（template.list）・記事ページ（template.detail）の編集

BiND Pressは専用のコードを使用してレイアウトを構築しています。
基本的には記事のタイトルを表示させる「[%title%]」や、本文を表示させる[%article%]などを組み合わせてレイアウトを構成していきます。
中には一覧ページ専用、記事ページ専用のコードもあります。

レイアウトに合わせて必要な項目（コード）を追加・削除してみてください。
大見出しなどの段落スタイルも併用できます。

BiND Pressのレイアウトの編集

知っておくと便利。基本的なタグ一覧

記事インデックス、一覧ページ（template.list）専用のタグ

一覧ページ（template.list）専用のタグ

記事ページ（template.detail）専用のタグ

レイアウトの修正で試してみたい解決法

前述の通り、BiND Pressは専用のコードを使用して管理されています。
ですのでトラブルを解消するにも基本的にはこのコードを編集する形になりますが、複雑なところもありますのでレイアウトが元々用意されているブロックテンプレートなどを利用する方法をおすすめします。

ブログコーナーを新規作成してみる

編集画面の左上のアイコンからブログコーナーを新規で追加できます。
この時、連動させたいブログを選択してください。選択後ブログコーナーが追加されますが、冒頭で解説した通りデフォルトのファイルセットが新しく用意されますので、何かレイアウトなどでトラブルが起きた場合は一度ブログコーナーから設定し直すと解決しやすいと思います。

ブログコーナーを追加しレイアウトをリセット

ブログパーツ（ブロックテンプレート）を再設定してみる

BiND Pressについても、ブロックテンプレートとして予めいくつかレイアウトのパターンを用意しています。
用意しているのは、記事一覧を出力する「記事インデックス」パーツと、記事ページ、一覧ページで使用できるレイアウトがあります。

• 記事インデックス：記事の一覧を出力するブロックテンプレート
• ブログ記事：記事ページ（template.detail）専用のレイアウト
• 記事リスト：一覧ページ（template.list）専用のレイアウト

ブロックテンプレートでレイアウトをリセット

いかがでしたか？
カスタマイズにチャレンジしても、その解決方法がわからないと不安かと思いますのでまとめてみました。
ぜひこれらの解決法やコードの直接編集も合わせて、色々試してみてください。
BiNDupのブログ機能を詳しく見る