easy-notion-blogで大きな改善がなされました。
アルパカ先生の解説記事「easy-notion-blog v0.4のアップデート内容紹介」によると
つまり、CSSをいじりにいじりまくってきた私にとっては大ピンチなわけです(´;ω;`)ブワッ
▼ 振り返るとこんな感じ
本家リポジトリにcommitの追加があると自動でNotionの方に反映させているデータベースをもとに着手してしまってから気づいた。
原因はこれ!!!
古いcommitから同期せずに進めてから気づく。。。。
sortして
古いcommitから同期してみると・・・
遅かったか〜〜〜〜
CSSを調整する上でのポイントは、
【componentフォルダやpagesフォルダ内のファイル内でどういった変更がされているか】
ということ。
考えるだけでも頭が痛くなりそうなので、
視覚的に確認&メモ&修正を繰り返しながら進めることにしました。
ブログの検証画面はこんな感じでHTMLやCSSの要素を確認できます。
【見比べた検証画面】
検証画面で見比べ、VSCodeで関連するファイルを確認。
index.tsxや[date].tsxからこなし全体像をなんとなく掴む。
と同時に疑問もあったり。
ありがたいことに返信いただけたり
質問して聞いたほうが早そうなことはGitHubのIssueへ投稿してみたり。
ふと思いついたことはツイートして整理してみたり。
自信は無い状態で背伸びしてみたり。
とにかく開発画面で修正してはエラーの繰り返し。
なかなか乗り越えられない壁に立ち往生したり。
よく寝たら代案が思いついてなんとか集結。
実際のCSS内容はこちら
CSSの調整で数日格闘した影響か、
全体像をある程度理解している状態での差分検討だったので数分で完了\(^o^)/
【確認】
👉 自分のブログページとデモページとの検証画面を見比べる
👉 クラス名の変更はないか?ある場合構成の変更もあるか?
👉 CSSの変更からindex.tsx・[date].tsxなどと関連付ける
👉 componentから派生した記述かどうかも意識する
👉 componentが他のファイルから参照している部分がヒントになることもある
👉 開発者だから分かる部分かもしれない場合はIssueを活用
【メモ】
👉 ツイートしてみる
👉 作図して考えたい場合はノートにメモ
【修正】
達成感で満たされた結果、
自動ツイート機能の実装までこなして今日は充実した1日でした\(^o^)/
▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね
RSSリーダーにatomのリンクを登録すると通知が行くよ🐌
https://herohoro.com/atom
やってみてね(*´ω`*)(*´ω`*)
フォロー大歓迎\(^o^)/
フォロー大歓迎\(^o^)/