新BiND Pressの定形デザインをカスタマイズする2つの方法

みなさん今お使いのBiND Pressはデフォルトのままでしょうか？
BiND Pressの仕組みについては、こちらで解説させていただきましたが、今回は記事ページなどのカスタマイズ方法についてご紹介します。

２種類の方法からお試しください

BiND Pressは、サイトにCMSが組み込まれることになるので表示が少し特殊ですが、レイアウトのカスタマイズは通常のブロックと同じように行うことができます。
ざっくり２種類の方法がありますので、状況に合わせて活用ください。

• 手っ取り早くレイアウトを変更したい
• 自在にレイアウトを変更したい

手っ取り早くレイアウトを変更したい - ブロックテンプレートを利用する

こちらはいたって簡単。ブロックテンプレートを適用して終了です。
通常のブロック編集と同様、レイアウトパターンをいくつか用意していますのでお好みのものをご利用ください。

注意点があるとすれば、記事ページには「ブログ記事」、一覧には「記事インデックス」を使用することくらいです。ブログ記事とインデックスブロックの関係についてはこちらをご参照ください。

自在にレイアウトを変更したい

自由にカスタマイズしたい場合も、基本的にはいつもの編集方法とさほど変わりません。
違う点としては、BiND Press専用のコードを使用する必要があります。
とりあえず簡単にご紹介するとこんな感じです。

ご覧の通り、コードがあるので一見難しく見えますが実は表示させたい情報を並べているだけになります。
それぞれのコードが何を表しているかは下記をご確認ください。

構成をカスタマイズしてみる

上記を踏まえて実際に、要素の入れ替えをしてみます。まずは画像の入れ替えです。
スマートモードをご利用の場合はブロックエディタ下部の歯車アイコンより「SMタグ編集」に切り替えてください。

もともとメイン画像はタイトルの下にありましたが、最初にメイン画像を見せる形に変更しました。修正した箇所は[%list_start%][%list_end%]の位置を変更しただけです。
このように各コードをひとつの要素と捉えて位置を入れ替えるだけで、レイアウトを自由自在にカスタマイズできます。
なお、こちらは記事ページですが、記事一覧（記事インデックス）も同様にレイアウトのカスタマイズ可能です。

段落スタイルも設定可能

専用のコードを使う意外は通常のブロック編集と変わらないので、大見出しや囲みといった段落スタイルも使用することができます。

必要があればコードを追加

上記は既存のレイアウトに手を加えただけですが、表示したい情報や消したい情報があれば、コードを追加・削除してお好みの記事ページに変更してみましょう。

カスタマイズの応用編

ここまで何度かご説明した通り、基本的には普段のBiNDupのブロック編集と変わりありませんので、ページ全体のレイアウトなど記事以外の部分も普段通りに編集することができます。
少し一般的なブログっぽい体裁にカスタマイズしてみたいと思います。

サイドエリアを設置する

編集画面の右上アイコンまたは、プロパティ設定の「ページレイアウト」からサイド付きのものを選択。

SNSと連携

SNSボタンの設置もいつも通りSYNCから設置するだけです。
シェアボタンは表示しているページのURLをシェアするようになっていますので、BiND Pressだからといって特別な設定は必要ありません。

これまで、見慣れないコードがあることで、BiND Pressの編集に不安を感じていた方も多かったかと思いますが、このように普段の編集と大きく変わりませんので、これを機にオリジナルの記事ページへとどんどんカスタマイズしてみてください。