初めてでもできる！WordPressテーマを簡単カスタマイズ！ | WordPress（ワードプレス）テーマ＆プラグイン販売コミュニティコムショップ

「WordPress（ワードプレス）Tips」は、株式会社コミュニティコムが運営する「 WordPressテーマ＆プラグイン販売コミュニティコムショップ」が、 WordPressを快適に使うために知っておきたいノウハウやヒントを解説するシリーズです。

こんにちは、株式会社コミュニティコムの堀内です。

「会社のWEB担当になって、WordPressでサイトを作ったのはいいけど、見出しの色や大きさ・背景色とかを自分で変えたいなぁ。簡単に調整できる方法はないのかな？」

このようなお悩みありませんか？

今回は、弊社が作成したオリジナルテーマ【dekiru】を使って、簡単なカスタマイズ方法をご紹介します。
また、ブラウザはGoogleChromeを使っています。

追加CSSに記述してカスタマイズ！

見出しや背景色などカスタマイズするときは、WordPress管理画面の【外観】→【カスタマイズ】と進み、【追加CSS】をクリックします。

カスタマイズ画面に遷移したら【追加CSS】を探して選択すると、入力エリアが表示されます。

上図の赤枠の中に、カスタマイズしたい箇所のタグやクラスなどを指定し、CSSを記述するだけでOKです。
今回はCSSの記述方法は割愛します。

CSSの記述方法は下記を参考にしてみてください。
（参考：スタイルシートリファレンス（目的別））

また、編集箇所のタグやクラスを調べる方法は下記を参考にしてみてください。
（参考：WordPressのテーマをカスタマイズする際のDeveloperToolsの使い方(初級編)）

試しに今回は、ページの見出しをカスタマイズしてみたいと思います。
目標は［文字の大きさ変更］［文字色の変更］この２つをやっていきます。

編集したいページに遷移し、管理バーのカスタマイズを選択します。

追加CSSの編集エリアに以下を追記します。

h1{
  font-size: 40px;
  color: #0000ff;
}

【font-size:40px】というのが文字の大きさ変更、【color:#0000ff】というのが文字色変更のCSSです。

こちらを記述すると、右の画面でリアルタイムで変化します。

リアルタイムで変化がわかると微調整だったりもしやすくてとても便利ですよね。

編集が終わったら最後に、【公開】ボタンを押してカスタマイズ完了です！

いかがでしたでしょうか。
CSSを調べないといけない手間はかかりますが、ちょっとコードを追記するだけで簡単にカスタマイズをすることができますので是非チャレンジしてみてください！

それではまた！