【WordPress コーディング練習】入門編：プロフィールサイト

※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習課題

課題内容

ロードバイクが趣味の友人から、自転車を紹介するための簡単なWebサイトを作ってほしいと頼まれました。
サイトに掲載するのは、簡単な自己紹介と自転車の写真だけです。

素材

学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています

デザインイメージ

▼PC表示（トップページ）

▼PC表示（詳細ページ）

▼スマホ表示（トップページ）

▼スマホ表示（詳細ページ）

下記の「デザインカンプ」と「コーディング仕様」をもとに、WordPressサイトを制作してみましょう！
特に指示のない所は、ユーザビリティを考慮しながら自分で考えてコーディングしてみましょう！

Adobe XD デザインカンプ

・WEB版
・ダウンロード版
※ダウンロード版のファイルを開くには、Adobe XDのインストールが必要です。

コーディング仕様

コンテンツ幅: コンテンツの横幅は960pxで横のパディングは4%です。
メインビジュアルだけ全幅にします。
トップページ: メインビジュアルは全幅で高さは600px固定です。; Bicycleは投稿記事を新着順に表示します。表示するのは、アイキャッチ、タイトル、本文の3つで、本文は30文字でカットして最後に…を追加します。アイキャッチ、タイトル、本文全体をリンクにして、クリックすると詳細ページに遷移します。
詳細ページ: アイキャッチ、タイトル、本文を表示します。
レスポンシブ: ブレークポイントは600pxです。