hodzue.jp/memo/

:has()を使って、てがろぐをさらにちょっと直感的に書けるようにした〜。メモだけしとく。

img + br:has(+ .deco-figcaption),
.deco-imgcontainer + br:has(+ .deco-figcaption) {
  display: none;
}

てがろぐ投稿欄の改行をbrとして出力する設定にしてるから、imgとfigcaptionを1行で書かないといけなくて、むりやり運用でカバーしてる感じがやだな〜と思ってたんだよね。上記のコードもこれはこれで力技なんだけど、とにかく何も考えずに投稿すれば意図したままに出力されるようになった。よかった。

サイトの文章置き場の名称をblogからthoughtsに変更した。中身（ひとつひとつの記事）はそのままだから気持ちの問題といえばそうなんだけど、自分にとってしっくりくるのはthoughtsだなと思って。こういうことの積み重ねで個人サイトは少しずつ居心地のいい場所になっていくのだよ（？）


before

after

• no-style-please | Hugo Themes

こーいう簡素ですっきりしたデザイン本当に好き。

ヘッダーの画像、素朴にHTMLにimgタグで貼ってたのがずっと気になってたので、CSS側のbackgroundで指定するやり方にやっと書き換えた。

#todo
☐シングルページのh1のmargin-bottomがちょっと狭すぎる？　メタ情報の行と近すぎる気がする。line-heightを小さくしたからだと思うのでそのへん調整した方がいいかも
☐ついでにメタ情報のmargin-bottomもちょっと調整する？　こっちはマークアップどうなってるか確認してからで
☑️figcaptionあるなしでimgのスタイルだしわける  #done @ 2022-09-13

Hugoの仕様についてあれこれ調べてて、いや〜これはいつか未来の自分も詰まりそうなポイントだからしっかりメモっておかなきゃな〜って意気揚々とScrapboxを開いたら全く同じメモを2年半前に書き残してたことが分かった。つまり「これはいつか未来の自分も詰まりそうなポイントだ」も含めて同じ轍ってことでしょ？　過去のアタシGJすぎる。

ちなみにこれね:

• 外部リンクにだけtarget=_blankをつける方法いろいろ - wkpmm🐤

#done
☑️サイトのヘッダー、てがろぐのヘッダーと微妙にずれる。rootのフォントサイズと各要素のremとemを確認する 2022-09-10
☑️ブログ本文中のリンクにマージンきいてる？ 2022-09-10

:has()の活用例を見てたらまさに求めていたものがあったから、さっそくサイトに実装してみた。

CSSの実装はこれでかなり進化する！ Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ | コリス
/* 直接のhrの兄弟があるp要素内のすべてのa要素を選択 */
p:has(+ hr) a:only-child { … }

これを参考に、直後に小見出しを持つ大見出し（伝わる？）のmargin-bottomを調整。いや〜便利だなあ。隣接セレクタを使えば直後の要素にスタイルをあてられるけど、直前の要素を触りたいときがちょこちょこあってもどかしく思ってたんだよね。
図表にfigcaptionがあるときと無いとき（←追記: これは前にも書いてたわ）、引用にciteがあるときと無いときとでスタイルを出し分けられるわけで、ちょっと考えただけでも夢が広がるよね。

#done
☑️てがろぐとブログのwrapperのpadding違う？　ブログのが広い気がする 2022-09-07

スマホからでも問題なくGyazoっててがろぐ更新できるな。次からこれでいこー。