sponsor

変更する前にバックアップすることをオススメします。

見出しを変える CSSエディッタ【WP 初心者】

デベロッパーツールの使い方 WP CSS
デベロッパーツールの使い方
WP CSS
sponsor

テーマファイルエディッタ CSSエディッタ

ページの文字の大きさや色などを変更する場合、子テーマのスタイルシート (style.css)を編集します。

タイトルと見出しの変更

  • タイトルは「スペインの煮込み料理「コシード」を作ってみた」
  • 見出し「Cocido コシード」
インストールしただけのページ
インストールしただけのページ

↓下の様に変更

CSSで変更したページ
CSSで変更したページ
sponsor

スタイルシート (style.css)を編集する方法は2つある

  • テーマファイルエディッタにあるスタイルシート (style.css)を編集する
  • テーマファイルエディッタの上部にリンクされている「不随のCSSエディッタ」で編集する

テーマファイルエディッタのCSSエディッタのスタイルシート

テーマをカスタマイズ
テーマをカスタマイズ

不随のCSSエディッタ→追加CSS

見出しを変える CSSエディッタ
CSSエディッタ

どちらで編集しても構いません。「追加CSS」は、サイトの変更点を確認しながら編集できます。

「子テーマのスタイルシート」と「追加CSS」の優先順位

CSSは次の3カ所で指定でき、追加CSSに記述したCSSが、子テーマや親テーマよりも優先されます。

  1. 追加CSS
  2. 子テーマのスタイルシート
  3. 親テーマ
sponsor

クラス名を確認する

  • クラス名を付けると、その部分だけ変更できる

h2は本文(コンテンツ)の他、サイドバーにも使われています。本文のh2のみを変更する場合には、本文のh2のクラス名を確認します。

クラス名の確認手順 デベロッパツール(開発者ツール)を使用する

  1. ページを開き、F12をクリック
  2. 画像①をクリック
  3. ページのh2にカーソルを合わせる(画像②)

画像②にカーソルを合わせると、h2のクラス名などがわかります。画像③がクラス名です。

  • クラス名お前に「.(ドット)」が付く
  • 本文中のh2のクラス名は.article h2
クラス名の確認手順 F12(デベロッパツール)
クラス名の確認手順 F12(デベロッパツール)
sponsor

ウェブページのタグとクラス名

ウェブページのタイトル h1タグとクラス名

  • タイトルのタグ h1
  • タイトルのクラス名 .entry-title
ウェブページのタグとクラス名
ウェブページのタグとクラス名

ウェブページの見出し h2タグとクラス名

  • 本文のh2のクラス名 .article h2
ウェブページのタグとクラス名
ウェブページのタグとクラス名

ウェブページのサイドバーの見出し hタグとクラス名

  • サイドバーの見出しのクラス名 .sidebar
ウェブページのサイドバーのタグとクラス名
ウェブページのサイドバーのタグとクラス名

テーマによりクラス名は異なります。コンテンツのクラス名が「.entry-content」のテーマもあります。

h1見出しのタグh1はタイトルに使われる
h2見出しのタグh2は見出しに使われる
h3見出しのタグh3はh2の下の小見出しに使われる
.entry-titleタイトルのクラス名クラス名は「.」が付く
.articleコンテンツのクラス名
.entry-contentコンテンツのクラス名
.sidebarサイドバーのクラス名

自分でクラス名を作ることもできます。

クラス名 redを作った例

クラス名どのように表示するか
.red赤い二重線

クラス名とコード

CSSエディッタで、style.css(スタイルシート)に追加します。

.red { border-bottom: 3px double red; }

クラスを追加

  1. 投稿画面のクラスを追加したいブロックをクリック
  2. 右の「ブロック」タブの「高度な設定」を開く
  3. 「追加 css クラス」の欄にクラスを入力

htmlにクラスを記述する時は「.クラス名」ですが、ブロックエディッタに入力する時はクラス名だけです。

ブロックエディッタでクラス名「red」を指定

ブロックエディッタの追加CSS
ブロックエディッタの追加CSS

上記のクラス「.red」を指定したページ

ブロックエディッタの追加CSS

上のh3は「red」を指定、下のh3は通常のh3。

sponsor

CSSエディッタでスタイルの変更手順

様々なサイトでコピペして利用できる見出しのデザインがあるので、CSSエディッタにコピペして利用すると簡単です。その場合、クラス名を付けることを忘れずに。

  1. クラス名とスタイルを確認する
  2. デベロッパーツールで変更部分を確認する
  3. CSSエディッタにコピペする

Google Chrome のデロッパーツールはF12で表示され、Safari は開発者ツールにあります。詳しくは下のリンクへ

クラス名とスタイルを確認する

  1. デベロッパーパーツールでクラス名を確認する
  2. 現在の色やスタイルを確認する
CSSエディッタでH2の変更
CSSエディッタでH2の変更

現在のスタイル(上の画像)

.article h2 {
    background: white;
    border: none;
    position: relative;
    padding-left: 30px;
}

上のcssの意味

プロパティプロパティ値
background(背景)white(白)
border(線)none(なし)
padding-left(左側の余白)30px

.article h2 を変更します。

デベロッパーツールで色の変更を確認する

色や線の種類や余白を変更し確認することができます。

CSSエディッタでスタイルの変更
CSSエディッタでスタイルの変更

見出し(h2)の紫の丸い部分を変更します。

  1. 画像①をクリック
  2. ページのH2の変更したい部分にカーソルを合わせる(画像②)
  3. 色やスタイルの変更を確認をする(画像③)
  4. CSSエディッタにコピペする(画像④)
見出しを変える CSSエディッタ
見出しを変える CSSエディッタ

「.article h2:before」でH2の前の部分の指定をする(上の画像)

.article h2:before {
    height: 1em;
    border-radius: 50%;
    width: 1em;
    left: 0;
    top: 1.15em;
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

上のスタイルの説明

heightとwidth高さと幅1em(文字と同じサイズ)
border-radius線の周囲を丸くする50%丸くする(円になる)
leftとtop左と上の位置数字を変えると丸の位置が移動
background-image背景
inear-gradientグラデーション背景はグラデーション
45deg方向・角度グラデーションの方向
#ff9a9e 0%色・割合%でグラデーションの割合が変わる

background-image: linear-gradient(グラデーションを変更)

.article h2:before {
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

この部分を変更します。

デフォルト変更
#ff9a9e 0%#ff9a9e 50%
#fad0c4 99%#fad0c4 50%
#fad0c4 100%#fad0c4 50%

上の様に数字を変更すると、円のグラデーションが変わります。

見出しを変える CSSエディッタ
見出しを変える CSSエディッタ

H2のスタイルの変更例

CSSエディッタに記述後、公開します。何度でも書き換えは可能です。スタイルを変更することによって、不具合が起こる可能性があるので、事前のバックアップが必要です。

見出しを変える CSSエディッタ
見出しを変える CSSエディッタ