【なおき様】WordPressのテーマで背景のデザインを変える方法について

質問者なおき様より、WordPressのテーマで背景のデザインを変える方法について質問を頂きました。

Twenty Seventeen、Twenty Sixteen、テーマのカスタマイズやCSSの追加方法・便利なプラグインや色見本のサイトなどについて解説しています。


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress 無料相談 アフィリエイト SEO 無料相談 無料!WPインストール代行・集客サポート

WordPressの背景の設定方法

質問失礼します。

WordPressの背景の設定方法がまったくわかりません・・・。
色々と調べてはみたのですが、どこを見ても皆さんがおっしゃる場所に「背景」が見当たりません。。

外観にも無く、外観のカスタマイズ先にも見当たりません。
もし分かりましたらご返答いただけると助かります。
よろしくお願いいたします!
なおき


WordPressで背景のデザインを変える方法

>なおき様
コメントありがとうございます!
返答させて頂きます。

背景色の変更については、機能がないテーマもあります。

大体のテーマは
外観 > カスタマイズ > 色設定(のような名前)
で変更できたり、
外観 > 〇〇テーマオプション > 独自のメニュー
のような特殊なメニューがあったりします。

これらが無いということであれば、お使いのテーマが背景色のカスタムに対応してないことになります。

ただ、まったく変更する方法がないというわけではありません。

最近のテーマは外観>テーマ>カスタマイズからCSSを追加できたりもします。

色変更機能のあるTwenty Sixteenと、色変更機能の無いTwenty Seventeenの二つで背景色の変更方法を解説したいと思います。

色変更機能のあるテーマを探す

最初から「色変更機能のあるテーマを探す」というのも一つの方法です。

例えば テーマ > 新規追加

00 テーマの探し方

から、
□ カスタム背景
□ カスタムカラー
などにチェック(片方or両方)をして検索すれば、そういった機能を持ったテーマが探せるでしょう。(実際にあるかは見てみないとわかりませんが・・・)

カスタムカラーやカスタム背景

Twenty Sixteenなど、色変更機能がある場合

Twenty Sixteenには、色変更機能があります。

テーマを有効化した状態で
テーマ > カスタマイズ > 色
と進んでいきます。

twenty sixteen 背景色変更

「背景色」はSixteenの場合枠線の事を指しますが、「ページ背景色」は文字などの背景色を変更できるようです。

twenty sixteen 背景色変更02

Twenty Seventeenなど、色変更機能がない場合はCSSを追加

Twenty Seventeenなど、色変更機能がない場合はCSSを追加する形になります。CSSの追加方法にも色々あります。

1.テーマのstyle.cssを編集する方法(非推奨)

wp-content/themes/twentyseventeen/
のフォルダ内にある style.cssを編集する方法もあります。

ほとんどのテーマはstyle.cssを持っているので、このファイルに背景の色を指定したCSSを追記すればデザインを変更できます。

style.css

しかし、デザインを崩してしまったり、テーマを更新すると変更内容も失われてしまうので、非推奨です。

2.カスタマイズからCSSを追加

最近のWordPressであれば外観 > カスタマイズからCSSの追加もできるのではないでしょうか。

twenty-seventeen 外観 背景 02

色のオプションはありませんが、「追加CSS」というものがあると思います。

twenty-seventeen 外観 背景色 変更方法

Twenty Seventeenであれば、以下の方法で色を変更できました。CSSの追加方法もテーマによります。

#content {
    background: #fffcec;
}

#fffcec というのは色のコードです。

色見本のサイトで気に入った色コードを探して置き換えればその色に変更できますし、Googleで「色見本」と検索すればこのように自分で色を作ることもできます。

Google 色見本

WEB色見本 原色大辞典
https://www.colordic.org/

3.プラグインでCSSを追加する

他に、プラグインなどを利用してCSSを追加する方法もあります。
「add css」「custom css」などで検索するとこのようなプラグインがあります。

CSS追加プラグイン

Simple Custom CSS and JS
https://ja.wordpress.org/plugins/custom-css-js/

こういったプラグインは、例えばプラグインのデザインを調整するのに利用したりするとテーマを変更しても反映されるので使い方によっては便利です。

背景のデザイン変更方法 まとめ

いかがでしょうか。

WordPressで背景などデザインを変更する方法はたくさんあります。

ご自身にあった方法で行われるのがよいでしょう。

ただ、CSSを勉強するとどんなテーマを使ってもデザインの調整を行うことができますので、これからWordPressを始めるのであれば
PHP HTML CSS
などは勉強しておいて損はありませんよ!

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。