プロフィール項目に使えそうな自由装飾
説明リストを利用してプロフィール項目に使えそうな自由装飾作った

名前

ナンラカノ・ハイフバ

性別

不明

職業

てがろぐスキン配布

経歴と生い立ち

2023年9月22日、勢いでてがろぐスキン配布開始。

PCは横並び、スマホからだと縦並びになります。
てがろぐ上での記述は以下のようになります(てがろぐのリスト記法に「DL」と「proflist」というオプションをつけ、項目と説明を改行して交互に書く)。

[L:DL:proflist:
名前
ナンラカノ・ハイフバ
性別
不明
職業
てがろぐスキン配布
経歴と生い立ち
2023年9月22日、勢いでてがろぐスキン配布開始。
]

リストの記述方法(公式ページ)

(10/24追記)
今気付いたけど中の説明欄にリンク貼ったりするとブロックごと横並びになっちゃいますね…応急手当ですが、説明全体を適当な名称の自由装飾で囲んでおくと表示崩れをごまかせます。
↓こんな感じ
[F:a:2023年9月22日、勢いで[てがろぐ](https://～)スキン配布開始。]

↓以下CSS(スキンのCSSファイルか、設定→フリースペース→【上書きスタイルシート】に書き足すといいと思います)

/* 項目列挙用説明リスト */
dl.listdeco-proflist {
width: 100%;
margin: 1rem auto;
display: grid;
grid-template-columns: 150px 1fr;/* 項目タイトル150px、説明幅いっぱいの繰り返し */
gap: 0.5rem;
}
.listdeco-proflist dt {/* 項目タイトル */
margin: 0;
padding: 0.3rem 0.8rem;
color : white;/* 項目タイトルの文字色 */
background-color: silver;/* 項目タイトルの背景色 */
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.listdeco-proflist dd {/* 項目説明 */
margin: 0;
display: flex;
align-items: center;
}
@media only screen and (max-width: 499px) {/* 画面幅499px以下のとき横並びを解除 */
dl.listdeco-proflist { display: block;}
.listdeco-proflist dt { margin-bottom: 0.5rem;}
.listdeco-proflist dd { margin-bottom: 1rem; justify-content: center;}}
.listdeco-proflist + br { display: none;} /* 直後の改行を非表示 */

#自由装飾