caeb56f3 by TaishiTokudome

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

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