(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約4分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ Cocoon

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

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト
WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

今回は、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内全ての見出しがオリジナルデザインとなり統一感が出て分かりやすくなったと思います。

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

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】