#CSS
カテゴリ名の都合で表示範囲を超えると、ボタンが改行されて2行にならないで、カテゴリ名の方が2行になって不格好かも。
ボタンが2行になってほしいな〜。
→display:inline-blockでボタン自体が適宜改行されるようになった。

今回は親要素にあたるheaderにtext-aline: centerがあったのでdisplayを弄れば解消したが、単純にそこだけ弄ればなんとかなるものでもない。

display: inline-blockは、位置の指定はブロックみたいな仕様らしいので、親要素にtext-aline: centerを入れないと中央寄せにならない。（他にも色々手法はあるようだが、ともかくいずれも親要素は必須っぽい）

【親要素とは】
例えばdiv class = "exampleone"の中にdiv class= "example"を入れたときの、先に出てきた方のdivの事。この例だとclass = exampleoneの方が親要素。

解決に必要な知識しか拾ってないのでぼんやりしたイメージでアレだが、親要素で出力範囲と中央寄せとかのレイアウトの枠を決める。
子要素でbackgroundやテキストの具体的な設定をするイメージか。

#CSS
URLを文中でもお構いなしに折り返しさせたい。URLは単語も役物も気にしなくて良いよ派なので。
あと呟きの方も調整したい。
→現行は以下の記述。クラス名は各々のhtmlがあるので適当。

/*呟き折り返し*/
.example{
   overflow-wrap: anywhere;
   line-break: loose;
}

/*URL折り返し*/
.example a{
   word-break: break-all;
}
overflow-wrapが表示範囲を超える長い英単語が出てきたらそこで折り返すかどうか。
word-breakは単語の途中でも何でも表示範囲を超えたら折り返すかどうかを制御しているイメージ。
上の2つは英数字に関するので、日本語はword-break:keep-allでもなければ折り返し位置に変化なし。
line-breakが日本語の禁則処理に関する制御に該当する。
自分は句読点が文頭に来なければいいのでlooseを使用。

役物も最低限は気になるんですが、それより文字の折り返しで句読点が挟まって来たとき、句読点の前の字が次の行に行って前の行のケツが1字空くのがす〜ごい気になる。丁度line-breakが〜と言っている辺りの所。追い出しという処理らしい。
なのでなんか、そこら辺なんとかできないかな〜。

#CSS
画像投稿テスト。多分あんまり使わない予定だけど設定しておけば気が変わっても安心！
PCでもスマホでも2列でいい感じに表示させたい。
→css上だとimgで制御。実際のcssは以下。marginとかは好みなので省略。max系も好みだけど、画像の出力サイズの限界を定めるのでマスト（多分）なので値の方は任意の値と表記。ぼちぼち微調整してこ。

img{
 object-fit: cover;
 aspect-ratio: 1 / 1;
 max-height: （任意の値）;
 max-width: （任意の値）;
}
maxが描画範囲。
maxのこと、よくわからなくなったので後で調べ直す（2025/8/22）
→maxは最大出力範囲のこと。ここで指定した最大値を超えたときに初めて幅を縮めるとかの調整してくれる。（2025/8/22）

object-fitがmaxの描画範囲に画像をどう表示するかの制御。例えば描画範囲に縦横比無視で無理やり詰めるか、画像サイズは変えずに描画範囲に入れて余ったら余白を出すか、縦横比は変えずに描画範囲いっぱいに出して余分な部分はトリミングするかなど。
aspect-ratioが出力する縦横比の指定。今回は正方形でいいかな〜ってことで1/1。
クリックするとlightboxで本来の画像の縦横比でみょ〜んと出てくる。

imgタグはdisplayの初期値がinlineなので、displayに何も書かなくても勝手に横並びになれるときはなる。marginも効く。

現状中央揃えはしていないので若干ずれてるのと、maxがpx指定なのでデバイスの画面の大きさ次第では列が崩れたりバランス悪かったりする（いわゆるレスポンシブルではない）ので改良の余地あり。
タブレットは持ってないので確認できないのが難しい。

わ～～～い、カスタムは概ね終わり！
あとはスマホの出力調整が明日以降ある感じ。改変、抜粋OKなスキンを複数がっつり参考にしながらで自力ではないのだけど、結構頑張った。
cssのこと、少しわかったかも。