【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 関連記事とコメントの見出し

これまで、「見出し(h1〜h4タグ)」や「サイドバーの見出し」についてはカスタマイズを行ってきました。

【Cocoon】サイドバーの見出しの再々カスタマイズ
WordPressテーマ Cocoonの「サイドバーの見出し」については以前にもカスタマイズを行ってきました。今回「サイドバーの見出し」に対して、改めて「見出し1タイトル(h1タグ)」と同じデザインを採用してみました。
【Cocoon】見出し(h1〜h4タグ)の再々カスタマイズ
WordPressテーマ Cocoonの見出しについては以前にも2度ほどカスタマイズを行ってきました。今回「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」に対して、改めて見出しが分かりやすくなるようなデザインに変更してみました。

現在の「関連記事とコメントの見出し」デザインは下記の通りです。

【Cocoon】関連記事とコメントの見出しのカスタマイズ

今の「関連記事とコメントの見出し」のデザインは文字だけで寂しいので、もう少し華やかなデザインにしたいと思います。

関連記事とコメントの見出しのカスタマイズ

WordPressテーマ Cocoonで「関連記事とコメントの見出し」のカスタマイズを行います。

カスタマイズ内容

「関連記事とコメントの見出し」のカスタマイズ内容は、下記の通りです。

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

/************************************
** ●関連記事見出しカスタマイズ
************************************/
.related-entry-heading{
  position: relative;
  background: -webkit-repeating-linear-gradient(-45deg, #ffddee, #ffddee 3px,#fff9fc 3px, #fff9fc 7px); /*背景カラー*/
  background: repeating-linear-gradient(-45deg, #ffddee, #ffddee 3px,#fff9fc 3px, #fff9fc 7px); /*背景カラー*/
  font-size: 20px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 60px -8px 20px -8px;
  padding: 10px 7px 10px 10px;
  border-left: 8px solid #fe619a; /*左ラインの太さとカラー*/
  border-bottom: 2px solid #fe619a; /*アンダーラインの太さとカラー*/
  line-height: 27px; /*高さ*/
  border-radius: 3px; /*角丸コーナー*/
}

/************************************
** ●コメント見出しカスタマイズ
************************************/
.comment-title {
  position: relative;
  background: -webkit-repeating-linear-gradient(-45deg, #ffddee, #ffddee 3px,#fff9fc 3px, #fff9fc 7px); /*背景カラー*/
  background: repeating-linear-gradient(-45deg, #ffddee, #ffddee 3px,#fff9fc 3px, #fff9fc 7px); /*背景カラー*/
  font-size: 20px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 45px -8px 20px -8px;
  padding: 10px 7px 10px 10px;
  border-left: 8px solid #fe619a; /*左ラインの太さとカラー*/
  border-bottom: 2px solid #fe619a; /*アンダーラインの太さとカラー*/
  line-height: 27px; /*高さ*/
  border-radius: 3px; /*角丸コーナー*/
}

カスタマイズ後の関連記事とコメントの見出し

今回のカスタマイズによって、「関連記事とコメントの見出し」のデザインは次のようになりました。

【Cocoon】関連記事とコメントの見出しのカスタマイズ

以前カスタマイズ行った「見出し(h1〜h4タグ)」の「見出し(h2)」と同じデザインを採用してみました。

最後に

今回の「関連記事とコメントの見出し」のカスタマイズを行ったことで、MASAa.net内全ての見出しがオリジナルデザインとなり統一感が出て分かりやすくなったと思います。

コメント