【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連Cocoon

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

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

WordPressテーマ Cocoon

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

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

今回は、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タグ)」「サイドバーの見出し」と同じサイトカラーのピンクを採用しつつ、左に縦線を入れたデザインとなりました。

最後に

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

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

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

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

MASAa.net

コメント