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

INDEX

WordPressテーマ Cocoon
1. WordPressテーマ Cocoon インデックスのタイトル
インデックスのタイトルのカスタマイズ4回目
1. カスタマイズ内容
2. カスタマイズ後のインデックスのタイトル
最後に

WordPressテーマ Cocoon

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

MASAa.net|WordPressとPCのある生活を楽しむための情報発信サイト

WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

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

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

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

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

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

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

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

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

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

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

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

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

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

今回「インデックスのタイトル」を「見出し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;
}