ちーた@Web制作

3/16〜3/23 Web制作学習（258〜265日目） ☑️上級編DAY23〜35 🕰️22h(累計:436h) 🔹 Phase 1：WordPressの真骨頂「カスタム3兄弟」を攻略（Day 23-26） 「投稿」の枠を飛び出し、サイトの構造を自由自在に設計。 • カスタム投稿 & タクソノミー：制作実績やお知らせを独立させ、専用テンプレート（archive-work.php 等）で管理。 • カスタムフィールド (ACF)：会社名やURLなどの「入力専用枠」を作成。クライアントが迷わず更新できる、親切な管理画面を構築。 • これで「どんな業種のサイトでも作れる」という確信が持てました！ 🔹 Phase 2：ブログ型から「サイト型」への完全リニューアル（Day 27-31） 一つのメディアを、本格的な「コーポレートサイト」へと進化。 • フロントページ (front-page.php)：固定ページ、投稿、カスタム投稿からデータを集約する「情報のハブ」を構築。 • 柔軟なページ設計：ハードコーディングによる自由なデザインと、ブロックエディタによるクライアント編集機能の使い分けを習得。 • お問い合わせフォーム：Contact Form 7を実務レベルにカスタマイズ。完了画面へのリダイレクトなど、細かなUXの追求。 🔹 Phase 3：納品のクオリティを左右する「公開・保守」技術（Day 32-35） 「作って終わり」にしない、プロとしての責任。 • 本番環境への移行：All-in-One WP Migration での安全な移行に加え、phpMyAdmin でDBを直接叩く「もしも」の時のトラブル解決術も学びに👌 • 爆速化への挑戦：Autoptimize や画像圧縮を駆使し、PageSpeed Insightsのスコアを改善。3秒の壁を突破する快感！ • 鉄壁のセキュリティ：UpdraftPlus でのバックアップ、Wordfence での防御。クライアントの資産を守る覚悟が固まりました。 いよいよ次は卒業制作😆 これまでの学びの集大成として、もがきながらも完走するぞ💪 #デイトラ #WordPress #Web制作 #沼脱

3/2〜3/15 Web制作学習（244〜257日目） ☑️上級編DAY8〜22 🕰️32.5h(累計:414h) デイトラ上級編：Day8〜22 学習記録📚 「静的サイトを動的なメディアへと進化させる2週間」基礎から実務レベルのカスタマイズまでを一気に学びました👌 🔹 Phase 1：WordPressの「地図」を手に入れる（Day 8-9） まずはWPの仕組みを理解😊 • テンプレート階層という絶対的なルールを理解 • 静的HTMLを分解し、header.php / footer.php へ分割 • functions.php でCSS/JSをスマートに管理 • パスの動的化 (get_template_directory_uri) はWP制作の第一歩！ 🔹 Phase 2：動的表示の「心臓部」をマスター（Day 10-12） ここから一気にWebサイトが「生きてる」感じに。 • メインクエリのループ：投稿データを自動で取得して一覧表示 • テンプレートタグを駆使して、タイトル・画像・日付を実データに置換 • アクションフック・フィルターフック：WPのコアをいじらずに機能を拡張する仕組みに感動🤣 🔹 Phase 3：詳細ページと「保守性」へのこだわり（Day 13-15） 単に作るだけでなく「プロの設計」を意識。 • single.php で複雑な投稿ページを実装 • DRY原則（同じコードを繰り返さない）：template-parts でパーツをモジュール化 • 独自関数を作ってテンプレートをスッキリさせる！ • 「デザインはテーマ、機能はプラグイン」という保守性の高い設計思想を習得✅ 🔹 Phase 4：サイトの利便性を極める（Day 16-20） ユーザー体験を向上させる機能を網羅。 • WP_Query（サブループ）：ピックアップ記事や関連記事を自由自在に抽出 • ウィジェットと自作コード、2パターンのサイドバー構築法 • 404ページと検索結果ページ：エラー時や検索時のユーザー離脱を防ぐための必須テンプレートを学んだ👌 🔹 Phase 5：運用効率を爆上げする仕組み（Day 21-22） • 自作ショートコード：複雑なHTMLも一行のコードで呼び出し可能に • ブロックパターンとの組み合わせで、クライアントでも更新しやすい環境作り✅ 📝 振り返って 最初はテンプレートファイルの多さに圧倒されましたが、一つひとつが繋がって「一つのシステム」として動き出した時の達成感は格別でした。 特に「なぜそう書くのか（保守性のため）」という視点は、独学ではなかなか気づけない深い学び。 いよいよ次は「カスタム3兄弟（投稿・タクソノミー・フィールド）」の世界へ。 Web制作者としてさらに一段上のレベルを目指して突き進みます！🔥 #デイトラコミュニティ #Web制作 #沼脱 #WordPress

2/26〜3/1 Web制作学習（240〜243日目） ☑️上級編DAY1〜7 🕰️8.5h(累計:381.5h) 遂に上級編突入！！ デイトラPHP上級編、Day1〜7の学習記録🚀 🔹Day1-3：PHPの基礎固め 変数、条件分岐、配列。0から数える配列のルールに戸惑ったけど、foreachでデータを一括処理できた時の全能感がすごい…！「;」ひとつでエラーが出る繊細さもプログラミングの醍醐味と色んな場面で痛感😂 🔹Day4-5：実践！ECサイト制作 ファイルを分割したり「クラス」を使って設計図を作成💻オブジェクト指向は最初「？」でしたが、コードがスッキリ整理される快感にハマったかも😆自分でアプリを動かす楽しさを実感！ 🔹Day6：SQLでDB操作 データベースと会話して、データを自由自在に操る感覚を習得。WPの裏側が見えた気がする👌 🔹Day7：ついにWordPress環境構築！ MAMPで環境構築実施💻静的なHTMLをWPテーマに変えていくイメージがまだ湧いてこないかな🧐 最初は「PHPムズい…」と頭抱えてたけど動くものを作る楽しさでここまで来れたかな。いよいよオリジナルテーマ制作、楽しみすぎる🔥 #デイトラコミュニティ #Web制作 #沼脱

@s_fam12 さとしさん、ご無沙汰しています！！ ありがとうございます😭皆さん時間かかったって聞いてましたがそれ以上にかかりました！笑 今週はドキドキです💓

@chi_ta003 ちーたさん、お久しぶりです！ 中級完走おめでとうございます🎊 結果待ちはドキドキだと思いますw 僕もかなり時間かかったなぁと懐かしく思いました😂

2/11〜24 Web制作学習（228〜238日目） ☑️中級編DAY32〜42 🕰️2/11 5h、2/12 1h、2/16 3h、2/17 4.5h、2/18 5h、2/19 1h、2/20 1h、2/21 5h、2/22 5h、2/23 3h、2/24 3h(累計:372h) ■onomichi_ピクパ〜課題提出 遂に中級編課題の提出が完了しました！ かなり時間かかったけど、振り返ってみると壁にぶち当たりながらもやり切った事に成長を実感しています😊 最後のピクパでもどこから調整していくのか？という視点が自分なりについて徐々にスピードアップ出来た😆 最後に条件の見落としがあったりで、右往左往した所は反省して次に活かします！ どこまで正しく再現出来ているか不安な気持ちはありますが、この勢いで上級編へ突入します！！ #デイトラコミュニティ #Web制作 #沼脱

@oya_webdesign おおやさん、おめでとうございます🎊 Webディレクターはおおやさんに天職なような気がします😆 新たなスタート応援してます！！

【転職のご報告】 ご縁あって 地元名古屋のWeb制作会社より Webディレクターとして内定をいただき 3月より入社することになりました☺️ 🍊🌱✨ 当初はデザイナー職を志して 学習を始めましたが 実案件やUXリサーチの学びを深める中で お客様やユーザーにより近い位置で 本質的な課題に寄り添いたい想いが強まり ディレクションの道を選びました🌈 未経験の僕に 一からデザインやWeb制作を 教えてくれたデイトラの皆様… そして 日々刺激をくださり 時に励まし合い 一緒に切磋琢磨してくれた Web制作仲間の皆様… 僕に人生を切り開く 勇気と自信を授けてくれて 本当にありがとうございました🥹🙏 37歳からの新たなキャリア。 これからもデザインやUXの追求を 続けつつ、さらに幅広く Webスキルを積み上げていくことで ビジネスに伴走できるディレクターとして 精一杯、邁進してまいります💪 どうぞ、これからも よろしくお願いします☺️✨ #デイトラ #デイトラコミュニティ

2/8〜10 Web制作学習（225〜227日目） ☑️中級編DAY32〜42 🕰️2/8 5.5h、2/9 2h、2/10 1h(累計:335.5h) ■onomichi_footer 時間がかかっているonomichiも遂に最後のfooter▶️ ここもoha!で学んだ事が活かせる構成だったのでしっかり復習してから着手👌 レスポンシブ対応でレイアウト崩れが発生した部分の修正に少し手間取った😂display:gridが上手く使いこなせてない💦 次は恐怖のピクパ！最後にまとめてやるのでどれだけズレてるのか… ラストスパート頑張ろ💪 と、気合いを入れてすぐ風邪引いたっぽい🤧 インフルじゃない事を祈る🙏 #デイトラコミュニティ #Web制作 #沼脱

2/3〜7 Web制作学習（220〜224日目） ☑️中級編DAY32〜42 🕰️2/3 1.5h、2/4 1h、2/5 4.5h 2/6 1h、2/7 3h(累計:327h) ■onomichi_contact 時間を要すると覚悟して臨んだcontactセクションを何とか5日でクリア👌まだまだ理解が浅くて時間掛かってるけど、これまでのセクションに比べると成長したかな😊 oha!で学んだ事を色々実践して感じたのは、これからも同じようなパターンも出てくるはずだから理解するのと共に、スニペット登録もしておけばもっと効率化出来る👍 今日(2/8)はまずは、グランパス開幕戦⚽️ 前体制からどれだけ変わってるか楽しみ！ #デイトラコミュニティ #Web制作 #沼脱

2/1〜2 Web制作学習（218〜219日目） ☑️中級編DAY32〜42 🕰️2/1 4h、2/2 5h (累計:316h) ■onomichi_参加要項 2月はスタートから諸々のタイミングがマッチしてまとまった時間が取れたので参加要項セクションを2日で完成😆 文句言わずに時間くれる妻に感謝🙏 tableタグの仕様に振り回されてPCレイアウトの横並びや余白の対処に苦戦したけど、苦戦した分いい学びに🧐 【学び】 display: table-row;を指定した際はmarginやpaddingは効かない😂 〈理解〉 CSSの「table系レイアウト（table / table-row / table-cell）」は、ブラウザが“表としてのレイアウト規則”で配置する。 ・table-row（相当）は「行」を作るだけ→ 行自体に外側の余白（margin）を持つという概念がほぼ無い ・余白を作りたいなら「セル（table-cell / ）」や「表（table）」側の仕組みで作る 2月特有のプロ野球キャンプダイジェストに時間を食われないように意識しないと時間が溶ける🫠 #デイトラコミュニティ #Web制作 #沼脱

1/28〜31 Web制作学習（214〜217日目） ☑️中級編DAY32〜42 🕰️1/28 1h、1/29 1h、1/30 2h、1/31 3h (累計:300h) ■onomichi_FAQ FAQセクションはアコーディオン実装💻 oha!でも実装したし、#沼脱　でも学習が出来るので復習しながら実装▶️ 途中で@include mq(md)が(me)になっているエラーに時間を使いながらも完了✅ このペースでどんどん進める💪 2/1はプロ野球のキャンプイン⚾️ 月も変わったし、キャンプインのような新たな気持ちで2月も駆け抜けます！！ 頑張りましょう😆(ドラゴンズの応援もぼちぼち！笑) #デイトラコミュニティ

@toku_0308 是非是非〜🙏

@chi_ta003 よろしくです！！ 一緒にもくもくしましょ〜🙌

1/25〜27 Web制作学習（211〜213日目） ☑️中級編DAY32〜42 🕰️1/25 5h、1/26 1h、1/27 3.5h (累計:300h) ■onomichi_spots slider沼りまくり〜レスポンシブ最終調整💻 ようやくslider沼から脱出しました😂調べながら進めましたがinnerや margin、paddingの使い方など基本的な事の応用が大切だと改めて実感🙏 次はQ&Aに進みます！ 【新たな学び】 カード全体にpadding-inlineをつけて画像を配置する際はimgの widthをcalc(100%+padding-inline分)としておいてmargin-left:padding-left分とするとしっかりカード内に画像が収まる👌 #デイトラコミュニティ

@toku_0308 トクさん、ありがとうございます！！ ovice出没出来ずすいません😂時間見つけてトクさん探しにいきます！

@chi_ta003 ちーたさん、めっちゃいい感じじゃないですか〜😁 引き続きFightingです💪

@hinatoco_lab お疲れ様です！ spotsセクション難しいですよね😂僕はハマりまくって昨日ようやく脱出しました！お互い頑張りましょう😆

Spotsのレイアウト修正(画面幅2000px以上での表示)はほぼ完成しました。あとは消えてしまった猫の足跡を直すだけ。#デイトラ #Web制作

1/24 Web制作学習（210日目） ☑️中級編DAY32〜42 🕰️2.5h(累計:290.5h) ■onomichi_spots PCレイアウト調整💻 SP版とレイアウト異なる事を把握した上でHTML構成したお陰で想定通り調整完了✅この辺りにも成長感じた😂 レスポンシブ調整に不安あるものの進めていきます👌 #デイトラコミュニティ

1/23 Web制作学習（209日目） ☑️中級編DAY32〜42 🕰️2.5h(累計:288.5h) ■onomichi_spots CSSでSPレイアウト調整💻 セクション上下にある波波の装飾画像の横方法への繰り返しに悩んだけど、背景画像にしてrepeat-x指定で画面幅広げても途切れる事なく表示出来た👌 #デイトラコミュニティ

1/22 Web制作学習（208日目） ☑️中級編DAY32〜42 🕰️1.5h(累計:286h) ■onomichi_spots spotsセクション開始☑️ まずはHTML構成。SP版だけ見ると簡単に出来ちゃいそうだけど、PC版のレイアウトがかなり違うのでそこを意識してコーディング💻この辺りの着眼点が変わってきた👌 #デイトラコミュニティ