【Diver】見出しのカスタマイズ

2020-05-14 2020-05-15 9分32秒

kaeru

WordPressテーマDiverの『文字サイズと行間の変更方法』を紹介していきます。

カエル

Diverの疑問や悩み解決するよ

記事を読み見やすくするため、見出しのデザインに気をつかっていますか？

ブログをやっているのであれば、見出しを変えることは他のブログと違いを出す方法でもありますね。

そこで今回は「Diverでの見出しをカスタマイズする方法」を解説していきます。

本記事を参考にすると、あなたのブログがオリジナリティを持つようになるでしょう。

見出しをカスタマイズするメリット

見出しをカスタマイズするメリットは記事が見やすくなることや、他ブログとの差別化になります。

せっかくのブログであればおしぇれだったり、シンプルにするのも楽しさの１つだと思って、楽しんで設定をしています。

Diverではもともと、見出しを設定できるようになっていますが

今回はDiverにもともと備わっていない見出しを設定(カスタマイズ)する方法を紹介していきます。

カエル

このブログの見出しも
Diverに備わっていない見出しだよ

Diverで見出しカスタマイズする方法

設定方法は、CSSコードを追加して見出しをカスタマイズしていきます。

応用的なカスタマイズを紹介する前に基本的なカスタマイズの紹介をしていきますね。

基本の流れは以下のようになります。

見出し設定を変更
CSS追加にコードを追加
色を変える

それでは順番に説明をしてきます。

見出し設定を変更

◆このパートでは行うこといは下地を作るようなイメージです。

もっと平たくいえば下準備ですね。

WordPressの編集画面から

『外観』→『カスタマイズ』をクリックします。

クリック後以下の画面に切り替わります。

『デザイン設定②』をクリック

その後、スタイルのリストボックスをクリックして『カスタム』を選択します。

右上の『公開』をクリックして終了です。

カエル

下準備はこれで終わりだよ

CSS追加にコードを追加

ここでは『h2の見出し』のカスタマイズ例を3つ紹介していいきます。

以下紹介例になります。

二重線
上下線+ストライプ
ストライプの下線

まずは先ほどと同様にWordpressの編集画面から

『外観』→『カスタマイズ』をクリックします。

クリック後以下の画面に切り替わります。

『追加CSS』をクリック

その後、『追加CSS』にコードを記載をして、見出しをカスタマイズしていきます。

先ほど紹介したカスタマズのコードを順に紹介していくので

コピー＆ペーストして『公開』をクリックしたら完了です。

二重線
上下線+ストライプ
ストライプの下線

それぞれのコードを紹介してしきますね。

1．二重線のコード

この画像が『二重線』参考画像です。

.content h2 {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #FFC778;
  background: #FFFFFF;/*背景色*/
}

2．上下線+ストライプのコード

この画像が『上下線+ストライプ』参考画像です。

.content h2 {
  color: #6cb4e4;
　background: #FFFFFF;/*背景色*/
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

3．ストライプの下線のコード

この画像が『ストライプの下線』参考画像です。

.content h2 {
  position: relative;
　background: #FFFFFF;/*背景色*/
}

.content h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

公開をして、見出しを確認したら見出しがカスタマイズしているはずです。

カエル

コピぺだから簡単だね！