うにょママ 
復習をかねたプログラミング学習の記録と備忘録です。
Day17～19で学んだこと「テンプレートを使用したポートフォリオ作成」
【Day17】HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①
HTML/CSS/Bootstrapを使ったテンプレートを利用しポートフォリオを作成
・テンプレートをEnvatoMarket(オーストラリアのEnvato.comが運営するECサイト)で購入する
・「Kerri – Responsive Bootstrap 4 One Page Portfolio Template」を購入
Kerriの変更点
・テンプレートの画像や文章を変更する
・テンプレートの不要な項目は削除
・お問い合わせボタン追加
・ロゴ作成
・グーグルフォーム実装(LP作成後に修正)
ポートフォリオに使用する画像のおすすめサイト
・ポートフォリオに使用する画像は『O-DAN』がオススメ
- 商用利用可の画像のみを
- 32のフリー素材サイトから
- 日本語で検索可能
・日本の無料画像がほしい場合は『タダピク』
【Day18】自分のポートフォリオサイトを作ろう②
HTMLテンプレートから学ぶ
・効率的なクラス分け
・CSSの共通化
・表現の幅をひろげる
- 制作工数を時短できる
- 手軽にオシャレなサイトが作れる（副業向き）
- 上手い人のコーディングを学べる
- コーディングの幅が拡がる
- いろんなデザインパターンが見れる
- 依存してると”コーダー”としてのスキルは伸びない。
- そのまま使うと海外サイト感のあるデザインになりがち
- ちょっと頑張れば誰でもマネできてしまう
【Day19】ポートフォリオを公開しよう
サイト公開の手順
①サーバー契約
・エックスサーバーがおすすめ
私はこのブログ開設時に「Conoha WING」と契約していたのでエックスサーバーは使っていません。
・サーバーは簡単に言うと「自分のサイトを表示するために必要な場所を借りる」イメージ
②ドメイン取得
・ドメインは簡単に言うとサイトのURL
（例えばこのブログの場合は「https://www.unyomama.com/」）を決める事
・ドメイン名は後から変更できない
③FTPクライアントソフトのインストール
・初心者にオススメのFTPソフトはCyberduck
④Cyberduck(FTPソフト)を使用しファイルをサーバーにアップロード
・サーバーにアクセスするために、事前に契約したサーバーでFTPアクセス情報を確認する必要あり
・接続に必要な情報は3種類
- FTPサーバー名（FTPホスト名）
- FTPユーザー名（FTPアカウント名）
- FTPパスワード
・ファイルのアップロード方法は2種類
- デスクトップからドラッグ＆ドロップ
- Cyberduck内のアップロードをクリックしファイルを選択
➞サイトがネット上で世界中に公開される！
私の作ったポートフォリオはコチラ↓
Twitterカードの設定
・Twitterでシェアするときに、URLを入力するとサイトの画像が表示される
・Twitterカードがあるとシェアしたときにクリック率がかなり上がる
まとめ
どきどきのポートフォリオ公開！
URLを入力すると自分の作ったサイトが表示されてうれし恥ずかしです。
他のデイトラ受講生のポートフォリオがとても参考になりました。
サーバーがエックスサーバーではなく、Conoha WINGなのでサイト公開でかなりつまづきました。
Twitterカードの設定もうまく行かず解決に時間がかかりました。
つまづいた箇所を別途ブログでまとめみようと思います！
まとめました(2021/6/4)↓
