d7c66042 by TaishiTokudome

サムネイル付き記事一覧のスタイル指定

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