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

542 ビュー
テーマ cocoon-master のカスタマイズ方法
Pinterest
Facebook
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:

ABOUT
この記事をかいた人
NEW POST
このライターの最新記事
COMMENTS
コメントを残す

Leave Your Comment

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

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

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

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

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

このサイトについて

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

© Copyright 2021 みこ旅 mikotabi.com.All Rights Reserved.