wordpressのテーマ「Twenty Fifteen」では
記事の見出し(h1.h2.h3…など)はなにも装飾されていませんよね
少しさみしいのでかんたんなデザインで装飾します
twentyfifteenでは「entry-content」と「comment-content」を指定します。
entry-contentだけでは表示されませんでしたのでご注意を!
h1はタイトルで使っているので見出しには使えません。
ここではh2からh4までの見出しを装飾します。
まずはh2です
左と下にオレンジの線で装飾しました
1 2 3 4 5 6 7 |
.entry-content h2, .comment-content h2 { margin: 0 0 1.5em; border-left: 7px solid #ff4500; border-bottom: 1px solid #ff4500; padding-left: 5px; } |
h3はデザインは同じに、色を少し薄くしてみました。
1 2 3 4 5 6 7 |
.entry-content h3, .comment-content h3 { margin: 0 0 1.5em; border-left: 7px solid #ff8c00; border-bottom: 1px solid #ff8c00; padding-left: 5px; } |
h4は下線を点線にして色を薄くしました
1 2 3 4 5 6 7 |
.entry-content h4, .comment-content h4 { margin: 0 0 1.5em; border-left: 7px solid #ffa500; border-bottom: 1px dotted #ffa500; padding-left: 5px; } |
表示はこのようになります
見出し2
見出し3
見出し4
見出しはCSSを編集して色々装飾できます
自分のサイトに合ったデザインにしてみたらいいかもしれませんね
「Twenty Fifteenで見出しを装飾したい」への1件のフィードバック