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

2025-11-07

Picmi

URLをコピーしました！

WPのテーマ『cocoon』の親テーマでカラムを4つに変更する方法やsingleページで画像の色の変更方法をご紹介します

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

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

やり方

テーマのある全ファイルを対象に tile_card_3　と　ect-3　を検索、そして、それぞれの下に　カラム4用の表記を追加

例えば下コード追加する

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

.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;
}

.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のコードを

">

">

下に変更

<?php if ( wp_is_mobile() ) : ?>
<?php else: ?>
<?php endif; ?>

<?php if ( wp_is_mobile() ) : ?>
<?php else: ?>
<?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%;
}

.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%;
}