Diverの見出しをカスタムするコツと、簡単コピペOKなカスタマイズ例

2019年10月7日

WordPressテーマ「Diver」の見出しは、ver.4.6.5の時点で13種類（入力補助除く）のスタイルが用意されていますが、自分好みにカスタマイズしたい、ってこともあると思います。

Diverの見出しスタイルの中には、「カスタム」という項目があって、初心者でもカスタマイズしやすい配慮がされてるんですよね。

ぶち

そのカスタム機能をどうやって使ったらいいかがわかんないんだよね…

というわけで今回は、簡単コピペできる見出し例と、Diverカスタマイズのコツ、2本立てでお届けします。

…とその前に注意点。

子テーマを使用する
事前にバックアップをとる

尚、今回のカスタマイズ例はDiver（ver4.6.5）を使用、デフォルトの状態で行ったものです。

Contents

Diverを簡単コピペでカスタムする見出し例
Diverの見出しをカスタムするコツ

Diverを簡単コピペでカスタムする見出し例

Diverに限らず、ブログで使える見出し例は既にネット上で沢山紹介されています。

やっぱり有名どころではサルワカさんのとこ。

参考サイト

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

おしゃれな見出しデザイン例を、なんと68種類も公開してくれてるんです。

でも、そのままコピペしたら撃沈…。なんで？

ぶち

難しい話はいいから、コピペできる見出しを教えてほしいー

じゃ、じゃあ難しい話は次章に回して、Diverのカスタマイザーには入ってないデザインのコードを用意しましょうか。

カスタマイザー（外観⇒カスタマイズ⇒デザイン設定②）ではデフォルトのカスタムを設定してね。

二重線の下ラインの見出しコード

h2見出しのデザインをシンプルな二重線の下ラインにするコードです。

はち

自分で考えた風になっちゃってるけど違うからね？！サルワカさんのおかげだからね！

style.css、もしくは追加cssにコピペします。

/*二重線下ライン*/
.content h2 {
  border-bottom: double 5px #40e0d0;/*二重線*/
  background: transparent;
  color: #555;/*文字色*/
}

上記コードのカラー設定だとこんな見出しになります↓

色のコードを変更する際は、半角英数で入力を。

色コードはこちらを参考にどうぞ↓

2019.8.25

ブログの配色は管理人のイメージにも直結しますし、見やすさも大事。かといって、なかなか想像だけでは配色のイメージってむずかしい。（私だけ…？）そこで今回は、私が配色選びに使っているサイト4つと、便利なツールをご紹介です。...

立体ボックスの見出しコード

立体ボックスのような見出しデザインのコード。

/*立体バー*/
.content h2 {
  padding: 0.4em 0.5em;
  color: #555;/*文字色*/
  background: #f4f4f4;
  border-left: solid 5px #40e0d0;/*左の線*/
  border-bottom: solid 3px #d7d7d7;
}

上記のカラー設定だと、こんな見出しになります↓

ストライプの下線

かわいい感じのストライプ下線の見出しコード。

/*ストライプの下線*/
.content h2 {
  background: transparent;
  color: #555;/*文字色*/
}
.content h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #40e0d0, #40e0d0 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #40e0d0, #40e0d0 2px, #fff 2px, #fff 4px);
}

上記のカラー設定だと、こんな見出しになります↓

きじとら

サルワカさんに感謝しかないよね

マテリアルデザインがとってもおしゃれなWordPressテーマ、SANGOの購入はこちら

Diverの見出しをカスタムするコツ

Diverカスタマイザー（外観⇒カスタマイズ）のデザイン設定②を使うと、簡単に見出しのカスタマイズができますが、サルワカさんで紹介されてる見出しデザインを使いたい！という時は、ちょっとしたコツが必要になります。

デフォルト（カスタム）の状態だと、ｈ2はこのようなデザインになっています↓

この状態の見出しをカスタマイズするために、サルワカさんのページで紹介されているコードのh1の部分を、.content h2と書き換えて更に、必要なコードの追加＆不要なコードの削除をしていきます。

ちゃとら

h2だけじゃダメなの？

きじとら

h2だけだと、カスタマイザーのデフォルトカラーが優先されちゃうから、ちょっとややこしいの。

ディベロッパーツール（右クリックの検証やF12）で要素の確認をすると、デフォルトのｈ2は以下のようになっているのがわかります。

h2 {
    position: relative;
    background-color: #607d8b;
    color: #fff;
    padding: .5em 1em;
    font-size: 1.6em;
    margin: 1.5em 0 1em;
    line-height: 1.5;
}

ということは、1章で紹介した【ストライプの下線】を使いたい場合、デフォルトでボックスになっている部分を白（あるいは透明）にして、文字色も変更する必要があります。

そのために、

.content h2 {
  background: transparent;
  color: #555;/*文字色*/
}

というコードを追加したんですが、

カスタマイザーの設定で予め文字色を指定しておくこともできます。（スタイルによっては基本色を設定しておいてもOK）

すると、追記するコードは以下のようにすることができます。

/*ストライプの下線*/
.content h2 {
  background: #fff;
}
.content h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;	
  height: 7px;
  background: repeating-linear-gradient(-45deg, #40e0d0, #40e0d0 2px, #fff 2px, #fff 4px);
}

ディベロッパーツールで確認すれば、カスタマイズのコツがわかってきますね。