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

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

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

ぶち

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

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

…とその前に注意点。

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

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

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

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

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

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

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

ぶち

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

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

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

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

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

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

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

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

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

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

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

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

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

/*立体バー*/
.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カスタマイザー(外観⇒カスタマイズ)のデザイン設定②を使うと、簡単に見出しのカスタマイズができますが、サルワカさんで紹介されてる見出しデザインを使いたい!という時は、ちょっとしたコツが必要になります。

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

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

ちゃとら
h2だけじゃダメなの?

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

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

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);
}

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

ブルー
俺たちもまだまだ初心者だからな

Diverのサポート体制はしっかりしているので、わからない事がでてきても問い合わせできるから安心。

はち
質問する前に自分で考えてみるのも大事だけどね

デザインによっては調整が難しいものもありますが、見出しのデザインに時間を割いててももったいない!

自分だったら、ちゃちゃっとコピペできるコードがあったらいいのになぁ、と思ってちょっと紹介してみました。

保障はしませんのであしからず…(笑)

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事