WordPressテーマ Cocoon
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト
WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。
masaa.net
今回は、WordPressテーマ Cocoonでの「関連記事とコメントの見出し」のカスタマイズについてまとめてみました。
WordPressテーマ Cocoon 関連記事とコメントの見出し
これまで、「見出し（h1〜h4タグ）」や「サイドバーの見出し」についてはカスタマイズを行ってきました。
【Cocoon】サイドバーの見出しの再々カスタマイズ
WordPressテーマ Cocoonの「サイドバーの見出し」については以前にもカスタマイズを行ってきました。今回「サイドバーの見出し」に対して、改めて「見出し１タイトル（h1タグ）」と同じデザインを採用してみました。
masaa.net
2019.12.15
【Cocoon】見出し（h1〜h4タグ）の再々カスタマイズ
WordPressテーマ Cocoonの見出しについては以前にも2度ほどカスタマイズを行ってきました。今回「見出し１タイトル（h1タグ）」～「見出し４（h4タグ）」に対して、改めて見出しが分かりやすくなるようなデザインに変更してみました。
masaa.net
2019.12.12
現在の「関連記事とコメントの見出し」デザインは下記の通りです。
今の「関連記事とコメントの見出し」のデザインは文字だけで寂しいので、もう少し華やかなデザインにしたいと思います。
関連記事とコメントの見出しのカスタマイズ
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; /*角丸コーナー*/
}
カスタマイズ後の関連記事とコメントの見出し
今回のカスタマイズによって、「関連記事とコメントの見出し」のデザインは次のようになりました。
以前カスタマイズ行った「見出し（h1〜h4タグ）」の「見出し(h2)」と同じデザインを採用してみました。
最後に
今回の「関連記事とコメントの見出し」のカスタマイズを行ったことで、MASAa.net内全ての見出しがオリジナルデザインとなり統一感が出て分かりやすくなったと思います。
コメント