追加CSSでWordPressテーマをカスタマイズする方法のトップイメージ

追加CSSでWordPressテーマをカスタマイズする方法

公開日 / 更新日

CSSがわかる方であればWordPressのデフォルト機能「追加CSS」でテーマのカスタマイズが手軽にできます。こちらはほとんどのテーマで利用できる方法かと思います。
追加したCSSコードはデータベースに保存されるため、子テーマオリジナルプラグインを使わずにテーマの更新に影響されないカスタムができるのがポイントです。「head」内にインラインでCSSコードが出力され、テーマの外部CSSファイルより優先的に反映されます。なので、テーマのCSSを上書きできます。

「追加CSS」の設定方法

手順

  1. WordPressの管理画面にログインし、「外観 > カスタマイズ」と移動します。
  2. CSSの入力欄が表示されるので、そこにCSSコードを入力、「公開」をクリックで完了です。

入力欄には、CSSファイル内に書き込むようにそのままCSSコードを書いていきます。

CSSコード記入例

body {
font-size: 16px; /* 文字サイズ変更 */
background-color: #333; /* 背景色変更 */
color: #fff; /* 文字色変更 */
}

以上です。
各要素に適用されているCSSはブラウザの開発ツール利用が早いかと思います。

「追加CSS」の注意点

追加したCSSはテーマ依存

「追加CSS」で追加したコードはデータベースに保存されますが、追加時に有効だったテーマに紐付いているため、テーマを切り替えると反映されなくなるので注意です。
テーマ切替時に「追加CSS」の入力欄から消えてしまっても、テーマを戻せばまた表示されます。

追加したCSSの保存場所

データベースに保存されると言いましたが、詳しくは「wp_posts」テーブルに「custom_css」というカスタム投稿タイプのデータとして保存されています。
なので、テーマの更新に影響されない代わりにテーマ内のCSSファイルのようにFTPでダウンロードできないので、バックアップのとり方は工夫が必要です。

追加したCSSが反映されない場合

まず最初にブラウザのキャッシュ、キャッシュ系プラグインを使用している場合はプラグインのキャッシュをクリアしてみてください。

次に確認したいのは、「CSSの記述ミス」「セレクタの指定方法」です。
指定方法は、点数加算方式なので、点数が高いセレクタ指定が優先で反映されます。点数は下記表を参考にしてください。

指定方法点数
style属性style=”margin:0;”1000
id#home100
class.home10
属性セレクタa[title]10
要素名div1
疑似要素::before1
ユニバーサルセレクタ*0
CSS指定点数表

その他に抑えておきたいポイントは

  • 同点数の場合、後に記述(読み込み)されたもので上書きされそちらが反映される。
  • 点数が低い指定でも、より詳細に要素(ulよりliに対して等)を指定してる方が優先される。
  • 「!important 指定」では、点数を無視して優先的に反映される。
  • 「!important 対 !important」では、点数が高い方が反映される。

「!important 指定」はCSSトラブルの原因になったり、読み込み速度の低下に影響するので、最終手段という認識で利用することをおすすめします。

ウェルカート対応テーマのトゥエンティフォーセブン

Welcart対応テーマ「Twentyfour Seven」

販売価格 29,700(税込)

WordPressでオンラインショップを構築できるプラグイン「Welcart」向けに開発されたテーマです。

共有ボタン
Facebook Twitter LINE
関連キーワード
|
関連アーカイブへの矢印WordPress/テーマの関連アーカイブ
Shopifyの商品をWordPressに一括連携できるプラグイン「Connect Products with Shopify 」の使用方法

Shopifyの商品をWordPressに一括連携できるプラグイン「Connect Products with Shopify ...

Shopifyの全商品を取得して、WordPressにカスタム投稿として自動登録するプラグインを作成しましたので連携方法をご紹介します。こちらのプラグインはWo...

WordPress子テーマテンプレートの配布とインストール方法

WordPress子テーマテンプレートの配布とインストール方法

WordPressにおいて、テーマのテンプレートファイルの直接編集は、テーマ更新のタイミングで編集内容が上書きされてしまうので、有効化中のテーマを「親テーマ」と...

WordPressテーマをオリジナルプラグインでカスタマイズする方法

WordPressテーマをオリジナルプラグインでカスタマイズする方法

WordPressにおいて、親テーマの直接編集はテーマが更新された際に上書きされてしまうので、テーマのカスタマイズは「子テーマ」を使うか「プラグイン」がおすすめ...

Welcart対応テーマ「Twentyfour Seven」でヘッダーメニュー項目を変更する方法

Welcart対応テーマ「Twentyfour Seven」でヘッダーメニュー項目を変更する方法

当サイトで販売しているWelcart対応テーマ「TwentyfourSeven」のヘッダーメニュー項目のカスタマイズ方法について紹介します。部分的に他のテーマで...

購入したWordPressテーマのインストール方法

購入したWordPressテーマのインストール方法

「TwentyfourSeven」の場合、テーマをインストールする前にカートプラグイン「Welcart」をインストールします。他のテーマの場合は、テーマのインス...