こんにちは、マサ( @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 lang=”en“> と言語設定が英語になっていたので、<html lang=”ja“> と日本語に変更しました。
・テキストの変更
デフォルトの英語テキストを消して、適当な日本語テキストに変えました。
・ページ内リンクの設置
今回の課題にしたがって、「LP制作-30,000円～」の項目にリンクボタンを設置しました。
というシンプルなボタンです。
ちなみにテキストの文言などは、アルパカさんの記事を少し参考にさせていただきました ♪
参考記事：DAY18.『HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①』#30DAYSトライアル｜エンジニアステップ
ポートフォリオサイト(仮)
まだまだ改善の余地がありますが、今のところはこんな感じです。
DAY18. まとめ
僕はもともとブログを運営していたこともあって、今回の課題は本当に楽しかったです。
この調子で素敵なポートフォリオサイトを完成させて、たくさんの依頼が来るようにしたいですね。
最後まで読んでくださりありがとうございました。残りの日程もぜひ一緒にがんばりましょう！
関連記事：DAY14.『Bootstrapを使ってビジネスLPを作ろう②』ポイントまとめ＆感想
コメントを残す
コメントを投稿するにはログインしてください。