Hugoの仕様についてあれこれ調べてて、いや〜これはいつか未来の自分も詰まりそうなポイントだからしっかりメモっておかなきゃな〜って意気揚々とScrapboxを開いたら全く同じメモを2年半前に書き残してたことが分かった。つまり「これはいつか未来の自分も詰まりそうなポイントだ」も含めて同じ轍ってことでしょ? 過去のアタシGJすぎる。
ちなみにこれね:
カテゴリ「サイトについて」に属する投稿[180件](8ページ目)
#done
☑️サイトのヘッダー、てがろぐのヘッダーと微妙にずれる。rootのフォントサイズと各要素のremとemを確認する 2022-09-10
☑️ブログ本文中のリンクにマージンきいてる? 2022-09-10
☑️サイトのヘッダー、てがろぐのヘッダーと微妙にずれる。rootのフォントサイズと各要素のremとemを確認する 2022-09-10
☑️ブログ本文中のリンクにマージンきいてる? 2022-09-10
:has()の活用例を見てたらまさに求めていたものがあったから、さっそくサイトに実装してみた。
CSSの実装はこれでかなり進化する! Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ | コリス
これを参考に、直後に小見出しを持つ大見出し(伝わる?)のmargin-bottomを調整。いや〜便利だなあ。隣接セレクタを使えば直後の要素にスタイルをあてられるけど、直前の要素を触りたいときがちょこちょこあってもどかしく思ってたんだよね。
図表にfigcaptionがあるときと無いとき(←追記: これは前にも書いてたわ)、引用にciteがあるときと無いときとでスタイルを出し分けられるわけで、ちょっと考えただけでも夢が広がるよね。
CSSの実装はこれでかなり進化する! Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ | コリス
/* 直接のhrの兄弟があるp要素内のすべてのa要素を選択 */
p:has(+ hr) a:only-child { … }
これを参考に、直後に小見出しを持つ大見出し(伝わる?)のmargin-bottomを調整。いや〜便利だなあ。隣接セレクタを使えば直後の要素にスタイルをあてられるけど、直前の要素を触りたいときがちょこちょこあってもどかしく思ってたんだよね。
図表にfigcaptionがあるときと無いとき(←追記: これは前にも書いてたわ)、引用にciteがあるときと無いときとでスタイルを出し分けられるわけで、ちょっと考えただけでも夢が広がるよね。
#done
☑️てがろぐとブログのwrapperのpadding違う? ブログのが広い気がする 2022-09-07
☑️てがろぐとブログのwrapperのpadding違う? ブログのが広い気がする 2022-09-07
スマホからでも問題なくGyazoっててがろぐ更新できるな。次からこれでいこー。
ブログの画像もGyazoで管理するほうが楽だよなー、サーバの容量とかディレクトリとか考えなくていいし移転するときもURLそのままでいいわけだし。思い立ったが吉日でディレクトリの設定変えちゃおうかな。
今ものすごい真理に気付いてしまったんですけど、てがろぐに投稿する画像もGyazoに投げるようにすればめちゃくちゃ楽なんじゃない???
コンテナクエリ、正直「つまり……どういうこと???」って感じで見てたんだけど、下記の記事の後半でその便利さがやっと分かってきた。
レスポンシブの実装が今までと変わる! CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 | コリス
figcaptionがあるかどうかでスタイルを分けられるってことかー。かなり強くない???
レスポンシブの実装が今までと変わる! CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 | コリス
便利な例としてもう一つ、キャプションを含むfigure要素のスタイルを設定するfigure:has(figcaption)があります
figcaptionがあるかどうかでスタイルを分けられるってことかー。かなり強くない???
てがろぐのスキンに似た感じでpostセクションの一覧を作り直そうかな。