[虎の巻]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

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

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

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

template.listの編集画面

template.listの編集画面

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

template.detail

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

template.detailの編集画面

template.detailの編集画面

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

記事一覧ページ(template.list)・記事ページ(template.detail)の編集

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

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

BiND Pressのレイアウトの編集BiND Pressのレイアウトの編集

BiND Pressのレイアウトの編集

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

[%title%] 「タイトル」に設定した項目を表示します
[%article%] 「本文」に設定した項目を表示します
[%article_short_数字%] 本文を数字の文字数だけ切り出し、末尾に「…」を付与して表示させることができます
[%lead%] 「リード文」に設定した項目を表示します
[%category%] 「カテゴリ」に設定した項目を表示します
[%tags%] 「タグ」に設定した項目を表示します
[%article_date%] 記事の日付を”yyyy/MM/dd HH:mm”形式で表示します
[%article_date_notime%] 記事の日付を”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”形式で表示します

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

[%index_start%]~[%index_end%] このタグに囲まれた部分の項目を、ブログの記事数分繰り返し出力します
[%new%] 「NEW」マークを出力します

一覧ページ(template.list)専用のタグ

[%navi-pagenation%] ページネーション(ページ送り)を出力します

記事ページ(template.detail)専用のタグ

[%link_prev%] 前の記事へのリンクのURLを表示します
[%link_next%] 次の記事へのリンクのURLを表示します
[%list_start%]~[%list_end%] 登録された記事サムネイルを出力します。複数登録がある場合は登録された分表示します

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

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

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

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

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

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

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

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

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

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

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

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • template.list、template.detailのファイルがブログコーナーの中にあるか確認
  • BiND Press専用のコードを追加・削除して好みのレイアウトに変更できる
  • ブログコーナーやブロックテンプレートを再設定してみる

RECOMMEND ARTICLE