【Cocoon】インデックスのタイトルカスタマイズ4回目

WordPressテーマ Cocoon

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

MASAa.net | 製品レビューとPCやWordPressに関する情報発信サイト

masaa.net

今回は、WordPressテーマ Cocoonでの4回目となる「インデックスのタイトル」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon インデックスのタイトル

以前にもWordPressテーマ Cocoonの「インデックスのタイトル」についてはカスタマイズを行ってきました。

【Cocoon】タイトルやボタンをキラッと光らせるカスタマイズ

WordPressテーマ Cocoonでの「タイトルやボタンをキラッと光らせる」カスタマイズについてまとめてみました。今回、エントリーカードと商品アイテムボックスのタイトル、SNSフォローボタンとSNSシェアボタンに採用してみました。

masaa.net

2020.04.21

【Cocoon】インデックスホバー時のタイトルのカスタマイズ

WordPressテーマ Cocoonのインデックスについては先日にもカスタマイズを行ってきました。今回そのインデックスをホバーしたときのタイトルに対して少しだけ変化（タイトルに対してサイトカラーのピンク枠線を表示するデザイン）を付けてみました。

masaa.net

2019.12.21

【Cocoon】インデックスのタイトルのカスタマイズ

WordPressテーマ Cocoonのインデックスについては過去にもカスタマイズを行ってきました。今回そのインデックスの中のタイトルについて「見出し１タイトル（h1タグ）」と同じく、ピンクで左に縦線を入れたデザインとしてみました。

masaa.net

2019.12.17

現在の「インデックスのタイトル」のスタイルは下記の通りとなっています。

前回「見出し1（h1タグ）」と「見出し2（h2タグ）」についてスタイルを変更しました。

【Cocoon】見出し（h1〜h6タグ）のカスタマイズ4回目

WordPressテーマ Cocoonでの4回目となる「見出し（h1～h6タグ）」のカスタマイズについてまとめてみました。今回のカスタマイズでは「見出し1（h1タグ）」と「見出し2（h2タグ）」のスタイルを変更して差別化しました。

masaa.net

2020.12.24

今回「インデックスのタイトル」を「見出し1（h1タグ）」と「見出し2（h2タグ）」と同じスタイルに変更するカスタマイズを行いたいと思います。

インデックスのタイトルのカスタマイズ4回目

WordPressテーマ Cocoonでの4回目となる「インデックスのタイトル」のカスタマイズを行います。

カスタマイズ内容

4回目の「インデックスのタイトル」カスタマイズの内容は下記の通りです。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「エントリー記事カードのタイトルのカスタマイズ」に上書きします。

/************************************
** ■エントリー記事カード（インデックス）のタイトルのカスタマイズ
************************************/
.entry-card-title {
/*  display: block;*/
  position: relative;
  word-break: break-all; /*表示範囲に合わせて改行*/
  margin-top: 20px; /*アイキャッチ画像とタイトル間の余白*/
  margin-bottom: 12px; /*タイトルと説明間の余白*/
  line-height: 1.4; /*行間設定*/
  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); /*背景カラー*/
  color:#333; /*文字色*/
  font-size:18px; /*フォントサイズ*/
  letter-spacing:1px; /*文字間隔*/
  text-decoration:none; /*装飾無し*/
  font-weight:bold; /*フォント太さ*/
  padding: 14px 4px 14px 24px; /*内側余白設定*/
  border-radius: 6px; /*角丸コーナー*/
  border: 2px solid #fe619a; /*枠線*/
  transition-duration: 0.6s; /*アニメーション*/
}
.entry-card-title::after {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  content: '';
  width: 8px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #fe619a;
  border-radius: 4px;
}
.e-card-info{ /*日付表示設定*/
  color: #333; /*日付の色*/
}
@media screen and (max-width: 1030px){ /*スマホ表示設定*/
  .entry-card-title { /*タイトル*/
    font-size: 14px; /*フォントサイズ*/
    margin-top: 9px; /*アイキャッチ画像とタイトル間の余白*/
    line-height: 1.4; /*行間*/
  }
  .post-date, .post-update, .post-comment-count { /*日付、コメント数*/
    font-size: 12px!important; /*フォントサイズ*/
  }
}

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を追記します。

/************************************
** ■イメージ画像やアイコンを点滅させる点滅させるカスタマイズ
************************************/
.entry-card-title::after { /*エントリー記事カードのタイトル*/
  animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/
}
@keyframes blink{
  0% {
    opacity: 0.2;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.entry-card-wrap:hover .entry-card-title::after { /*エントリー記事カードのタイトル ホバー時*/
  animation:blink 0.4s ease-in-out infinite alternate; /*ホバー時点滅間隔0.4秒設定*/
  background-color: #ff005d;
}

カスタマイズ後のインデックスのタイトル

今回のカスタマイズによって、「インデックスのタイトル」のスタイルは次の様になりました。

「インデックスのタイトル」を「見出し1（h1タグ）」と「見出し2（h2タグ）」と同様のサイズの変更と左側に縦バーを設置し点滅するスタイルにしました。

また、ホバー時には、縦バーの色を変え点滅間隔を早めています。

最後に

「インデックスのタイトル」の一部を点滅させることによって、少しでもクリック率が上がれば良いかなと思います。