テーマ cocoon-master でカラムを4つに変更する方法
現状ではカラムが多くて3つのところを、4つに変更。
やり方
テーマのある全ファイルを対象に tile_card_3 と ect-3 を検索、そして、それぞれの下に カラム4用の表記を追加
例えば下コード追加する
.ect-4-columns > *{
width: 25%;
display: inline-block;
}
/cocoon-master/style.css のにはカラム幅を25%ではなくて24.6%にする
.ect-4-columns {
justify-content: space-around;
}
.ect-4-columns .entry-card-wrap {
width: 24.6%;
padding: 4px;
}
.ect-4-columns .entry-card-snippet {
max-height: 4em;
overflow: hidden;
}
.ect-4-columns > * {
width: 24.6%;
display: inline-block;
}
モバイルでカラムを3、PCでカラムを4にする方法
/cocoon-master/tmp/list.php の＃40のコードを
<div id="list" class="list<?php echo get_additional_entry_card_classes(); ?>">
下に変更
<?php if ( wp_is_mobile() ) : ?>
<div id="list" class="list ect-tile-card-3 ect-vertical-card ect-tile-card ect-3-columns">
<?php else: ?>
<div id="list" class="list ect-tile-card-4 ect-vertical-card ect-tile-card ect-4-columns">
<?php endif; ?>
singleページで画像がblurになってるので変更
style.cssの3箇所：.date-tags、.article-header h1、.eye-catch imgを下に変更
.date-tags {
font-size:11px;
position: absolute;
top: 40px;
left: 50px;
color: #545454;
text-shadow: 1px 1px 1px #fff,
1px -1px 1px #fff,
-1px 1px 1px #fff,
-1px -1px 1px #fff,
0 0 22px #fff;
}
.article-header h1 {
position: absolute;
z-index: 1;
top:50px;
left:50px;
margin-right:18px;
font-size:1.2em;
color: #545454;
text-shadow: 1px 1px 1px #fff,
1px -1px 1px #fff,
-1px 1px 1px #fff,
-1px -1px 1px #fff,
0 0 22px #fff;
}
.eye-catch img {
width: 100%;
}
