“Cocoon”見出しをカスタマイズ

CSSコードを使ってメインカラムの見出し（h2～h6)と、サイドバー（h3）の見出しをカスタマイズします。

メインカラムの見出し（h2～h6）

Before（デフォルト）

After（カスタマイズ）

サイドバーの見出し
（サイドバーの見出しはh3がデフォルト）

Before（デフォルト）

After（カスタマイズ）

Contents

CSSで見出しをカスタマイズ
1. CSSコードを貼り付ける場所と手順
2. カスタマイズの説明

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コードを貼り付ける場所と手順

CSSコードを貼り付ける手順

「設定画面」から「外観」の「テーマエディター」を開く。
Cocoon Child: スタイルシート (style.css)に貼り付け。

↓↓シンプルで使いやすい見出しが出来上がりました。

カスタマイズの説明

今回はシンプルな見出しにカスタマイズしましたが、もっと自分らしいデザインにしたいと思う方は、サルワカさんのサイトがお勧めです。沢山の「見出しデザイン」がコードと共に紹介されているので、好みのデザインを探してみて下さい。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

色々なサイトで「見出しデザイン」をカスタマイズする方法が紹介されていますが、「コピペ」しても思い通りにならない場合があります。

そのような現象の多くは、デフォルトの設定が残ってしまっているケースが多いので、デフォルトの状態を確認して、不要なものを消すコードも取り入れます。

見出しタグのデフォルトを確認

デフォルトの見出しは下図の通り、H2には背景に薄っすらと色が付いています。H3は上下に線があり左に縦線のアクセント、H4には上下に線。H5とH6は下線だけです。

デフォルトの見出し

このデフォルトの状態に「下線を引く」だけのCSSコードを書き込むと、部分的にデフォルトの設定が残ってしまいます。

例えばH2の見出しに、下線を引くコード「border-bottom: solid 3px black;」だけを書き込むと、下図のように下線は引けますが背景の色は残ったままになります。

これに背景を消すコード「background: none;」を足し込むと下図の通り背景が無色になります。

これと同様に「H3」「H4」の見出しには周囲の線を消すためのコード「border: none;」を足し込みました。

このようにデフォルトの状態を把握してコードを付け加えると思い通りの見出しが作れます。

CSSコードの基本

CSSとはWebページの見栄えを整えるもので、基本は３つの要素を用います。

CSSの要素

セレクタ：CSSによるデザイン指定をどのHTML要素に適用させるかを指定する。
プロパティ：どのスタイルを適用するのかを指定する。（文字・色・他）
値：実際にどんな内容を適用するのかを指定する。（文字の大きさや太さ・色の種類・他）

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は↓↓で解説。

⇐ Back　Top　Next ⇒