【WordPress新規制作 練習課題】入門編:プロフィールサイト

練習課題

課題内容
ロードバイクが趣味の友人から、自転車を紹介するための簡単なWebサイトを作ってほしいと頼まれました。 サイトに掲載するのは、簡単な自己紹介と自転車の写真だけです。 WordPressで制作を行います。
設定単価
WordPressサイト制作:5万円
素材
学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています

WordPressサイトを制作しよう!

下記の「デザインカンプ」と「コーディング仕様」をもとに、WordPressのサイト制作にチャレンジしてみましょう!

デザインカンプ

▼XDデータ
XDデータをダウンロードする

▼PC表示(詳細ページ)

▼スマホ表示(詳細ページ)

コーディング仕様

コンテンツ幅
コンテンツの横幅は960pxで横のパディングは4%です。
メインビジュアルだけ全幅にします。
メインビジュアル
全幅で高さは600px固定です。
About
画像をCSSで丸く切り抜きます。
画像とテキストを横並びの中央寄せで配置します。
Bicycle
3つのコンテンツをそれぞれ記事化して、投稿日付が新しいものから順に両端揃えの横並びで表示します。
画像、タイトル、テキストは、それぞれ投稿ページ内のアイキャッチ、タイトル、本文から表示します。
本文は30文字でカットして残りは「…」で表示します。
レスポンシブ
ブレークポイントは600pxです。
About、Bicycleともに、レスポンシブ時はコンテンツを縦積みにします。

ヒント(レイアウト構成)

コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。
サイト全体と各パーツのレイアウト構成について解説しています。

解答例(ソースコード、デモサイト)

コーディングが完了したら、下記の「ソースコード」と「デモサイト」を参考に、自分の作ったコードとサイトをチェックしてみてください。

ソースコード

解答の1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。

ソースコードはこちら

デモサイト

デモサイトと自分で作成したサイトを比較して、デザインや動きなどをチェックしてみてください。

デモサイトはこちら

コーディング練習 課題一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習