WordPressで「CSSを追加するとは?」ザックリ説明

WordPressを使ってサイトを作成すると、選んだテーマによってデザインは左右されます。最初はテーマの雰囲気が気に入って導入したとしても、実際に使い始めると細かいことが気になることがあります。

文字の大きさや背景の色など、ちょっとしたデザインを変えたい場合、テーマの機能で簡単に修正できるケースと、オリジナルのスタイルを追加するケースがあります。

一般的なブログサービスなどではデザイン用のスタイルシートがオープンになっていて、そこにコードを加えたり修正して対応しますが、WordPressの場合は『追加CSS』を使うことで、テーマに影響することなくデザインに手を加えることができます。

WordPressの『追加CSS』

HTMLでは、body、header、footerのように、あらかじめ名前を決められた要素があり、それぞれに役割が定義されています。

ブラウザソフトがHTMLファイルを読み取ってディスプレイに映し出す際、要素によってどのように映し出すかも定義があります。

ただ、HTMLは「ここはタイトルです」「ここは見出しです」という具合に、文書内の項目ひとつひとつに意味づけをすることがメインなので、複雑なデザインはできません。そこでCSS(スタイルシート)を使ってデザインを指定します。

CSSは要素に対してスタイルを設定できるほか、サイト制作者が独自に名前をつけたCSSを追加することもできます。

独自にCSSを追加する場合は、IDとクラスのどちらかを指定します。2つの違いは次の通りです。

ID
ページ内で1度しか使えない。
class
ページ内で何度でも使える。
1要素に複数のクラスを付けられる。

このような特徴から、IDはどちらかというと構造的な枠組みを作る場所に使われ、各所の細かいデザインにはclassが使われます。

CSSに記述する際、IDの名前の前には「#」(シャープ)を付け、classの前には「.」(ドット)を付けます。

例えば、「見出し1」のデザインをオリジナルにしたい場合、任意のクラス名を.box1などにして新しいCSSを追加し、見出し1のタグ<h1>にクラスを追加します。

<h1 class="box1">オリジナル見出し</h1>
.box1{
background-color: #ff7f7f;
padding: 3px 10px;
}

こうすると、同じページにh1が複数あっても、クラスbox1を追加されたh1だけにスタイルが設定されます。

WordPressの場合、サイトデザインはテーマに依存します。サイトどの場所のどの部位にどんなID名やクラス名がついているかは、テーマによって異なります。

サイトの構造とクラス名を調べる方法

サイト内でデザインを変えたいと思ったら、まずはその部位の要素やクラス名を知る必要があります。それを調べるには検証ツールを使います。

検証ツールはデベロッパーツールとも呼ばれ、元々は開発者用のツールでしたが、ブラウザにその機能が搭載されていて、誰でも簡単に使えます。

検証ツール

まず、構造を調べたいサイトをブラウザで表示しておき、その画面で検証ツールを呼び出します。

  • Chromeの場合:右クリック→[検証]、又は、F12キー
  • Microsoft Edge:右クリック→[その他のツール]→「開発者ツール」、又は、F12キー

詳しい使い方は別途記事にします。

WordPressでCSSを追加する方法

  1. ダッシュボード[外観]→[カスタマイズ]→[追加CSS]をクリック。
  2. CSSコードを記入したら、[公開]ボタンをクリックします。

追加したCSSを適用するには

デザインを変更するために追加・修正したスタイルは、自動的に適用されます。

h1、h2などの要素に指定したスタイルは、自動的にサイト全体の各要素に適用されます。記事作成中に見出しブロックを挿入すれば、サイトの表示にはスタイルが反映しているはずです。

記事本文で使うために追加したクラスの場合は、必要な時に、必要な個所にクラス名を追加します。追加の方法は次の通りです。

記事本文にCSSクラスを追加する

記事本文で利用するには[高度な設定]を利用する方法と、HTMLコードに直接クラス名を入力する方法とがあります。

[高度な設定]を使う
  1. CSSを設定したいブロックをクリックして選択しておきます。
  2. 画面右に表示されている[高度な設定▼]をクリックします。

  3. [追加CSSクラス]項目にクラス名を入力します。

  • [追加CSSクラス]には「.」(ドット)を入力する必要はありません。
  • 複数のクラスを指定する場合は、半角スペースで区切ります。
HTMLコードに直接クラス名を入力する

ブロックに対する指定と、ブロック内の一部に指定する場合に使えます。

[段落ブロック]として挿入したブロックに追加する場合は[HTMLとして編集]に切り替えます。最初から[カスタムHTML]ブロックを挿入して、直接コードを記述することもできます。

  1. スタイルを設定するブロックを選択します。
  2. 表示されるツールの[オプション]から[HTMLとして編集]を選択します。

  3. HTMLコードを直接入力します。クラスの指定はタグの中にclass="クラス名"を追加します。

タイトルとURLをコピーしました