サイト:
http://tabizukan-backpacker.com
こんばんは。
新着記事(例えばトップ画面のwork-styleはwork-styleカテゴリの新着記事になります)を現在のデフォルト状態から縦型カードに実装したいです。親テーマ(cocoon)には縦型カードの元CSSがあるのですが、どのようにカスタマイズすればいいのかわからずご質問させていただいた次第です。恐れ入りますがよろしくお願いします。
なお、新着記事のcssは.new-entry-cardであります。
(また、小職はCSSの初心者〜中級者レベルのスキルであり、下記の情報だけでは本題の回答を述べるのが難しい場合、必要な情報を追記させていただきますので、大変恐れ入りますが下記に加えて必要な情報があればお申し付けくださいませ。)
親テーマCSS
/************************************
** 縦型カード
************************************/
.rect-vertical-card .related-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.rect-vertical-card .related-entry-card-wrap {
padding: 5px;
}
.rect-vertical-card .related-entry-card-thumb {
float: none;
width: 100%;
}
.rect-vertical-card .related-entry-card-thumb img {
width: 100%;
}
.rect-vertical-card .related-entry-card-content {
margin: 0;
}
.rect-vertical-card .related-entry-card-title {
font-size: 16px;
}
.rect-vertical-card-3 .related-entry-card-wrap {
width: 33%;
}
.rect-vertical-card-4 .related-entry-card-wrap {
width: 24.5%;
}
/************************************
** エントリーカードタイプ
************************************/
.ect-entry-card {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.ect-entry-card .entry-card-wrap {
width: 49.5%;
display: inline-block;
margin-bottom: 12px;
}
.ect-entry-card .entry-card-wrap .entry-card-thumb {
width: 100%;
float: none;
}
.ect-entry-card .entry-card-wrap .entry-card-thumb img {
width: 100%;
}
.ect-entry-card .entry-card-wrap .entry-card-content {
margin: 0;
}
.ect-entry-card .entry-card-wrap .post-date, .ect-entry-card .entry-card-wrap .post-update {
margin-right: 0;
}
.ect-entry-card.ect-tile-card .a-wrap {
margin: 0 0.25% 12px;
}
.ect-entry-card.ect-tile-card .entry-card-content {
padding: 0;
}
.ect-entry-card.ect-tile-card .card-snippet {
padding: 0;
margin: 0;
}
.ect-entry-card.ect-tile-card .card-meta {
position: static;
}
.ect-entry-card.ect-tile-card .a-wrap {
margin: 0 0.16666% 12px;
}
.ect-2-columns > * {
width: 49.5%;
display: inline-block;
}
.ect-3-columns {
justify-content: space-around;
}
.ect-3-columns .entry-card-wrap {
width: 33%;
padding: 7px;
}
.ect-3-columns .entry-card-snippet {
max-height: 4em;
overflow: hidden;
}
.ect-3-columns > * {
width: 33%;
display: inline-block;
}
.ecb-entry-border .entry-card-wrap {
border: 1px solid #ccc;
}
.entry-card-day span:last-child {
margin-right: 0;
}
.front-top-page .ect-big-card-first .a-wrap:first-of-type .card-thumb,
.ect-big-card .card-thumb {
float: none;
width: 100%;
}
.front-top-page .ect-big-card-first .a-wrap:first-of-type .card-content,
.ect-big-card .card-content {
margin: 0;
}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/10/07 14:53