#自由装飾

No.124

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

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

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

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

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

↓以下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;} /* 直後の改行を非表示 */
畳む

つぶやき 2024/10/18(Fri) 19:57 edit_note

この投稿と同じカテゴリに属する投稿：
- カテゴリ「つぶやき」の投稿だけを見る (※時系列順で見る)
この投稿日時に関連する投稿：
- 2024年10月18日の投稿だけを見る (※時系列順で見る)
- 2024年10月の投稿だけを見る (※時系列順で見る)
この投稿に隣接する前後3件ずつをまとめて見る

« No.123

初期表示に戻る

FREESPACE

フリースペースエリアです。
管理画面から自由に編集ができます。
・プロフィールとか
・リンク集とかにしてもいいかも

何らかの配布場

nanraka-no-haihu-ba