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

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

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

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

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

こちらはいたって簡単。ブロックテンプレートを適用して終了です。 通常のブロック編集と同様、レイアウトパターンをいくつか用意していますのでお好みのものをご利用ください。BiND Press用のブロックテンプレート 注意点があるとすれば、記事ページには「ブログ記事」、一覧には「記事インデックス」を使用することくらいです。ブログ記事とインデックスブロックの関係についてはこちらをご参照ください。

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

自由にカスタマイズしたい場合も、基本的にはいつもの編集方法とさほど変わりません。 違う点としては、BiND Press専用のコードを使用する必要があります。 とりあえず簡単にご紹介するとこんな感じです。BiND Pressの記事の構造BiND Pressの投稿画面 ご覧の通り、コードがあるので一見難しく見えますが実は表示させたい情報を並べているだけになります。 それぞれのコードが何を表しているかは下記をご確認ください。

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

上記を踏まえて実際に、要素の入れ替えをしてみます。まずは画像の入れ替えです。 スマートモードをご利用の場合はブロックエディタ下部の歯車アイコンより「SMタグ編集」に切り替えてください。記事ページのレイアウトを変更記事ページのレイアウト変更後 もともとメイン画像はタイトルの下にありましたが、最初にメイン画像を見せる形に変更しました。修正した箇所は[%list_start%][%list_end%]の位置を変更しただけです。 このように各コードをひとつの要素と捉えて位置を入れ替えるだけで、レイアウトを自由自在にカスタマイズできます。 なお、こちらは記事ページですが、記事一覧(記事インデックス)も同様にレイアウトのカスタマイズ可能です。

段落スタイルも設定可能

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

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

上記は既存のレイアウトに手を加えただけですが、表示したい情報や消したい情報があれば、コードを追加・削除してお好みの記事ページに変更してみましょう。
[%title%]タイトルを表示
[%article%]記事内容を表示
[%article_short_999%]文字数を指定した記事内容。「999」で指定された文字数分表示
[%lead%]リードを表示
[%list_start%][%list_end%]記事画像の一覧
[%link%][%article_link%]記事ページへのリンク
[%cmt%]記事画像のコメント
[%article_date%]記事の日付。スラッシュ区切り(2018/10/26 17:30)
[%article_date_notime_dot%]記事の日付。時刻なし。ドット区切り(2018.10.26)
[%article_date_notime_wa%]記事の日付。時刻なし。和暦。(2018年10月26日)
[%new:AAA%]Newマークを表示。「AAA」の部分が表示される。(例:[%new:新着%]→新着)
[%category%]カテゴリー一覧を表示
[%tags%]タグ一覧を表示
[%imagesize:M%]使用画像サイズ指定。画像パーツの直前に記述。Mには「thumbnail」「medium」「large」のいずれかを指定可能
[%article_list_start%][%article_list_end%]記事一覧を表示。template.listページ専用。

カスタマイズの応用編

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

サイドエリアを設置する

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

SNSと連携

SNSボタンの設置もいつも通りSYNCから設置するだけです。 シェアボタンは表示しているページのURLをシェアするようになっていますので、BiND Pressだからといって特別な設定は必要ありません。 BiND PressのSNS連携
これまで、見慣れないコードがあることで、BiND Pressの編集に不安を感じていた方も多かったかと思いますが、このように普段の編集と大きく変わりませんので、これを機にオリジナルの記事ページへとどんどんカスタマイズしてみてください。