CSSコードを使ってメインカラムの見出し(h2~h6)と、サイドバー(h3)の見出しをカスタマイズします。
メインカラムの見出し(h2~h6)
Before(デフォルト)
After(カスタマイズ)
サイドバーの見出し
(サイドバーの見出しはh3がデフォルト)
Before(デフォルト)
After(カスタマイズ)
CSSで見出しをカスタマイズ
カスタマイズの説明は後述しますが、下記のCSSコードを”Cocoon”子テーマの「style css」にコピペするだけで前段の見出しが出来上がります。
/*****************************
* 見出しのカスタマイズ
* **************************/
/*(h2~h6)カスタマイズ*/
.entry-content h2 {
padding: .3em 0em;
background: none; /*背景の色*/
border-bottom: solid 3px black; /*下線の種類 太さ 色*/
}
.entry-content h3 {
padding: .3em 0em;
background: none; /*背景の色を無くす*/
border: none; /*線を消す*/
border-bottom: solid 3px black; /*下線の種類 太さ 色*/
}
.entry-content h4 {
padding: .2em 0em;
background: none; /*背景の色を無くす*/
border: none; /*線を消す*/
border-bottom: solid 2px black; /*下線の種類 太さ 色*/
}
.entry-content h5 {
padding: .2em 0em;
border-bottom: solid 2px black; /*下線の種類 太さ 色*/
}
.entry-content h6 {
padding: .2em 0em;
border-bottom: solid 2px black; /*下線の種類 太さ 色*/
}
/******************************
**(サイドバー)カスタマイズ
******************************/
/*見出し(h3)をカスタマイズ*/
.sidebar h3 {
background: none; /*背景色を消す*/
font-size: 16px;
letter-spacing: 2px;
display: inline-block;
position: relative;
width: 100%;
padding: 0;
text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
content: '';
position: absolute;
top: 50%;
width: 15%; /*ラインの長さ*/
border-top: 3px solid #444d53; /*ラインの色*/
}
.sidebar h3::before {
left: 0;
}
.sidebar h3::after {
right: 0;
}
CSSコードを貼り付ける場所と手順
カスタマイズの説明
今回はシンプルな見出しにカスタマイズしましたが、もっと自分らしいデザインにしたいと思う方は、サルワカさんのサイトがお勧めです。沢山の「見出しデザイン」がコードと共に紹介されているので、好みのデザインを探してみて下さい。
色々なサイトで「見出しデザイン」をカスタマイズする方法が紹介されていますが、「コピペ」しても思い通りにならない場合があります。
そのような現象の多くは、デフォルトの設定が残ってしまっているケースが多いので、デフォルトの状態を確認して、不要なものを消すコードも取り入れます。
見出しタグのデフォルトを確認
デフォルトの見出しは下図の通り、H2には背景に薄っすらと色が付いています。H3は上下に線があり左に縦線のアクセント、H4には上下に線。H5とH6は下線だけです。
このデフォルトの状態に「下線を引く」だけのCSSコードを書き込むと、部分的にデフォルトの設定が残ってしまいます。
例えばH2の見出しに、下線を引くコード「border-bottom: solid 3px black;」だけを書き込むと、下図のように下線は引けますが背景の色は残ったままになります。
これに背景を消すコード「background: none;」を足し込むと下図の通り背景が無色になります。
これと同様に「H3」「H4」の見出しには周囲の線を消すためのコード「border: none;」を足し込みました。
このようにデフォルトの状態を把握してコードを付け加えると思い通りの見出しが作れます。
CSSコードの基本
CSSとはWebページの見栄えを整えるもので、基本は3つの要素を用います。
h2 { color: #000000; }
赤文字が「セレクタ」、青文字が「プロパティ」、緑の文字が「値」
今回使用した「h2」のCSSコードを基に説明すると。
.entry-content h2 {
padding: .3em 0em;
background: none; /*背景の色*/
border-bottom: solid 3px black; /*下線の種類 太さ 色*/
}
- 1行目の「.entry-content h2」で、h2の見出しを指定します。
- 2~4行目の先頭部分「padding」「background」「border-bottom」が「プロパティ」で適用箇所を指定します。
- 2~4行目の「プロパティ」の後ろの部分が「値」になり、具体的な内容を指定します。
HTML及びCSSは↓↓で解説。