MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


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

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

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

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
などは勉強しておいて損はありませんよ!

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA