全ての記事一覧

Fstoppers風のグリッドで最新記事を一覧表示します。下部のボタンからさらに読み込めます。

元ページの内容を表示/非表示

デザインの指示: ブログTOPページ制作依頼

環境

アニメーションなどを多めにいれて

目的

ブログのTOPページを、写真系メディアサイト「Fstoppers(https://fstoppers.com/)」風の
デザインにリニューアルしたい。

デザイン要件(Fstoppers風)

  • ダーク系のヘッダー(黒〜濃いグレー)にロゴとナビゲーションメニューを配置
  • メインコンテンツは記事カードのグリッドレイアウト(PCでは3カラム、タブレットは2カラム、スマホは1カラム)
  • 各記事カードの構成:
  • 上部に大きなアイキャッチ画像(16:9、hover時にわずかにズームするエフェクト)
  • カテゴリラベル(小さめ、アクセントカラー)
  • 記事タイトル(太字、hover時に色が変わる)
  • 投稿日と著者名(グレーの小さい文字)
  • 全体的にモダンでシャープな雰囲気。余白は詰め気味、画像主体のマガジン風レイアウト
  • レスポンシブ対応必須

機能要件

  1. 記事一覧は初期表示で最大24記事を表示する
  2. 一覧の下に「もっと見る」ボタンを設置し、クリックすると次の24記事を追加読み込みする (ページ遷移ではなく、同一ページ内に追加表示。全記事表示済みの場合はボタンを非表示にする)
  3. メインコンテンツの右側にサイドバーを設置(スマホでは記事一覧の下に回り込む)

サイドバー要件

サイドバーに以下のGoogleアドセンス広告コードをそのまま設置してください。コードは一切改変しないこと。広告の上に「スポンサーリンク」というラベルを表示してください。サイドバーはスクロールしても追従する(sticky)ようにしてください。

記事一覧