✅タイトルのfont-sizeがそれぞれ違うので<span>でlg、md、smの3段階用意して部分制御. ✅画像の配置は尾道の復習left: calc(50% + 97px);でレスポンシブも対応して配置. #デイトラ #RyoHack

ロゴ中央・左右ナビを24pxで揃えたい. ✅Gridで列設計.1fr | 左Nav | 24px | ロゴ | 24px | 右Nav | 57px | CTA | 1fr.→ ロゴ基準で左右の距離を自動で保証。. 「距離をpaddingで指定するより、Gridで列設計」。.ロゴを基準に据えるとレスポンシブでもブレない。. #デイトラ　#RyoHack

What do you want to know?.

✅矢印をホバーした際に伸びる動き. ・矢印に対して擬似要素を配置して棒が伸びても先端が勝手についてくるようにする. これだと先端の位置を別で調整する必要がない. #沼脱　 #RyoHack

三角形の背景.border-widthだとレスポンシブの調整が大変→ clip-path × vw指定 に変えたら解決. ✅width を vw で指定しておけば擬似要素も自然に連動してくれる.レスポンシブでもズレない・破綻しない.vw = (要素幅÷ 画面幅) × 100.→ デザイン通りのサイズ感を保ちつつ柔軟な調整が可能🙆‍♂️.#デイトラ

アコーディオンを開く時だけアニメーションなら<details> で問題ないが閉じる時も動きをつけたいならdivで管理した方が良い🙆. #デイトラ.

<details> はアニメーション制御に向かない.・open 属性の付与・削除によってブラウザが即座に開閉処理を行うためJavaScriptによるアニメーションと干渉が起こる.・特に閉じるときに open を削除すると、高さやレイアウトが強制的にリセットされるため、滑らかなアニメーションが破綻する. #デイトラ.

front-pageのカードからarchive内の特定カードに遷移.① front-pageのリンクに投稿ID付きアンカーを付ける.<a href="<?php echo get_post_type_archive_link('case') . '#post-' . $case_post->ID; ?>">.② archive側のカードにそのIDを付ける.<div id="post-<?php echo get_the_ID(); ?>">. #デイトラ.

カテゴリ、new、日付のタグ3並びをレスポンシブ時改行、横スクロールなしで表示したい→clamp❗️.・最小値・理想値・最大値を指定して、レスポンシブなサイズ指定ができる関数.font-size: clamp(最小値, 理想値, 最大値). 初の朝活参加でいい刺激になりました☀️. #デイトラ　#RyoHack.

4600行あったsassのファイル分割終了❗️.・同じクラス名に対して別のcssが当たっている部分があったので次はそこを修正.・最初から分割するのを忘れずにやる. RyoHackの面談では卒業制作制作後に何をやるかぼんやりしていたものが明確になりました🙇‍♂️. まずは卒業制作を終わらせる🔥. #デイトラ #RyoHack.

✅sassのファイル分割.abstracts、base、layout、components、pages、vendors、に分けてそこからまた更に細分化.これらのファイルをstyle.scssでimportで読み込む. かなり沼ったけど慣れてきた❗️. #デイトラ.

カテゴリのリンク遷移先.✅そのカテゴリのアーカイブページに飛んでほしいのindex.phpに遷移する. ※テンプレート階層が超重要.category.phpを作成する必要がある❗️. home.phpとほとんど同じ構造のcategory.phpを作成して解決🙆‍♂️. #デイトラ

✅記事一覧をカスタム投稿で作成してarchive-article.phpとしていたがカスタム投稿と普通の投稿がサイドバーとメイン部分で混ざっていることに気がつきhome.phpに変更。.archive.phpにすれば固定ページの投稿ページ取得できると思っていた🙅‍♂️. #デイトラ.

✅サイドバーとコンテンツをwidthの%割合で配置していたためスマホ表示の時に無駄な余白があった→display: flex;でflex-directionで画面幅に応じて縦横で配置.2ページ目は改善されなかったためwidth: 100%;を指定して余白を消したけどこれで良いのか🤔. #デイトラ.

サイドバーと記事一覧の構造がほとんど同じなのに別々のクラス名でごちゃごちゃしていたので修正❗️.<?php get_sidebar(); ?>を.flex-direction: row;でサイドバーに.flex-direction: column;で下部に配置の方が良さそう🤔.元々は<?php get_sidebar(); ?>のコードを書いてhiddenで消してた.#デイトラ

・ウィジェットだと付与されるクラス名命名規則（BEM）と合わないので自作コードに変更.✅have_posts() とループの基本 WordPressの投稿を引っ張ってくるには、WP_Queryでデータを取得して、if (have_posts())とwhile (have_posts())でループさせる.これで記事の数だけ繰り返し表示可能❗️. #デイトラ.

✅ WordPress サイドバーをウィジェットで実装.・functions.php にてウィジェットエリアを登録.・sidebar.php に以下を記述して出力.<?php.if (is_active_sidebar('sidebar')) {. dynamic_sidebar('sidebar');.}.?>.✅ プラグインが出力するクラス名に合わせて CSS を調整してスタイリング. #デイトラ

WordPress化で一度は挫折してましたが、.約1週間前から再開❗️. カリキュラムが更新されていたおかげで詰まっていたところもなんとか解決🙆‍♂️. add_theme_support('post-thumbnails'); を記述してもアイキャッチ画像の項目が出てこないなど課題は山積み…。. 引き続き学習継続していきます🔥. #デイトラ.

archiveページ作成.HTMLの構造が気になったので修正.・画像をdivタグで囲っていなかった.・articleタグで記事をまとめていたがaタグでクリック出来るようにした方が良い.・timeタグを使用していなかったため変更. 課題が多いけど見返してみてダメなところ気付けてるからよし🙆. #デイトラ

カリキュラム復習しながら404ページの実装. 導入実績一覧はカスタム投稿で作成.・カスタム投稿は、投稿や固定ページと同等の機能を持つ.・.カスタム投稿はいくつでも追加できる.・カスタム投稿には任意でオリジナルのテンプレートを適用できる. #デイトラ

cssが反映されなくてかなり時間無駄にしてしまった😅.原因はphpにする際に調べた記事から引用してきたり、AIが生成したコードで元々のHTMLのクラス名と別のクラス名になっていたから。.なぜもっと早く気づかなかったのか. とりあえずずっとモヤモヤしてたのがなくなったのでよし❗️. #デイトラ