HOME
何らかの配布場
nanraka-no-haihu-ba
てがろぐ用のスキンを配布する場所
No.124
#自由装飾
説明リストを利用してプロフィール項目に使えそうな自由装飾作った
名前
ナンラカノ・ハイフバ
性別
不明
職業
てがろぐスキン配布
経歴と生い立ち
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;}
/* 直後の改行を非表示 */
畳む
つぶやき
2024.10.18(Fri) 19:57
この投稿と同じカテゴリに属する投稿:
カテゴリ「つぶやき」の投稿だけを見る
(※
時系列順で見る
)
この投稿日時に関連する投稿:
2024年10月18日の投稿だけを見る
(※
時系列順で見る
)
2024年10月の投稿だけを見る
(※
時系列順で見る
)
この投稿に隣接する前後3件ずつをまとめて見る
« No.123
No.125 »
初期表示に戻る
FREESPACE
フリースペースエリアです。
管理画面から自由に編集ができます。
・プロフィールとか
・リンク集とかにしてもいいかも
TOP
CATEGORY
GALLERY
アバウト
(2)
配布
(15)
デモ用
(12)
つぶやき
(78)
返信
(21)
開発
(11)
鍵付き投稿
(1)
自由装飾
(5)
下げる投稿
(1)
スキンtenran
(5)
スキンsirason
(5)
スキンmeikan
(1)
スキンkozin
(7)
スキンippen
(8)
スキンhokan
(2)
スキンaien
(3)
カスタマイズ
(21)
お知らせ
(2)
htmlテンプレート
(1)
NSFW
(2)
全年月 (129)
2024年 (65)
2024年11月 (8)
2024年10月 (4)
2024年09月 (5)
2024年08月 (3)
2024年07月 (9)
2024年06月 (5)
2024年05月 (10)
2024年04月 (11)
2024年03月 (3)
2024年02月 (2)
2024年01月 (5)
2023年 (53)
2023年12月 (10)
2023年11月 (19)
2023年10月 (14)
2023年09月 (10)
2022年 (11)
2022年02月 (10)
2022年01月 (1)
新しい順(降順)
時系列順(昇順)
説明リストを利用してプロフィール項目に使えそうな自由装飾作った
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;} /* 直後の改行を非表示 */
畳む