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

テーマ cocoon-master のカスタマイズ方法
Share on pinterest
Pinterest
Share on facebook
Facebook
Share on twitter
Twitter

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

見出し

テーマ 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%;
}
				
			

Share this post:

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Share on email
ABOUT
この記事をかいた人
NEW POST
このライターの最新記事
COMMENTS
コメントを残す

Leave Your Comment

Most Popular
人気の記事
Categories
カテゴリー
このサイトについて

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

私の作品、アドビストックで販売しています
あなたもAdobe Stockで写真を販売して副業しませんか?

撮った写真を得ることができます♪
会員登録してアップロードしてあとは待つだけ!

めちゃくちゃ簡単なので是非!