ブログ

/* ----------------------------------------- */ /* View slug: blog - start */ /* ----------------------------------------- */ @media screen and (min-width: 783px){ .col-sm-4{ padding-left: 5px; padding-right: 5px; } } .post_container { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; } .item { padding: 10px; } .box-big1 { grid-column: 1/3; } .box-big2 { grid-column: 2/4; } /* Responsive */ @media (max-width: 991px){ .post_container { grid-template-columns: 1fr; grid-template-rows: auto; } .box-big1,.box-big2 { grid-column: 1; grid-row: auto; } } /* ----------------------------------------- */ /* View slug: blog - end */ /* ----------------------------------------- */

/* ----------------------------------------- */ /* Content Template: post内のアイテムをループする - 開始 */ /* ----------------------------------------- */ .wrapper{ max-width: 800px; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; } .image{ position: relative; width: 100%;/*　トリミングしたい枠の幅（固定にしたい場合はサイズを入力）　*/ padding-top: 80%;/*　トリミングしたい枠の高さ（固定にしたい場合はサイズを入力）　*/ overflow: hidden;/*　画像が枠からはみ出た部分はトリミング（非表示）する　*/ margin: 0 auto; } .image img{ /* 画像を上下左右に中央配置する（絶対指定） */ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* 画像の最大サイズは枠の1.1倍まで */ max-width: 130%; max-height: 130%; } html { -webkit-font-smoothing: antialiased; } @media (min-width: 768px){ td{ padding: 5px; width: 33.33333%; vertical-align: top; } } @media (max-width: 767px){ td{ display: block; } } .topics{ position: relative; margin-bottom: 20px !important; font-family:'AxisStd-Medium'; } .topics p{ font-size:80%; line-height: 1.6em !important; } .topics a:hover{ text-decoration: none; } @media only screen and (min-width: 992px) { .box-big1 .topics{ height: 400px; overflow: hidden; } .box-big1 .post_section{ position: absolute; bottom: 0px; padding: 10px 20px 14px; background-color: rgba(255, 255, 255,0.7); width: 101%; } } @media only screen and (min-width: 992px) { .box-big2 .topics{ height: 400px; overflow: hidden; } .box-big2 .post_section{ position: absolute; bottom: 0px; padding: 10px 20px 14px; background-color: rgba(255, 255, 255,0.7); width: 101%; } } .post_title{ font-family:'AxisStd-Medium'; font-size:110% !important; margin-top:5px; } a.wide{ display: block; } a.overwhite{ background-color:#ffffff; display:block; } a.overwhite:hover img{ filter: alpha(opacity=60); /* ie lt 8 */ -ms-filter: "alpha(opacity=60)"; /* ie 8 */ -moz-opacity:0.6; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.6; /* Safari 1.x */ opacity:0.6; } a.overwhite img{ -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .post_description a{ color:#666; background-color: transparent; } .post_date{ font-family:'AxisStd-Medium'; font-size:70% !important; margin-bottom:5px; color: #666; margin-top: 5px; } .post_tag{ font-family:'AxisStd-Medium'; font-size:70% !important; color: #666; } .post_tag a{ padding:5px 10px; background-color: #eee; line-height: 2.2em; color: #be2f28; } .post_tag a:hover{ color: #fff; background-color: #990000; } /* ----------------------------------------- */ /* Content Template: post内のアイテムをループする - 終了 */ /* ----------------------------------------- */