【WEBデザイン学習日記-99】 個人制作のコーディング調整とレスポンシブ対応開始
2024/1/4（木）～の学習日記です。今週は2日間だけ働いて3連休。週末を迎える前の金曜日の退社時が一番幸せです♪
☆★☆ ☆★☆ ☆★☆
2024年1月4日（木） 個人制作物のコーディング修正：30分
今日から仕事始めでした。
いつもは目覚ましが鳴るまでぐっすり熟睡なのですが（でもなぜか目覚ましが鳴る5分前に必ず目が覚める）昨晩はなぜかそわそわして、明け方に何度も目が覚めました・・・長期休暇明けの学校や仕事ってちょっとエネルギーがいる気がします。行ってしまえば何てことないのですが、行く前の落ち着かない気持ちが何とも言えない。
でも今週は2日間だけ仕事をしたらまた3連休なので、頑張れそうです。
夜は個人制作物の修正の続き。まずは自力で修正できるか試してみて、どうしても無理そうなら先生に質問して解決しようと思います。修正箇所が終わったらレスポンシブ対応に入ろうと思います。今日は久々の仕事で少し疲れたので30分だけ。
（修正が必要な箇所）
◎上部のナビを固定するとその下のパンくずリストが隠れてしまう
◎上部のナビを固定した後にスクロールすると上部にわずかな隙間があり、メインビジュアル画像が見えてしまう。隙間を埋められない
◎プライバシーポリシーのひな形探し
◎問い合わせフォームのボタンを押した後に問い合わせありがとうございましたのフォームに移せない
☆★☆ ☆★☆ ☆★☆
2024年1月5日（金） 個人制作物のコーディング修正：2時間半
やっと週末を迎えました。金曜日の夜はいつも幸せな気分☺
夜は金曜ロードショーの「千と千尋の神隠し」を見ながら個人制作のコーディングの修正作業。
私の個人制作ページ上部の固定ナビゲーションバーのデザインは下に２色の線をつけたデザインなのですが、去年コーディングを始めたばかりの頃は下線の付け方が全く分からなくて、試行錯誤の末に白いヘッダー部分にborder-bottomでグレーの下線を付け、疑似要素のafterを使って青い下線をつけていました。でも今回数か月ぶりに自分のコードを見てやはりおかしいと思い、お風呂タイム中に思いついたコードで修正したら形になりました。
ナビゲーションバーを固定にするとパンくずリストが吸い込まれて消えてしまう問題は、固定のヘッダーのコードのグループの中にパンくずリストを入れると一緒に固定されて上手くいきました。パンくずリストの場所が間違っていました。あとは下記の２つの問題をクリアしてからレスポンシブ対応に入りたいと思います。
（修正が必要な箇所 課題残り２つ）
◎プライバシーポリシーのひな形探し
◎問い合わせフォームのボタンを押した後に問い合わせありがとうございましたのフォームに移せない
☆★☆ ☆★☆ ☆★☆
2024年1月6日（土） 個人制作物のコーディング修正と公開設定の修正&久々にバナー模写など：4時間ぐらい
今日から3連休です。
今日は新年最初の市場調査の案件を1件依頼いただきました。
納期が1月11日と長めなのですが、早めに仕上げてWEBデザインの方に時間を割きたいので、昼からせっせとデスクリサーチを進めています。
去年リサーチしたスライドから使える内容もあり、けっこうさくさく進んでおり、今日中に納品できるかもしれません。
去年からポートフォリオのコーディングばかりしていたので、Photoshopを長らく触っていないことが気になっており、午後から久々にバナー模写。やはり操作方法いくつか忘れていました。。。。イラレに関しては半年以上前に購読を中止してしまったのでPhotoshopよりも操作を忘れていると思います。バランスよくデザインとコーディングの学習を両立しないとなと反省。時々Photoshopを触るようにします。イラレは再度購読して復習をしないと💦
夕方からはポートフォリオのサイト公開に関する問題を修正しようとしているのですが、自分なりに調べていくつか試してみるも自分で解決できず、コミュニティサイトで先生に質問をしているところです。
☆★☆ ☆★☆ ☆★☆
2024年1月7日（日） 個人制作物のレスポンシブ対応：4時間20分
今日も朝から昨日の続きでサイト公開に関する修正。
去年末に完成させ、公開したポートフォリオにアクセス制限をかけているのですが（限定公開）、Googleで検索をかけると顔写真と名前、文章の一部が表示されてしまうことが判明し、昨日の夕方から何時間もかけて修正していました。
（試したこと）
◎自分の顔写真を違う画像に差し替え、文章も修正し、サーバーに更新 →でもGoogle検索では昔の内容と画像のまま検索にひっかかったまま
◎Googleコンソールを使い、所有権の認証をしようとするも何度もエラー
◎htmlのheadに<meta name="robots" content="noindex,noarchive,nofollow,noimageindex">と記載し、サーバーに更新 →効果なし
◎ロリポップ！アクセラレータをOFFにした
昨日の夜からスクールのコミュニティサイトに相談し、校長先生にアドバイスをいただき、試行錯誤の末にやっと今朝Googleコンソールの所有権承認ができ、自分のサイトの該当リンクのGoogle検索から「キャッシュされたURLデータの削除申請」と、「URLを一時的に検索から削除する申請」を行い、消去してもらい、表示されなくなり問題解決できました。ウェブサイトの仕組みを理解しきれていないこともあり、かなり時間はかかりましたが色々勉強になりました。よかった。。。問題に直面することで一つ一つ知識が増えていきますね。
昨日はずっと夜までこの問題にかかりっきりだったので、これで安心して個人制作物のレスポンシブ対応に取り掛かれます。
去年作ったポートフォリオのハンバーガーメニューのコードを流用＆微調整して個人制作ページ用のハンバーガーメニューに使用したり（たまったコードが資産になる）、検証ツールを使ってサイトを収縮させてレスポンシブ対応に必要なことをNotionにメモしていきました。
これを一つ一つ潰しながらレスポンシブ対応を進めていきます。
夜もずっとTOPページのレスポンシブ対応。ナビ部分やCTA、アクセス、フッター部分は他の下層ページにも使用しているので、TOPのレスポンシブ対応
ができればあとはサクサク進みそうです。
ポートフォリオのレスポンシブ対応はFigmaで事前にSP用のデザインカンプを作りましたが、個人制作物は作っていないので、検証ツールで収縮させながらデザインを頭でイメージしつつコードを書いています。
今日は４時間ぐらい頑張ったのでここらで切り上げ、Netflix見ながら寝ます。明日ももう１日休み、嬉しい♪
☆★☆ ☆★☆ ☆★☆
＜1/1（月）～1/8（月）の学習目標＞
・WEBデザインの副業案件に応募する
・個人制作物の下層ページのコーディングを全て終わらせる
・個人制作物のレスポンシブ対応できるところまで
＜今後の目標＞
★ 2024年1月末までにWEBデザインでの副業案件を１つ取る！
★ 2024年3月までに今までの経験を活かし、今後にもつなげられる仕事に転職する
★ WEBデザインの学習と制作活動は地道に続けながら少しずつ実績を積む
★ １月28日のTOIEC試験で800点以上を取る
#転職
#海外
#オンライン
#Webデザイン
#主婦
#制作
#Photoshop
#未経験
#学習日記
#クリエーターズファクトリー
#デザイン
#Figma
#初心者
#コーディング
#ポートフォリオ
この記事が気に入ったらサポートをしてみませんか？