CSS タイトルデザイン

ブログタイトルのCSSセレクタは、使用するテーマに合わせて「h1.entry-title」から適宜変更してください。

H2～H4のタイトルデザインには、それぞれ「h2k」「h3k」「h4k」のCSSクラス名を設定しています。クラス名は、覚えやすい名前に変更しても構いません。

/* エントリータイトル */
h1.entry-title{
  color: #fff;
  position: relative;
  padding: 0.5rem 1rem calc(1rem + 10px);
  background: #235787;
}

h1.entry-title:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 2px solid #666;
}

/* 見出し */
.h2k {
    margin-top: 50px ;
    padding: .3em .7em;
    border-left: 7px solid #235787;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

.h3k {
	  margin-top: 60px ;
    display: flex;
    align-items: center;
    padding: .3em .6em;
    background-color: #f2f2f2;
    color: #333333;
}

.h3k::before {
    display: inline-block;
    width: 3px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #235787;
    content: '';
}

.h4k {
    padding:0.5em .5em.1em;
    border-bottom: 3px dotted #235787;
    color: #333333;
	display: inline-block;
}