意外と簡単!ブログの新着記事を目立たせるカスタマイズ術!

こんにちは!デザイナーのオモトです!

ブログを運営していると、最新の記事だけ目立たせたいなと思うことってありますよね。
今回は、最初のブログ記事だけを目立たせるレイアウトにカスタマイズする方法をお教えします!

やり方としては、

  1. 新しいBiND Pressの設定をちょっといじるだけで可能なもの
  2. 新しいDressをいじるもの(ちょっと難しい)

の2つの方法をご紹介!
設定方法がわからなくても、ダウンロードデータを用意しているのでご安心を。

1.新しいPressを使う方法~某ブログ雑誌風

それぞれのブログ記事に飛ばすための、目次(インデックス)を作るとき、
1つ目の記事の目次を大きく見せて、それ以降の記事を小さく見せるパターンを紹介します。
テンプレートは、FUTURE JOURNALを使用しています。
ファーストビューに記事を大きく表示するオウンドメディアHPテンプレートのアレンジ例

1.下準備

既存のブロックを削除
今あるメインビジュアル・キャッチを削除、インデックスブロックを複製します。

2.上のブロック:ブロックを変更

段数を1段に変更
ブロックを編集をクリックし、「設定」タブの段数を「1段」に変更します。
すると、記事がズラッと縦1列表示なります。(プレビューの表示に時間がかかるので注意)

3.上のブロック:ブログ設定を変更

BiNDPressの記事の表示件数を1件に変更
ブロックを編集をクリックし、インデックスパーツをクリック(1)。右側のブログ設定をクリック(2)し、「表示件数を制限」を選択し、数値を「1」件に変更します。

記事件数を制限した完成例
これで記事が1つしか表示されなくなりました。ですが、下のブロックの最初にも同じ内容の記事が表示されてしまっているので、次の手順でそれを調整します。

4. 下のブロック:ブログ設定を変更

下のブロックの開始記事数を入力
下のブロックの、ブログ設定画面を開き、「2」件目から表示に設定します。
これで完成です!
完成イメージは、下のブロックを3段に変更・画像の高さを狭めて、画像が大きく広がっている印象を和らげました。
上記以外にも最初の2件だけ大きく見せて、3件目から小さくといったレイアウトも可能です。この「〇件目から表示」が選べるようになったことで、ブログレイアウトの幅が広がりました。

2.新しいDressを使う方法~デジタルステージのTOPページ風

デジタルステージのトップページにあるニュース部分は、実はBiND Pressを使っています。
この新着情報エリア(参考)のように、最初の記事だけ少し大きめに見せるレイアウトのアレンジを紹介します。
記事の1つ目だけ大きく表示するアレンジサンプル
これはDressを使って、最初の記事の画像だけを大きくします
お手本では、目次・4段・カラム間の幅を1%にしたデータを使いました。

1つ目の記事だけ大きく表示するサンプル完成例

「目次>カラム」に横幅を設定

文字ブロックのカラムに設定
Dressを開き、「ラベル表示」の横にある矢印をクリックして、「ブロックスタイル」に変更します。(1)
すると、左側のプレビューエリアのラベルが変化しますので、「目次ブロック」というラベルをクリックします。(2)すると詳細デザインタブに遷移しますので、「項目を追加」をクリック。
「カラム」の選択肢から「カラム」を選びます。(3)

カラムの横幅を変更
「スタイルに追加」ボタンをクリックし(4)、幅をクリックします。(5)「幅の上限」に「20%」を設定します。(6)

「目次>1つめのカラム」に横幅を設定

同様に、こんどは、1つ目カラムに対して設定します。
「目次ブロック」のラベルをクリックしたら、「項目を追加」をクリック。「カラム」の選択肢から「1つめのカラム」を選びます。
1つ目のカラムの横幅を変更設定
「スタイル追加」ボタンをクリックし(1)、幅をクリックします。(2)「幅の上限」に「32%」を設定します。(3)
これで完成です!

いかがでしたでしょうか?
1つめのサンプルで使用したBiND Pressの新設定エリアは地味に便利なんですが、ひっそりと追加されたので、誰も気づいてないかも・・・ということで記事にしてみました!
Dressも格段につかいやすくなっていますので、この機会にぜひ使ってみてください!

今回作成したサンプルサイトのダウンロード

自分では設定ができなそう・・と不安な方
今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。
※本サイトデータは「BiNDup」でのみ使用できます