Links
概要
本ブログ専用のオリジナルテーマを、Twenty Twenty-Three の子テーマとして制作しました。サイトエディターを使わず、コードベースでレイアウトやデザインを構築しています。
制作の目的
ブロックテーマの仕組みを理解し、サイトエディターに頼らずコードベースでWordPressテーマを制作できるようになること。
構成・工夫した点
- Aloha Goodies と同様に、ファーストビューに Hero 画像を配置し、サイト全体の雰囲気が伝わる構成にしました。
- 作品一覧はカード形式で表示し、一覧性と視認性を重視しています。
- 作品はカスタム投稿タイプで管理し、Custom Post Type UI を使用しました。
- タクソノミーを用いて作品を分類し、カテゴリごとに閲覧しやすくしています。
- サイトマップページを作成し、作品カテゴリ・投稿カテゴリの両方から各記事へアクセスできるようにしました。
- ブログ一覧ではタイトルのみを表示し、本文の抜粋はあえて表示せず、一覧画面をすっきりさせています。
- パソコン・スマートフォンの両方でレイアウトや余白を調整し、デバイスを問わず見やすく、読みやすい表示になるよう工夫しました。
画面構成
- 作品詳細のホーム画面から、以下の各ページへ遷移できる構成としました。
- ブログ一覧
- Profile
- Sitemap
- ブログ一覧ページからは、各ブログ記事ページへ遷移します。
- 記事内のメタ情報に表示されるカテゴリタグから、作品・ブログそれぞれのカテゴリページへ遷移できるようにしています。
- サイトマップページからは、作品カテゴリ、ブログカテゴリ、投稿月ごとのアーカイブページへ遷移可能とし、目的の記事にたどり着きやすい導線を意識しました。
スクリーンショット
