WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約6分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

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

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

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

【Cocoon】タイトルやボタンをキラッと光らせるカスタマイズ
WordPressテーマ Cocoonでの「タイトルやボタンをキラッと光らせる」カスタマイズについてまとめてみました。今回、エントリーカードと商品アイテムボックスのタイトル、SNSフォローボタンとSNSシェアボタンに採用してみました。
【Cocoon】インデックスホバー時のタイトルのカスタマイズ
WordPressテーマ Cocoonのインデックスについては先日にもカスタマイズを行ってきました。今回そのインデックスをホバーしたときのタイトルに対して少しだけ変化(タイトルに対してサイトカラーのピンク枠線を表示するデザイン)を付けてみました。
【Cocoon】インデックスのタイトルのカスタマイズ
WordPressテーマ Cocoonのインデックスについては過去にもカスタマイズを行ってきました。今回そのインデックスの中のタイトルについて「見出し1タイトル(h1タグ)」と同じく、ピンクで左に縦線を入れたデザインとしてみました。

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

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

前回「見出し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;
}

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

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

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

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

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

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

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

最後に

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

 
MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント