サムネイル付き記事一覧のスタイル指定
Showing
1 changed file
with
42 additions
and
31 deletions
... | @@ -3435,8 +3435,10 @@ body.itemid-132 table { | ... | @@ -3435,8 +3435,10 @@ body.itemid-132 table { |
3435 | ------------------------------------------------------------------------- */ | 3435 | ------------------------------------------------------------------------- */ |
3436 | .interview div.items-leading > div { | 3436 | .interview div.items-leading > div { |
3437 | border-top: 5px solid #003894; | 3437 | border-top: 5px solid #003894; |
3438 | position: relative; | 3438 | display: flex; |
3439 | min-height: 120px; | 3439 | flex-direction: row-reverse; |
3440 | justify-content: space-between; | ||
3441 | align-items: center; | ||
3440 | } | 3442 | } |
3441 | 3443 | ||
3442 | /* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */ | 3444 | /* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */ |
... | @@ -3444,50 +3446,59 @@ body.itemid-132 table { | ... | @@ -3444,50 +3446,59 @@ body.itemid-132 table { |
3444 | display: none; | 3446 | display: none; |
3445 | } | 3447 | } |
3446 | 3448 | ||
3449 | .interview div.items-leading > div > div { | ||
3450 | display: block; | ||
3451 | } | ||
3452 | |||
3447 | .interview div.items-leading div div.page-header { | 3453 | .interview div.items-leading div div.page-header { |
3448 | /* display: block;で再表示させる */ | 3454 | width: 100%; |
3449 | display: block !important; | ||
3450 | } | 3455 | } |
3451 | 3456 | ||
3452 | .interview div.items-leading div div.page-header h2 { | 3457 | .interview div.items-leading div div.page-header h2 { |
3453 | /* .blogに対して指定されているスタイルを取り消し */ | 3458 | /* .blogに対して指定されているスタイルを取り消し */ |
3454 | border-top: none; | 3459 | border-top: none; |
3455 | border-bottom: none; | 3460 | border-bottom: none; |
3456 | /* .blogに対して指定されているスタイルを取り消しここまで */ | ||
3457 | padding-top: 16px; | ||
3458 | padding-bottom: 0px; | ||
3459 | padding-left: 120px; | ||
3460 | margin-bottom: 0px; | ||
3461 | } | ||
3462 | |||
3463 | .interview div.items-leading div dl.article-info { | ||
3464 | /* display: block;で再表示させる */ | ||
3465 | display: block !important; | ||
3466 | padding-left: 120px; | ||
3467 | } | 3461 | } |
3468 | 3462 | ||
3469 | .interview div.items-leading div div.item-image { | 3463 | .interview div.items-leading div div.item-image { |
3470 | /* display: block;で再表示させる */ | ||
3471 | display: block !important; | ||
3472 | height: 75px; | ||
3473 | width: 100px; | 3464 | width: 100px; |
3474 | margin-top: 21px; | 3465 | float: none; |
3475 | text-align: center; | ||
3476 | /* ポジションを親要素を基準に相対位置で指定 */ | ||
3477 | position: absolute; | ||
3478 | top: 0px; | ||
3479 | bottom: 0px; | ||
3480 | left: 0px; | ||
3481 | right: 0px; | ||
3482 | } | 3466 | } |
3483 | 3467 | ||
3484 | .interview div.items-leading div div.item-image img { | 3468 | .interview div.items-leading div div.item-image img { |
3485 | /* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */ | 3469 | /* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */ |
3486 | height: auto; | 3470 | width: 100%; |
3487 | width: auto; | 3471 | } |
3488 | /* 上記の自動設定の、最大値を指定 */ | 3472 | |
3489 | max-height: 75px; | 3473 | .interview div.items-leading div div.item-image { |
3490 | max-width: 100px; | 3474 | margin: 20px 20px 20px 0; |
3475 | } | ||
3476 | |||
3477 | /* レスポンシブ */ | ||
3478 | @media (max-width: 500px) { | ||
3479 | .interview div.items-leading > div { | ||
3480 | flex-direction: column-reverse; | ||
3481 | } | ||
3482 | |||
3483 | .interview div.items-leading div div.page-header h2 { | ||
3484 | font-size: 90%; | ||
3485 | } | ||
3486 | .interview div.items-leading div dl.article-info { | ||
3487 | font-size: 90%; | ||
3488 | } | ||
3489 | |||
3490 | .interview div.items-leading div div.item-image { | ||
3491 | max-width: 500px; | ||
3492 | width: 100%; | ||
3493 | } | ||
3494 | .interview div.items-leading div div.item-image img { | ||
3495 | max-width: 500px; | ||
3496 | width: 100%; | ||
3497 | } | ||
3498 | .interview div.items-leading div div.item-image { | ||
3499 | margin: 20px 0 0; | ||
3500 | } | ||
3501 | |||
3491 | } | 3502 | } |
3492 | 3503 | ||
3493 | /* ------------------------------------------------------------------------- | 3504 | /* ------------------------------------------------------------------------- | ... | ... |
-
Please register or sign in to post a comment