【Cocoon】インデックス(2020年5月版)のカスタマイズ

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPress blog site specialized in PC produce by masaa
このMASAa.netでは、ソフトウェア(Windows)やハードウェア(自作PC)、WordPressテーマのカスタマイズなどパソコン関連の情報を掲載しています。

今回は、WordPressテーマ Cocoonでの「インデックス(2020年5月版)」カスタマイズについてまとめてみました。

WordPressテーマ Cocoon インデックス

これまで多くのWordPressテーマ Cocoonでの「インデックス」に関するカスタマイズを行ってきました。

過去のカスタマイズについては、サイドバーのMASAa.net内検索で「インデックス」「エントリーカード」で検索してみてください。

なお、エントリー記事として掲載していない「インデックス」の修正も密かに行っていたりします。

現在の「インデックス」のスタイルは次の様になっています。

【Cocoon】インデックス(2020年5月版)のカスタマイズ

また、「インデックス」をホバーしたスタイルは次の様になっています。

【Cocoon】インデックス(2020年5月版)のカスタマイズ

前回「インデックス」「エントリーカード」をカスタマイズした時のスタイルと違っていると思います。

と言う事で、今回、ホバー時のアイキャッチ画像の動きを変更してみたので、現状の「インデックス」を含むカスタマイズ内容について紹介したいと思います。

インデックス(2020年5月版)のカスタマイズ

WordPressテーマ Cocoonの「インデックス(2020年5月版)」のカスタマイズを行います。

カスタマイズ内容

「インデックス(2020年5月版)」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、以前のカスタマイズ箇所【記事一覧(インデックス)のカスタマイズ】に上書きします。

過去にカスタマイズを行っていない場合は、今回のカスタマイズ内容を追記します。

/************************************
** ●記事一覧(インデックス)のカスタマイズ
************************************/
.main{
  border:1px solid #fe619a!important; /*コンテンツ枠線設定(インデックスページ除く)*/
}
.home main, .archive main{
  background-color: transparent;
  margin-top: 0px; /*記事一覧上マージン*/
  padding-top: 1px; /*記事一覧下マージン*/
  border: none!important;
}
.entry-card-wrap{ /*エントリーカード設定*/
  transition: all 0.5s ease;
  margin-bottom: 1em!important;
  background-color: white;
  border-radius: 4px;
  border:1px solid #fe619a; /*枠線*/
}
.entry-card-thumb-image.card-thumb-image.wp-post-image { /*アイキャッチ画像設定*/
  display: block; /*インラインボックス生成*/
  max-width: 97%; /*横最大幅設定*/
  max-height: 202px; /*縦最大幅設定*/
  margin: 0 auto;
  border-radius: 6px; /*角丸コーナー*/
  box-shadow: 4px 4px 2px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
  transition-duration: 0.6s; /*アニメーション0.8*/
/*  overflow: hidden!important; /*画像拡大時のはみ出た画像部分の処理*/
}
.entry-card-wrap.a-wrap:hover .entry-card-thumb-image.card-thumb-image.wp-post-image { /*アイキャッチ画像ホバー時エフェクト処理*/
/*  transform: scale3d(1.03,1.03,1); /*エフェクト処理*/
/*  transition-duration: 0.6s; /*アニメーション*/
  transform:rotateY(180deg); /*エフェクト処理*/
  transition-duration: 1.0s; /*アニメーション*/
}
@media screen and (max-width: 480px){ /*スマホ表示設定*/
  .entry-card-thumb-image.card-thumb-image.wp-post-image{ /*アイキャッチ画像設定*/
    box-shadow: 2px 2px 1px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
  }
  .entry-card-wrap.a-wrap:hover .entry-card-thumb-image.card-thumb-image.wp-post-image { /*アイキャッチ画像ホバー時エフェクト処理*/
    box-shadow: 2px 2px 1px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
  }
}
.entry-card-wrap:hover{ /*エントリーカード ホバー時設定*/
  box-shadow: 0px 0px 8px 3px rgba(254,97,154,1);
  text-decoration: none!important;
  background-color: white;
}
.entry-card-wrap:hover .entry-card-title { /*エントリーカード ホバー時タイトル設定*/
  box-shadow: 0px 0px 2px 2px rgba(254,97,154,1);
  background: -webkit-repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 6px,#ffddee 6px, #ffddee 14px); /*背景カラー*/
  background: repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 6px,#ffddee 6px, #ffddee 14px); /*背景カラー*/
  color: #000; /*文字色*/
  transition-duration: 0.6s; /*アニメーション*/
}
.entry-card-wrap.a-wrap:hover{ /*エントリーカード ホバー時設定*/
  background-color: white;
}
.entry-card:hover{ /*エントリーカード ホバー時設定*/
  background-color: white;
}
.entry-card-snippet.card-snippet.e-card-snippet{
  font-size: 14px; /*フォントサイズ*/
  margin-bottom:22px; /*説明文と日付間の余白*/
  color: #333;
  font-weight: 600; /*文字強調*/
  line-height: 1.6; /*行間設定*/
}
.entry-card-title { /*タイトル設定*/
  margin-top: 20px; /*アイキャッチ画像とタイトル間の余白*/
  margin-bottom: 12px; /*タイトルと説明間の余白*/
  line-height: 1.4; /*行間設定*/
  color: #333; /*タイトルの色*/
  padding: 6px 4px 6px 5px; /*上下左右空白*/
  background: -webkit-repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  background: repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  border-left: 8px solid #fe619a; /*左ラインの太さとカラー*/
  border-right: 1px solid #fe619a; /*右ラインの太さとカラー*/
  border-top: 1px solid #fe619a; /*上ラインの太さとカラー*/
  border-bottom: 1px solid #fe619a; /*下ラインの太さとカラー*/
  border-radius: 3px; /*角丸コーナー*/
  transition-duration: 0.6s; /*アニメーション*/
}
@media screen and (max-width: 1030px){ /*タイトル スマホ表示設定*/
  .entry-card-title {
    font-size: 14px; /*スマホでのフォントサイズ*/
    margin-top: 9px; /*アイキャッチ画像とタイトル間の余白*/
    line-height: 1.4; /*スマホでの行間*/
  }
}
.e-card-info{ /*日付表示設定*/
  color: #333; /*日付の色*/
}

カスタマイズ後のインデックス(2020年5月版)

今回のカスタマイズによって、ホバー時の「インデックス(2020年5月版)」は次の様になりました。

【Cocoon】インデックス(2020年5月版)のカスタマイズ

今回のカスタマイズでは、ホバー時のアイキャッチ画像の拡大を廃止し、その代わりホバー時のアイキャッチ画像を横180度に回転させてみました。

アイキャッチ画像を180度に回転させたくない場合

なお、アイキャッチ画像を180度に回転させたくない場合は、カスタマイズ内容の31~34行目の部分を

  transform: scale3d(1.03,1.03,1); /*エフェクト処理*/
  transition-duration: 0.6s; /*アニメーション*/
/*  transform:rotateY(180deg); /*エフェクト処理*/
/*  transition-duration: 1.0s; /*アニメーション*/

に変更します。

最後に

これまでのWordPressテーマ Cocoonのカスタマイズの中では「インデックス」が一番多くなっています。

と言うのも、なかなか気に入った「インデックス」が無く、また色々と不具合が出てしまっているため短期間でカスタマイズ、修正を行っている現状です。

当面はこの「インデックス」での状態になると思いますが、また何かありましたら改めてエントリー記事として掲載していきます。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール