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

アイキャッチ画像 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での「インデックスのタイトル」のカスタマイズについてまとめてみました。

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

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

【Cocoon】インデックスをカスタマイズする
WordPressテーマ Cocoonの【インデックス(カードタイプ:縦型カード2列)】をカスタマイズしてみました。主なカスタマイズの内容は、インデックスの枠を表示し、マウスカーソルをホバーすると枠を強調するものとなっています。

今回、「インデックス」中のタイトルについてカスタマイズを行ってみました。

現在の「インデックス」デザインは下記の通りです。

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

「インデックスのタイトル」のデザインを、「見出し1タイトル(h1タグ)」「サイドバーの見出し」に合わせたデザインにしたいと思います。

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

「インデックスのタイトル」を「見出し1タイトル(h1タグ)」「サイドバーの見出し」と同じデザインとしたカスタマイズを行います。

カスタマイズ内容

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

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を既存の「インデックスのタイトル」の設定(.entry-card-title)と入れ替えます。

.entry-card-title{ /*タイトル設定*/
  margin-top: 14px; /*サムネイルとタイトル間の余白*/
  margin-bottom: 12px; /*タイトルと説明間の余白*/
  line-height: 1.4; /*行間設定*/
  color: #333; /*タイトルの色*/
  padding: 6px 6px 6px 6px; /*上下左右空白*/
  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-radius: 3px; /*角丸コーナー*/
}

カスタマイズ後の見出し

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

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

前回の「見出し1タイトル(h1タグ)」「サイドバーの見出し」と同じサイトカラーのピンクを採用しつつ、左に縦線を入れたデザインとなりました。

最後に

今回の「インデックスのタイトル」のカスタマイズにより、全ての見出しが共通デザインとなりサイト全体がより一層明るくなりました。

また見出し(タイトル)独自の背景なので、見出しが分かりやすくなりました。

コメント