記事レイアウトをタグで編集する

template.detail(記事ページのテンプレート)やtemplate.list(カテゴリやタグごとでソートされたページ)にブログ関連のタグを組み込み、サイトを自動出力することが可能です。

BiND Press専用のタグは、ビルボードエリア、メインエリアにのみ設定が可能です。ヘッダーやフッターでは動作しませんので、ご注意ください。

高度な内容となりサポート外の範囲とさせていただいております。念のためサイトデータはあらかじめ複製しバックアップをお取りください。

2019年5月23日提供のアップデーター v11.0.8以降、設定可能なタグが追加されました。
詳しくは後述のタグ一覧より、赤字のタグをご確認ください。

2018年9月のBiNDupリリース以降、BiND PressはBiNDpress2としてバージョンアップしました。
既存のBiND Pressをプロパティ設定で「BiND press2」に切り替えることで、新しい「BiND press2」をご利用いただけます。

本記事の内容は、BiND Press2でも同様です。

ブログコーナー内に生成される「template.detail」内の ブログ表示用の記事や、ブログの目次表示用のインデックスブロックは
エディタモードに切り替え、本記事で案内するタグを組み込むことで独自のデザインを行うことが可能です。

ブロックエディタを開く

編集したいブロックを開き、エディタモードに変換します。
記事レイアウトをタグで編集する
■記事タイプのブロックの場合
記事レイアウトをタグで編集する
■インデックスタイプのブロックの場合
記事レイアウトをタグで編集する
ブロック内に、下記の情報を記載することでブログ用ブロックの編集が行えます。

【記事タイプのブロック/インデックスタイプのブロック共通のタグ】
[%title%]:記事エディタで「タイトル」に設定した項目を表示します。
[%article%]:記事エディタで「本文」に設定した項目を表示します。
[%article_short_数字%]:本文を数字の文字数だけ切り出し、末尾に「…」を付与して表示させることができます。
[%lead%]:記事エディタで「リード文」に設定した項目を表示します。
[%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”形式で表示します。

【記事タイプのブロックで利用可能なタグ】
[%list_start%]~ [%list_end%]画像パーツを表示するには、このタグで画像パーツを囲む必要があります。
※画像パーツと[%list_start%]~ [%list_end%]はセットのタグとなります。画像パーツ、または[%list_start%]~ [%list_end%]を削除すると、正常に記事が出力されませんのでご注意ください。

[%link_prev%]前の記事へのリンクを設定可能です。
[%link_next%]次の記事へのリンクを設定可能です。

次の記事、前の記事へのリンク設定は、リンクパーツを作成し、その中で設定を行います。
詳しくはこちらを参照してください。

【インデックスタイプのブロックのみで利用可能なタグ】
[%index_start%]~[%index_end%]:このタグに囲まれた部分に、指定された対象ブログの記事数分繰り返し出力します。
[%new%]:「NEW」マーク表示用のspanタグを出力します。

■アップデーター v11.0.8以降追加
インデックスタイプのブロックでは、ページ読み込み時に通信状態によっては一瞬元のタグが表示されますが、カスタムタグパーツでclass 「c-blog-hide」で囲んだ記述をすることで、元のタグの表示をされないようにすることが可能です。
設定例:記事レイアウトをタグで編集する

【画像パーツ内】
[%link%]:画像パーツ内のリンク欄に記載すると、記事エディタ画面でリンク先に入力した値が挿入されます。
[%comment%] :画像パーツ内のコメント欄に記載すると、記事エディタ画面でキャプションとして入力した値が挿入されます。

【リンクパーツ内】
リンクパーツ内のテキスト欄に[%title%]、[%lead%]、[%article%]、[%article_short_数字%]が入力可能です。

【template.list内】
[%navi-pagenation%] リストページにページネーションの設定が可能です。
ページネーションとは、記事数が多い場合に、複数のページにリストページを分割し表示させることができる機能です。
15記事までしか1リストページには表示されませんが、ページネーションの設定を行うことで、
16記事以上が存在する場合、2ページ目を「次のページ」として表示させることができます。
こちらのタグは、メインメリア内にて、記事に関するタグを設定されているブロック以外の個所に設定します。
ページネーション
■アップデーター v11.0.8以降追加
[%article_short_数字%]:本文を数字の文字数だけ切り出し、末尾に「…」を付与して表示させることができます。
[%article_list_size:数字%] :[%article_list_start%]の直後に挿入することで、入力した件数まで、1ページに表示させる記事を設定することが可能です。(※デフォルトは15件までの表示です。)

なお、通常ブログコーナー内のページタイトルには、全記事がtemplate.detailの「ページ設定」のページタイトルが反映されますが、該当箇所を[BD:blog_title] と記述することで、記事ごとのページタイトルのソースに反映させることが可能です。