Cocoonのテーマのカスタマイズで、メインカラムの見出しやサイドバーの見出しデザインのCSSを自分が使うとき用に覚え書きしておくための記事。
メインカラム(記事内の見出し)
記事内で使用する各段落(H2～H4くらいまで)の見出しデザインとそのCSS。
吹き出し風
こんな感じの見出し。
以下CSS。
.article h2, .article h3, .article h4, .article h5, .article h6 {
margin-bottom: 0.8em;
}
.article h2 {
position: relative;
background: #B9E0FF;
padding: 20px;
}
.article h2:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #B9E0FF;
width: 0;
height: 0;
}下線、途中から色を変更
こんな感じ。
以下CSS。
/*段落*/
.article h2, .article h3, .article h4, .article h5, .article h6 {
margin-bottom: 0.8em;
}
.article h2 {
position: relative;
background: #B9E0FF;
padding: 20px;
}
.article h2:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #B9E0FF;
width: 0;
height: 0;
}見出しの先頭に矢印
見出しの先頭にFont Awesomeの矢印を付加した見出し。
こんな感じ。
以下CSS。
.article h2, .article h3, .article h4, .article h5, .article h6 {
margin-top: 0em;
}
.article h4 {
font-weight: 500;
border: solid 0px;
}
.article h4:before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f105";
margin-right: 0.5em;
color: #B9E0FF;
}サイドバーの見出し
続いてサイドバーの見出しデザインのCSS。
丸みのあるボックスに左縦線
背景を塗りつぶして、タイトルの先頭に太めの縦線を表示。
こんな感じ。
以下CSS。
/*サイドバー*/
.sidebar h3 {
margin: 1.2em -12px 1em;
padding-left: 35px;
border-radius: 20px;
font-size: 18px;
position: relative;
background: #f6fafd;
font-weight: 700;
letter-spacing: 0;
}
.sidebar h3::before{
position: absolute;
top: 25%;
left: 20px;
width: 6px;
height: 50%;
content: '';
-ms-filter: "alpha(opacity=20)";
border-radius: 3px;
background: #B9E0FF;
}下線、先頭にFontawesomeアイコンを表示
見出しの先頭にFontawesomeのアイコンを表示して、下線を引く。
下線は途中から色を変更(重ねる)する。
こんな感じ。
以下CSS。
/* サイドバーカスタマイズ */
.sidebar h3 {
border-bottom: 5px solid #E7E7E7;
padding: 10px 0;
position: relative;
background-color: #F4F5F7;
}
.sidebar h3:after {
content: "";
display: block;
line-height: 0;
overflow: hidden;
position: absolute;
left: 0;
bottom: -5px;
width: 25%;
border-bottom: 5px solid #1BABEC;
}
#popular_entries-2 h3:before{
font-family:"Font Awesome 5 Free";
margin-right:10px;
font-size:120%;
color:#FF1493;
content:"\f004";
}CSSで各サイドバーのIDの指定が必要なので、chromeのデベロッパーツールなどを使用してIDを確認する必要あり。
「#サイドバーID h3:before」は、表示しているサイドバー分記述する。
まとめ
記事本文中の段落見出しとサイドバーの見出しの気に入ってるデザインのCSSを覚書として記事にしました。
自分用なので詳細説明はなし。
コメント