見出しタグをカスタマイズしました | こじらせ四十路の寝て暮らしたい

見出しタグをカスタマイズしました

当ブログはSimplicity2というテーマを使っているのですが、

名前通り見た目的にはとてもシンプル。

なので、ちょっとずつカスタマイズしてみようかなと思います。

勉強しながら、ちょっとずつね。

今回は見出しタグの見た目を変更してみました。

参考にしたサイトはここです。

CSSで、

.article h2

.article h3

.article h4

を設定すればよさそうでした。

hなんとかの数字はほかにも設定できるんだけど、使うのはh2 h3 h4ぐらいかなと。

そんでもって、h2タグとh3タグはこんな感じの見た目になりました。

今のサイトを見てもらえればいいんだけれど、今後さらに変えたとき用に載せときますね。

結局参考にしたサイトから切り貼りしただけだけど、うちで設定したCSSを載せておきます。

/*---------------------------------
見出し
--------------------------------*/
.article h2 {
  padding: .5em .75em;
  margin: 1px;
  background-color: #f6f6f6;
  border-left: 6px solid #000099;
}

.article h3,
#comment-area h3,
#related-entries h3{
  font-size:23px;
  border-bottom: 3px solid #99ccff;
}

.article h4 {
  border-left: 15px solid #6699ff;
  border-bottom: 0px;
  padding: 5px 0 5px 10px;
  margin-bottom: 30px;
}

今回はとりあえずの修正をしてみましたが、無駄にアニメーションとか今後もっといじってみたいですね。

ではでは。

スポンサーリンク

シェアする

スポンサーリンク