テーマ cocoon-master のカスタマイズ方法 

テーマ cocoon-master でカラムを4つに変更する方法

現状ではカラムが多くて3つのところを、4つに変更。

テーマの全ファイルを対象に
tile_card_3 と ect-3 を検索、それぞれに カラム4を追加

例えば下コード見たいにする

.ect-4-columns > *{
  width: 25%;
  display: inline-block;
}

特にstyle.cssに 25%ではなくて24.6%にする
/cocoon-master/style.css

.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にする

#40 書きコード

<div id="list" class="list<?php echo get_additional_entry_card_classes(); ?>">

/cocoon-master/tmp/list.php
下に変更

  <?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 {
  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%;
}

ABOUTこの記事をかいた人

Uber Eatsの撮影をはじめ、動画など様々な撮影を行なっております。また旅記録、ワードプレスのカスタマイズ、カメラのレビューもご紹介しています。 愛用カメラ:Sony a7iii Zeiss、Sigma、GMレンズ 😉

Reviewsクチコミレビュー

評価:
/ 0件のレビュー

レビュー・クチコミを書く
1
2
3
4
5
送信
     
キャンセル

レビューを書く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です