DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』課題&実践レポート【#30DAYSトライアル】

#30DAYSトライアル

こんにちは、マサ( @Masayuki_Hirai )です。

1月7日から参加しているショーへ―さん主催の『#30DAYSトライアル』

DAY18では、いよいよ自分のポートフォリオサイトの制作に着手します。

この記事では、課題の概要と僕の実践レポートをご紹介していきますね。

DAY18. 課題の概要

DAY18の課題は、HTMLテンプレートを活用したポートフォリオサイトの制作です。

ちなみに今回から、ショーへーさんのブログで課題の説明がおこなわれることになりました。

【30日】未経験からコーディングの副業で月5万を稼ぐためのステップ|from Garage

HTMLテンプレートが安価で買えるなんて知らなかったので、テンプレートを活用したLP制作の方法には目からウロコでしたね。

DAY18. 課題の実践レポート

 まずはテンプレートを購入

ショーへ―さんが厳選してくれたテンプレートの中から、僕は「Kerri」を選びました。

気になるお値段ですが、本体価格16ドル+PayPal手数料2ドルの計18ドルで購入することができましたよ。

参考記事 :「Envato Market」の使い方説明【日本語で解説】|エンジニアステップ

そしてデータをダウンロード後、Visual Sutudio Codeで読み込んでから編集を始めます。

 メニュー構成を少し変更

デフォルトメニューの中にある「Client」が不要だったので、「Skills」に変更。

そして順番も少しアレンジして、以下のようなメニュー構成になりました。

  • Home
  • About
  • Services
  • Works
  • Skills
  • Blog
  • Contact

 アクセントカラーの変更

デフォルトで設定されていた色が気に入らなかったので「#0066ff」という青系の色に変更。

ちなみに16進数のカラーコードは、以下のページで検討しました。

HTML,CSS カラーコード一覧表

 その他の変更点

・画像の差し替え

プロフィール画像を自分で描いたイラストに、ホーム背景画像をフリー画像に差し替えました。

・言語設定の変更

デフォルトでは <html lang=”en“> と言語設定が英語になっていたので、<html lang=”ja“> と日本語に変更しました。

・テキストの変更

デフォルトの英語テキストを消して、適当な日本語テキストに変えました。

・ページ内リンクの設置

今回の課題にしたがって、「LP制作-30,000円~」の項目にリンクボタンを設置しました。

<a href=”#” class=”btn btn-custom”>お問い合わせはコチラ</a>

というシンプルなボタンです。

ちなみにテキストの文言などは、アルパカさんの記事を少し参考にさせていただきました ♪

参考記事DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』#30DAYSトライアル|エンジニアステップ

ポートフォリオサイト(仮)

まだまだ改善の余地がありますが、今のところはこんな感じです。

 DAY18. まとめ

僕はもともとブログを運営していたこともあって、今回の課題は本当に楽しかったです。

この調子で素敵なポートフォリオサイトを完成させて、たくさんの依頼が来るようにしたいですね。

最後まで読んでくださりありがとうございました。残りの日程もぜひ一緒にがんばりましょう!

関連記事DAY14.『Bootstrapを使ってビジネスLPを作ろう②』ポイントまとめ&感想

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です