【初心者必見】WordPressカスタマイズ入門

wordpressを用いてサイトを立ち上げたばかりで、

「もっとデザインを凝ったものにしたいけど、カスタマイズ画面って変更できる項目多すぎてよくわからない・・・」

といったお悩みを抱えていませんか？

実は私もwordpressの運用を始めたときは、全く同じ気持ちでした。

本記事では

• カスタマイズ画面の見方
• カスタマイズの方法

について説明をさせていただきます。本記事をご覧いただきながら、ぜひともご自身のサイトでも実践しみてください！

1. 二通りのカスタマイズ方法がある

WordPressのデザインカスタマイズ方法は大きく分けて二通りあります。

1. カスタマイズ画面からカスタマイズ
2. CSSを直接記載

WordPressのテーマデザインにはCSSが主に用いられています。そのため、Wordpressの内部構造を理解していてかつ、CSSを記述することが出来る方は「2. CSSを直接記載」という方法も実施することができます。

しかし、Wordpressを立ち上げた方の多くはそこまでの知識・経験を備えていない場合が多いです。というよりも、そもそもWordpressはCSSの知識を持っていなくても自由にカスタマイズ・運営ができるという利点があるものです。

ということで、CSSを直接書いていくことが困難だと思われる方は「1. カスタマイズ画面からカスタマイズ」という選択肢を選ばれることをおすすめいたします。

2. カスタマイズ画面の見方

WordPressでサイトのデザインを変える最も簡単ですぐにお試しいただける方法が「Wordpressの管理画面からカスタマイズをする」という方法です。その流れは以下の通りです。

1. テーマを選ぶ
2. 外観カスタマイズを行う
3. プラグインの追加でデザイン・機能を追加する

それでは、一つずつ見ていきましょう！

1. テーマを選ぶ

まずはテーマ選びです。テーマ選びのポイントは、

求めているデザインに最も近いものを厳選することです。

有料のテーマや無料のテーマ、SEOに強いテーマ等種類は星の数ほどありますので、じっくりと選んでみてください。下記にテーマ選定の参考になりそうな記事をいくつかご紹介させていただきます。

今回は「Twenty Twenty」という標準的なテーマを使用しています。

上記の画面からそれぞれの項目を編集をすることができます。

それでは、各項目で編集できる内容について説明をしていきます。

• サイト基本情報
  • ロゴ画像の設定やサイトのタイトル・キャッチフレーズを変更できる
  • ロゴ画像を設定しなければタイトルテキストのみが表示されます
• 色
  • 背景・ヘッダー・フッター・メインカラーを変更できる
• テーマオプション
  • ヘッダー上に検索（虫眼鏡）を表示するかどうかやアーカイブの表示方法等について変更できる
• カバーテンプレート
  • オーバレイや不透明度を変更できる
• 背景画像
  • サイトの背景に画像を設定できる
• メニュー
  •  メニュー項目の設定を追加できる。
  • メニューとは「ホーム」「お問い合わせ」等のリンクをまとめて表示している部分のこと
• ウィジェット
  • フッターにRSSやアーカイブのウィジェットを配置できる
• ホームページ設定
  • サイトをロードしたときに最初に表示されるページを設定できる
• 追加CSS
  • CSSを直接記載することができる

上記は「Twenty Twenty」で表示される項目ですが、その他のテーマでもおおよそ共通して変更できる箇所です。テーマによってはホーム画面でのアニメーション（スライドアニメーション等）の追加ができるものもあります。

3. CSSでカスタマイズを試してみる

「少しだけデザインを変更したいな」

「見出しのデザインだけ変更したいな」

というときは、追加CSSの出番です。追加CSSは先述の外観カスタマイズ画面から遷移することができます。

今回は例として「見出しの文字を装飾する」というデザインを適用してみようと思います。

見出し（h2）の装飾

今回使用しているTwenty Twentyというテーマは、非常にシンプルなデザインのため、記事の表示方法も非常にシンプルです。記事の中でも読者の目を引く「見出しの文字」でさえも、他の文字との違いは大きさのみです。

今回はそんな質素な見出しに、追加CSSを用いてボーダーを装飾をしみてましょう。

※CSSの記述方法については説明を省きます

まずはこちら↓が変更前のデザインです。

こちらに下記のCSSを「追加CSS」として記載していきます。中見出しと小見出しにボーダー（枠）を追加するコードです。中見出しは実線で、小見出しには点線を追加します。

すると、以下のように見出し(h2/h3)にそれぞれ実線と点線が追加されていることがわかります。

このように、CSSの知識がある場合はテーマやプラグインだけではカスタマイズできないような部分についてもデザイン変更をすることができます。

4. まとめ

本記事では、「wordpressを始めたばかりでデザインカスタマイズの方法がわからない」という方を対象に２つのカスタマイズ方法を説明いたしました。

1. カスタマイズ画面からカスタマイズ
2. CSSを直接記載

その中で、デザインの方向性を決める上でも「テーマの選定」が重要であること、追加CSSを使えば更に細かくデザイン変更ができるということを説明いたしました。また、CSSを学んでいく過程では追加CSSを実際に変更してみることでより学びも深まると思います。デザインの変更は積極的に行って、読者にとって見やすいデザインを追求してみてください。

今後経験を積まれていくことで、追加CSSではなくテーマの元となるCSSを変更したり、追加でプラグインを導入していくといったステップへと移行していくことも可能です！

せっかく立ち上げたwordpressサイトですので、積極的にカスタマイズを挑戦してみてください！その第一歩として本記事が皆様のWEBサイト構築に少しでもお役に立てていれば幸いです。