ちーた@Web制作

3児のパパ×副業Web制作に挑戦💻｜25/6/23〜デイトラで学習開始｜同じように学んでいる方と繋がりたい｜ドラゴンズ、グランパス好きとも繋がりたい | 制作記録と気づきを発信中｜#デイトラ｜#Web制作学習| #デイトラコミュニティ| #リベシティ| #中日ドラゴンズ| #名古屋グランパス

[ちーた@Web制作 @chi_ta003]

4/1〜7/21
Web制作学習（274〜385日目）
☑️上級編_卒業制作Global Standard
🕰️(累計:707.5h)

デイトラ学習開始して385日、卒業制作着手して111日🕰️遂に卒業制作が完成し提出を終える事が出来ました😆
卒業制作全振りしてて、ポストする余裕もありませんでした🤣
TOPページ＋下層ページ10Pの静的コーディング→WordPress化まで何とか完走しました！
これだけの量をこなすのが勿論初めてで要領を得ずに途中右往左往しつつもコツコツ継続した成果かな😂
一通りの流れは経験と共に把握出来たけど、一度振り返りをして整理した上で次のステップに進みたいと思います👍

#デイトラコミュニティ
#Web制作
#RyoHack

[ちーた@Web制作 @chi_ta003]

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制作
#沼脱

[ちーた@Web制作 @chi_ta003]

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

[ちーた@Web制作 @chi_ta003]

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制作
#沼脱

[ちーた@Web制作 @chi_ta003]

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

[ちーた@Web制作 @chi_ta003]

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制作
#沼脱

[ちーた@Web制作 @chi_ta003]

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

[ちーた@Web制作 @chi_ta003]

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制作
#沼脱

[ちーた@Web制作 @chi_ta003]

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制作
#沼脱

[ちーた@Web制作 @chi_ta003]

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（<tr>相当）は「行」を作るだけ→ 行自体に外側の余白（margin）を持つという概念がほぼ無い
・余白を作りたいなら「セル（table-cell / <td>）」や「表（table）」側の仕組みで作る

2月特有のプロ野球キャンプダイジェストに時間を食われないように意識しないと時間が溶ける🫠

#デイトラコミュニティ
#Web制作
#沼脱

[ちーた@Web制作 @chi_ta003]

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月も駆け抜けます！！
頑張りましょう😆(ドラゴンズの応援もぼちぼち！笑)

#デイトラコミュニティ

[ちーた@Web制作 @chi_ta003]

@toku_0308 是非是非〜🙏

[ちーた@Web制作 @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分とするとしっかりカード内に画像が収まる👌

#デイトラコミュニティ

[ちーた@Web制作 @chi_ta003]

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

[ちーた@Web制作 @chi_ta003]

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

[ちーた@Web制作 @chi_ta003]

1/24 Web制作学習（210日目）
☑️中級編DAY32〜42
🕰️2.5h(累計:290.5h)

■onomichi_spots

PCレイアウト調整💻
SP版とレイアウト異なる事を把握した上でHTML構成したお陰で想定通り調整完了✅この辺りにも成長感じた😂
レスポンシブ調整に不安あるものの進めていきます👌

#デイトラコミュニティ

[ちーた@Web制作 @chi_ta003]

1/23 Web制作学習（209日目）
☑️中級編DAY32〜42
🕰️2.5h(累計:288.5h)

■onomichi_spots

CSSでSPレイアウト調整💻
セクション上下にある波波の装飾画像の横方法への繰り返しに悩んだけど、背景画像にしてrepeat-x指定で画面幅広げても途切れる事なく表示出来た👌

#デイトラコミュニティ