インタビューページのスタイル修正
Showing
1 changed file
with
15 additions
and
11 deletions
... | @@ -3449,7 +3449,6 @@ body.itemid-132 table { | ... | @@ -3449,7 +3449,6 @@ body.itemid-132 table { |
3449 | .interview .items-leading div .page-header { | 3449 | .interview .items-leading div .page-header { |
3450 | display: block; | 3450 | display: block; |
3451 | width: 100%; | 3451 | width: 100%; |
3452 | max-width: 800px; | ||
3453 | padding: 0; | 3452 | padding: 0; |
3454 | margin: 32px 0; | 3453 | margin: 32px 0; |
3455 | } | 3454 | } |
... | @@ -3462,23 +3461,29 @@ body.itemid-132 table { | ... | @@ -3462,23 +3461,29 @@ body.itemid-132 table { |
3462 | padding: 0; | 3461 | padding: 0; |
3463 | } | 3462 | } |
3464 | 3463 | ||
3464 | /* 記事情報(公開日など)にデフォルトでかかっているスタイルを取り消し */ | ||
3465 | .interview .items-leading div .article-info > * { | ||
3466 | margin-bottom: 0; | ||
3467 | } | ||
3468 | |||
3465 | .interview .items-leading div .article-info { | 3469 | .interview .items-leading div .article-info { |
3466 | /* 記事情報が一つ以上表示された場合に横並びにする */ | 3470 | /* 記事情報が一つ以上表示された場合に横並びにする */ |
3467 | display: flex; | 3471 | display: block; |
3468 | /* 記事情報のpositionを右下に指定 */ | 3472 | /* 記事情報のpositionを右下に指定 */ |
3469 | position: absolute; | 3473 | position: absolute; |
3470 | bottom: -45px; | 3474 | margin: 0; |
3475 | bottom: 8px; | ||
3471 | right: 0; | 3476 | right: 0; |
3472 | } | 3477 | } |
3473 | 3478 | ||
3474 | .interview .items-leading div .item-image { | 3479 | .interview .items-leading div .item-image { |
3475 | display: flex; | 3480 | display: flex; |
3476 | /* 配下のimage要素a要素を縦方向にセンタリング */ | 3481 | /* flexによる圧縮をさせない */ |
3482 | flex-shrink: 0; | ||
3483 | /* 配下のimage要素とa要素を縦方向にセンタリング */ | ||
3477 | align-items: center; | 3484 | align-items: center; |
3478 | width: 100px; | 3485 | width: 120px; |
3479 | /* 横並びしている隣のdivに潰されないようにmin-widthを指定。 */ | 3486 | height: 90px; |
3480 | min-width: 100px; | ||
3481 | height: 100px; | ||
3482 | /* デフォルトでかかっているfloatプロパティの解除 */ | 3487 | /* デフォルトでかかっているfloatプロパティの解除 */ |
3483 | float: none; | 3488 | float: none; |
3484 | /* 配下の画像のはみ出した部分は非表示にし、トリミングする */ | 3489 | /* 配下の画像のはみ出した部分は非表示にし、トリミングする */ |
... | @@ -3507,10 +3512,9 @@ body.itemid-132 table { | ... | @@ -3507,10 +3512,9 @@ body.itemid-132 table { |
3507 | } | 3512 | } |
3508 | 3513 | ||
3509 | .interview .items-leading div .item-image { | 3514 | .interview .items-leading div .item-image { |
3510 | max-width: 500px; | ||
3511 | width: 100%; | 3515 | width: 100%; |
3512 | /*max-height = 画面幅 - 両サイドのpaddingとしてwidthと揃え、正方形にトリミングする */ | 3516 | /*max-height = 画面幅 - 両サイドのpadding * 0.75として4(幅):3(高さ)とする*/ |
3513 | max-height: calc(100vw - 30px); | 3517 | max-height: calc((100vw - 30px) * 0.75); |
3514 | height: auto; | 3518 | height: auto; |
3515 | margin: 20px 0 0; | 3519 | margin: 20px 0 0; |
3516 | } | 3520 | } | ... | ... |
-
Please register or sign in to post a comment