こんにちは！デザイナーのオモトです！
ブログを運営していると、最新の記事だけ目立たせたいなと思うことってありますよね。
今回は、最初のブログ記事だけを目立たせるレイアウトにカスタマイズする方法をお教えします！
やり方としては、
- 新しいBiND Pressの設定をちょっといじるだけで可能なもの
- 新しいDressをいじるもの（ちょっと難しい）
の２つの方法をご紹介！
設定方法がわからなくても、ダウンロードデータを用意しているのでご安心を。
1.新しいPressを使う方法～某ブログ雑誌風
それぞれのブログ記事に飛ばすための、目次（インデックス）を作るとき、
１つ目の記事の目次を大きく見せて、それ以降の記事を小さく見せるパターンを紹介します。
テンプレートは、FUTURE JOURNALを使用しています。
1.下準備
今あるメインビジュアル・キャッチを削除、インデックスブロックを複製します。
2.上のブロック：ブロックを変更
ブロックを編集をクリックし、「設定」タブの段数を「１段」に変更します。
すると、記事がズラッと縦１列表示なります。（プレビューの表示に時間がかかるので注意）
3.上のブロック：ブログ設定を変更
ブロックを編集をクリックし、インデックスパーツをクリック（１）。右側のブログ設定をクリック（２）し、「表示件数を制限」を選択し、数値を「１」件に変更します。
これで記事が１つしか表示されなくなりました。ですが、下のブロックの最初にも同じ内容の記事が表示されてしまっているので、次の手順でそれを調整します。
4. 下のブロック：ブログ設定を変更
下のブロックの、ブログ設定画面を開き、「2」件目から表示に設定します。
これで完成です！
完成イメージは、下のブロックを３段に変更・画像の高さを狭めて、画像が大きく広がっている印象を和らげました。
上記以外にも最初の2件だけ大きく見せて、3件目から小さくといったレイアウトも可能です。この「〇件目から表示」が選べるようになったことで、ブログレイアウトの幅が広がりました。
2.新しいDressを使う方法～デジタルステージのTOPページ風
デジタルステージのトップページにあるニュース部分は、実はBiND Pressを使っています。
この新着情報エリア（参考）のように、最初の記事だけ少し大きめに見せるレイアウトのアレンジを紹介します。
これはDressを使って、最初の記事の画像だけを大きくします。
お手本では、目次・４段・カラム間の幅を１％にしたデータを使いました。
「目次＞カラム」に横幅を設定
Dressを開き、「ラベル表示」の横にある矢印をクリックして、「ブロックスタイル」に変更します。（１）
すると、左側のプレビューエリアのラベルが変化しますので、「目次ブロック」というラベルをクリックします。（２）すると詳細デザインタブに遷移しますので、「項目を追加」をクリック。
「カラム」の選択肢から「カラム」を選びます。（３）
「スタイルに追加」ボタンをクリックし（４）、幅をクリックします。（５）「幅の上限」に「20％」を設定します。（６）
「目次＞１つめのカラム」に横幅を設定
同様に、こんどは、１つ目カラムに対して設定します。
「目次ブロック」のラベルをクリックしたら、「項目を追加」をクリック。「カラム」の選択肢から「１つめのカラム」を選びます。
「スタイル追加」ボタンをクリックし（１）、幅をクリックします。（2）「幅の上限」に「32％」を設定します。（3）
これで完成です！
いかがでしたでしょうか？
１つめのサンプルで使用したBiND Pressの新設定エリアは地味に便利なんですが、ひっそりと追加されたので、誰も気づいてないかも・・・ということで記事にしてみました！
Dressも格段につかいやすくなっていますので、この機会にぜひ使ってみてください！
今回作成したサンプルサイトのダウンロード
自分では設定ができなそう・・と不安な方は
今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。
※本サイトデータは「BiNDup」でのみ使用できます
POINT
- 新着記事だけ目立つレイアウトで、迷わせないブログの導線作り
- 新BiND Pressに追加された2件目から表示できる機能で、新着記事だけ大きく目立たせる
- 変更箇所を探すのがラクな新Dressで、新着記事の画像だけ少し大きいレイアウトに挑戦