memoひとことメモrss_feed

気になったページなどは別途こちらに記録しています。

書籍のデータを引用するためのコードに手を入れた。現時点で気になってる点は解消できたかな。

いい感じにノリノリで文章書いてたらいきなりPC落ちて喉がヒュッて鳴った。再起動したら復旧できたけどもうこんな思いしたくないよ〜〜〜、いいかげんPC買い替えるなりデータまわりの環境整えるなりしないと😩

:has()非対応ブラウザのことはもう知らん!ってpostしてからiPhone開いたら普通に:has()あたってなくて笑った。iOSをアップデートしてなかったせいだったので速やかに最新版をインストールさせていただきました。

:has()、Firefoxとかはまだ正式対応してないんだっけ? でもシェア率を考えたらぶっちゃけもうええやろ感ある。とくにここはごく小規模な個人の趣味サイトだし。

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

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

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

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

before:

after:

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

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

現実と地続きの世界にSF的な要素が絡んでて、恐ろしさと面白さが共存してる感じで続きが気になる。

#todo

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

この髪型かわいい。

スプラトゥーン3、家族が買ったのでちょこちょこやってる。わたしはSwitch Online加入してないのでひとまずオフラインのヒーローモードだけ。それでも十分なボリュームがありそうだから楽しい。ヒーローモード踏破したらオンラインでやってみたいけど、その頃にはみんなうまくなってて自分は足引っ張るだけになっちゃうかなー。でもスプラトゥーン自体はじめてだから、今参入したところで足を引っ張ることには変わりないんだよね。それならヒーローモードで練習してからのほうがまだいいかな、みたいな。

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

ちなみにこれね:

95HELLフルオでいけるじゃん……知らんかった……😇

レリバ+クラリオンにリリィ・ランちゃん・ヴァンピィちゃんの編成。武器が揃ってないから時間かかっちゃうけど張り付かなくていいだけありがたいから文句ない!

すごくいいって以前postしたお掃除アプリTody、10日と経たずにごらんのありさま。

今日はちょっとやる気があるから、ラジオ流しながらあれこれ済ませてる。

#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があるときと無いときとでスタイルを出し分けられるわけで、ちょっと考えただけでも夢が広がるよね。

止まるなキケンで1位獲れた😳 すっごく苦手な種目だから嬉しい😳

夢の国風のスキンにしてる。

11時間寝た。こういう休息の取り方はよくないと分かってはいるんだけどたまにやってしまうんだなあ。

てかライフォに無限の可能性があるんじゃん(今?????)

古戦場が終わったら他の編成も見直してみよう。 #gbf