【WordPress】デザイン(css)を自由自在にカスタマイズするための手順

スポンサーリンク

WordPressをインストール後、自分好みのテーマを選択すると思います。

各テーマには、デザインを編集するのに必要最低限の機能が備わっています。

しかし、人それぞれデザインにこだわるポイントは異なります。

こだわりを実現するためには、デザインをカスタマイズする能力が必要です。

カスタマイズは「難しい」と思われがちですが、やり方さえ覚えてしまえば簡単にできてしまいます。

本日は、デザインを自由自在にカスタマイズするために必要な手順を解説していきます。

今後、皆さんがデザインをカスタマイズする際の参考にしていただければと思います。

デザインの定義はcssファイルに記述されている

一般的なウェブページのほとんどは、html+css+jsで構成されています。

このうち、cssに変更を加えることによって、自分好みのデザインに仕上げることができます。

cssが記述されている場所は以下の3つです。

  1. htmlファイルの<head>タグ内
  2. htmlファイルの<body>タグ内
  3. 外部ファイル(拡張子がcss)

ほとんどは、3つ目の外部ファイルに記述していると思います。

この外部ファイルをcssファイルと呼びます。

cssの基本文法

cssは、「セレクタ」「プロパティ」「値」の3つで構成されます。

セレクタは、「htmlの各要素」を表しています。

プロパティは、「何を」を表しています。

値は、「どのように」を表しています。

例えば、以下のようなcssを記述したとします。

p {
  color : red
}

上記は、「「pタグ(セレクタ)」の「色(プロパティ)」を「赤(値)」にする」という例になります。

これは一例です。

cssの記述は多岐に渡りますが、

この基本さえ覚えていれば、大抵のcssは編集できます。

その1 要素(セレクタ)を見定める

以降、本題の説明になります。

WordPressのテーマは基本的に他人が作成したものになり、どこにどのような記述がされているかはブラックボックスです。

従って、カスタマイズする際は対象の要素を見つけることから始めなければなりません。

要素はブラウザの検証機能を利用することによって簡単に見つけることができます。

Chrome上で検証機能を利用して、対象要素を見つける手順は以下になります。

  1. ブラウザ上で右クリックする。
  2. リストの「検証(I)」を左クリックする。
  3. 右側の領域にディベロッパーツールが表示されるので、ツールの左上に存在するを選択する。
  4. サイト上の任意の場所にカーソルを合わせ左クリックする。
  5. 対象のソースコードに青くマーカーされる。☜ここが要素(セレクタ)です。

このようにブラウザ上でクリックするだけで、要素(セレクタ)を特定できます。

その2 適切なプロパティを見定める

セレクタを特定できたら、

次にやることは適切なプロパティを見つけることです。

プロパティは様々な種類があります。

color,margin,font-sizeなどなど…

到底覚えてられません。

従って、ここは他の人の力を借りましょう。

プロパティを一覧表にまとめてくれているサイトがありますので、そのサイトを参考に適切なプロパティを選定します。

検索エンジンで「css プロパティ 一覧」を検索すればヒットします。

その3 値を指定する

セレクタとプロパティが決まれば、あとは自分好みの値を指定するだけです。

各プロパティに対して、どのような値を指定すればよいかわからなければ、

先ほどの検索結果と一緒に具体例を載せているサイトもありますので、そのサイトを参考にしてください。

その4 cssをサイトに反映する

手順1~3で決めた値をWordPressの管理画面のカスタマイズ機能を使って、サイトに反映します。

カスタマイズ機能を利用するためには、管理画面の「外観」→「カスタマイズ」を選択します。

次に「追加CSS」を選択します。

選択すると以下のようなフィールドが表示されます。

このフィールド中に、cssを記述することによって、既存のデザインを変更することができます。

まとめ

サイトをカスタマイズする手順の解説でした。

WordPress
スポンサーリンク
エンジニアの日記

コメント