BiND Press｜記事ページの基本のカスタマイズ講座

コンテンツマーケティングに最適なブログの役割

デザイナーのオモトです。
ブログ記事は、しっかり運用していると閲覧者にとってトップページより先にサイトとの接点になる可能性が高いページになりえるので、デザインも気合いを入れたいですよね。
今回は、ホームページ作成サービス「BiNDup」のブログ機能BiND Pressで作った記事のデザインカスタマイズ方法について解説したいと思います。
分かってしまえば簡単なので、ぜひ覚えてみてください。

サンプルサイト

サンプルサイト

サイトを印象付けるブログページのデザインテクニック

ブログページから流入することを考えて、どんな記事ページがいまトレンドかを紹介します。

マガジンスタイルのWebトレンド 2021年版

以前は、サイドメニューがあるデザインが優勢でしたが、今は集中の妨げになるような要素は省き、テキストは大きく、じっくりと文章を読んでもらえるような作りが人気です。
なのでサンプルもそのようなニュアンスが伝わるデザインにしたいと思います。

マガジンスタイルに合うWebフォント選び

Googleフォントの日本語フォントも日々増え続けており、紙媒体で定番のフォントをそのままwebでも使うという形がどんどんと当たり前になってきました。
BiNDupでは、Googleフォントの他にFontPlusのWebフォントを簡単に使う事ができます。せっかくなので、紙媒体でも定番の「TsukuGoPro」を使ってみたいと思います。

BiND Pressの記事ページをデザインする方法

1.「template.detail」とは

template.detailが、ブログ記事のページにあたります。[%~%]で囲まれたタグ部分にテキストや画像が出力され、記事ページが生成されるしくみになっています。デザイン用のページのため、ページ自体は非公開のままでOKです。
今回は、グローバルナビは使わないため削除しています。

2.「template.detail」の編集方法

まず、順番や画像の縮尺を変えたいので、[%%]が入っているブロックを開きます。
このブロックはスマートモード状態では編集できないようになっているので、左下の歯車から「SMタグ編集」を開きます。
すると下記のような状態になると思います。

いつものBiNDの編集と同じように、コピーペーストなどして順番を入れ替えていきます。

このような感じで、画像・カテゴリ・投稿日を上に移動させました。出力するとこのようになります。

※画像は必ず、[%list_start%]~[%list_end%]で囲んで下さい。

投稿日の表示の仕方は選ぶ事が出来ます。サポートサイトをご覧下さい。

3.記事の画像のサイズの変更

先ほどと同じように、SMタグで編集をし、画像をクリック。さらに編集をクリックし、SiGNで開きます。

画像の画角を1275*750に変更します。保存・適用をクリックすると、ページに反映され、出力される画像の画角も変更されます。

4.ブログ記事用のDressを編集

ブログ記事だけにデザイン（css）を適用させたい場合は、適用範囲を「ブログ記事」にして編集します。
文字サイズと余白を整えて、完成です。
最終的に、ページタイトルにも、「筑紫ゴシック Pro E」を適用しました。

サンプルサイト

サンプルのサイトデータの配布

いかがでしたでしょうか！難しそうと思った方も、サンプルサイトを実際に開いてぜひ使ってみてくださいね。
今回作成したサンプルのサイトデータを以下より配布しますので、参考にしてください。