インタビューページのスタイル修正
Showing
1 changed file
with
35 additions
and
19 deletions
... | @@ -3433,69 +3433,85 @@ body.itemid-132 table { | ... | @@ -3433,69 +3433,85 @@ body.itemid-132 table { |
3433 | /* ------------------------------------------------------------------------- | 3433 | /* ------------------------------------------------------------------------- |
3434 | OB・OGインタビューページに対するスタイル指定 | 3434 | OB・OGインタビューページに対するスタイル指定 |
3435 | ------------------------------------------------------------------------- */ | 3435 | ------------------------------------------------------------------------- */ |
3436 | .interview div.items-leading > div { | 3436 | .interview .items-leading > div { |
3437 | border-top: 5px solid #003894; | 3437 | border-top: 5px solid #003894; |
3438 | display: flex; | 3438 | display: flex; |
3439 | flex-direction: row-reverse; | 3439 | flex-direction: row-reverse; |
3440 | justify-content: space-between; | 3440 | justify-content: space-between; |
3441 | align-items: center; | 3441 | align-items: center; |
3442 | position: relative; | ||
3442 | } | 3443 | } |
3443 | 3444 | ||
3444 | /* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */ | 3445 | /* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */ |
3445 | .interview div.items-leading > div > * { | 3446 | .interview .items-leading > div > * { |
3446 | display: none; | 3447 | display: none; |
3447 | } | 3448 | } |
3448 | 3449 | ||
3449 | .interview div.items-leading > div > div { | 3450 | .interview .items-leading div .page-header { |
3451 | display: block; | ||
3452 | } | ||
3453 | |||
3454 | .interview .items-leading div .item-image { | ||
3450 | display: block; | 3455 | display: block; |
3451 | } | 3456 | } |
3452 | 3457 | ||
3453 | .interview div.items-leading div div.page-header { | 3458 | .interview .items-leading div .article-info { |
3454 | width: 100%; | 3459 | display: flex; |
3460 | position: absolute; | ||
3461 | bottom: -45px; | ||
3462 | right: 0; | ||
3463 | } | ||
3464 | |||
3465 | .interview .items-leading div .page-header { | ||
3466 | width: 100%; | ||
3467 | max-width: 800px; | ||
3468 | padding: 0; | ||
3469 | margin: 32px 0; | ||
3455 | } | 3470 | } |
3456 | 3471 | ||
3457 | .interview div.items-leading div div.page-header h2 { | 3472 | .interview .items-leading div .page-header h2 { |
3458 | /* .blogに対して指定されているスタイルを取り消し */ | 3473 | /* .blogに対して指定されているスタイルを取り消し */ |
3459 | border-top: none; | 3474 | border-top: none; |
3460 | border-bottom: none; | 3475 | border-bottom: none; |
3476 | margin: 0; | ||
3477 | padding: 0; | ||
3461 | } | 3478 | } |
3462 | 3479 | ||
3463 | .interview div.items-leading div div.item-image { | 3480 | .interview .items-leading div .item-image { |
3464 | width: 100px; | 3481 | width: 160px; |
3465 | float: none; | 3482 | float: none; |
3466 | } | 3483 | } |
3467 | 3484 | ||
3468 | .interview div.items-leading div div.item-image img { | 3485 | .interview .items-leading div .item-image img { |
3469 | /* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */ | 3486 | /* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */ |
3470 | width: 100%; | 3487 | width: 100%; |
3471 | } | 3488 | } |
3472 | 3489 | ||
3473 | .interview div.items-leading div div.item-image { | 3490 | .interview .items-leading div .item-image { |
3474 | margin: 20px 20px 20px 0; | 3491 | margin: 24px 24px 24px 0; |
3475 | } | 3492 | } |
3476 | 3493 | ||
3477 | /* レスポンシブ */ | 3494 | /* レスポンシブ */ |
3478 | @media (max-width: 500px) { | 3495 | @media (max-width: 500px) { |
3479 | .interview div.items-leading > div { | 3496 | .interview .items-leading > div { |
3480 | flex-direction: column-reverse; | 3497 | flex-direction: column-reverse; |
3481 | } | 3498 | } |
3482 | 3499 | .interview .items-leading div .page-header { | |
3483 | .interview div.items-leading div div.page-header h2 { | 3500 | margin: 16px 0 32px; |
3484 | font-size: 90%; | ||
3485 | } | 3501 | } |
3486 | .interview div.items-leading div dl.article-info { | 3502 | .interview .items-leading div .article-info { |
3487 | font-size: 90%; | 3503 | font-size: 90%; |
3488 | } | 3504 | } |
3489 | 3505 | ||
3490 | .interview div.items-leading div div.item-image { | 3506 | .interview .items-leading div .item-image { |
3491 | max-width: 500px; | 3507 | max-width: 500px; |
3492 | width: 100%; | 3508 | width: 100%; |
3493 | } | 3509 | } |
3494 | .interview div.items-leading div div.item-image img { | 3510 | .interview .items-leading div .item-image img { |
3495 | max-width: 500px; | 3511 | max-width: 500px; |
3496 | width: 100%; | 3512 | width: 100%; |
3497 | } | 3513 | } |
3498 | .interview div.items-leading div div.item-image { | 3514 | .interview .items-leading div .item-image { |
3499 | margin: 20px 0 0; | 3515 | margin: 20px 0 0; |
3500 | } | 3516 | } |
3501 | 3517 | ... | ... |
-
Please register or sign in to post a comment