d7c66042 by TaishiTokudome

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

1 parent c41f7a31
......@@ -3435,8 +3435,10 @@ body.itemid-132 table {
------------------------------------------------------------------------- */
.interview div.items-leading > div {
border-top: 5px solid #003894;
position: relative;
min-height: 120px;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
/* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */
......@@ -3444,50 +3446,59 @@ body.itemid-132 table {
display: none;
}
.interview div.items-leading > div > div {
display: block;
}
.interview div.items-leading div div.page-header {
/* display: block;で再表示させる */
display: block !important;
width: 100%;
}
.interview div.items-leading div div.page-header h2 {
/* .blogに対して指定されているスタイルを取り消し */
border-top: none;
border-bottom: none;
/* .blogに対して指定されているスタイルを取り消しここまで */
padding-top: 16px;
padding-bottom: 0px;
padding-left: 120px;
margin-bottom: 0px;
}
.interview div.items-leading div dl.article-info {
/* display: block;で再表示させる */
display: block !important;
padding-left: 120px;
}
.interview div.items-leading div div.item-image {
/* display: block;で再表示させる */
display: block !important;
height: 75px;
width: 100px;
margin-top: 21px;
text-align: center;
/* ポジションを親要素を基準に相対位置で指定 */
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
float: none;
}
.interview div.items-leading div div.item-image img {
/* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */
height: auto;
width: auto;
/* 上記の自動設定の、最大値を指定 */
max-height: 75px;
max-width: 100px;
width: 100%;
}
.interview div.items-leading div div.item-image {
margin: 20px 20px 20px 0;
}
/* レスポンシブ */
@media (max-width: 500px) {
.interview div.items-leading > div {
flex-direction: column-reverse;
}
.interview div.items-leading div div.page-header h2 {
font-size: 90%;
}
.interview div.items-leading div dl.article-info {
font-size: 90%;
}
.interview div.items-leading div div.item-image {
max-width: 500px;
width: 100%;
}
.interview div.items-leading div div.item-image img {
max-width: 500px;
width: 100%;
}
.interview div.items-leading div div.item-image {
margin: 20px 0 0;
}
}
/* -------------------------------------------------------------------------
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!