3ae507d6 by root

インタビューページのスタイル修正

1 parent e6f1a889
...@@ -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 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!