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

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

目次

コーディング練習課題

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

▼PC表示(トップページ)

▼PC表示(詳細ページ)

▼スマホ表示(トップページ)

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

コーディングをはじめよう!

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

デザインカンプ
▼XDデータ
Windows用:ダウンロード
Mac用:ダウンロード
※ファイルを開くには、Adobe XDのインストールが必要です。
コーディング仕様
コンテンツ幅
コンテンツの横幅は960pxで横のパディングは4%です。
メインビジュアルだけ全幅にします。
トップページ
メインビジュアルは全幅で高さは600px固定です。
Bicycleは投稿記事を新着順に表示します。表示するのは、アイキャッチ、タイトル、本文の3つで、本文は30文字でカットして最後に…を追加します。アイキャッチ、タイトル、本文全体をリンクにして、クリックすると詳細ページに遷移します。
詳細ページ
アイキャッチ、タイトル、本文を表示します。
レスポンシブ
ブレークポイントは600pxです。

ヒント(レイアウト構成、コーディングポイント)

コーディングで悩んだ場合は、下記の「レイアウト構成」と「コーディングポイント」を参考にしてみてください。

レイアウト構成

HTML版のレイアウト構成を参考にしてください。
※一部、WordPressと構成が異なる場合があります。

コーディングポイント

WordPressのコーディングポイントについての簡単なメモです。

コーディングポイント

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

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

ソースコード

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

ソースコードはこちら

デモサイト

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

デモサイトはこちら

関連記事