WordPressのCSSを編集する方法としては、テーマファイルの「style.css」を編集したり、新たにCSSファイルを追加する方法が一般的です。ただ、初心者やPC苦手な方の場合は、CSS編集エリアを使う方法がオススメです。CSS編集をテーマファイルの機能として持っている場合は少ないので、その場合はプラグイン「simple custom CSS」などを使うのがオススメです。

2種類の王道の方法と初心者向けの方法

WordPressのCSSを編集する方法は、王道の方法として以下の2つの方法があります。

  1. 直接テーマファイルのCSS(style.css)を編集する
  2. 独自のCSSファイルを追加する

「(2)独自のCSSファイルを追加する」の場合は、追加したCSSファイルの宣言をする必要があります。

追加するCSSファイルの名前が「base.css」の場合は、「header.php」に以下の様に追加します。

上の行は、元々のCSSの宣言ですので、この行を見つけてもらってその下に下の行を追加します。

ちなみに、「get_template_directory_uri()」は、テーマの入っているディレクトリを出力する命令です。

ですので、独自に作ったCSSは、テーマファイルのあるディレクトリにアップロードすればOKです。

この作業は、テーマファイルのディレクトリが、サーバー上のどこにあるのか分からない人には難しいのでやめた方がいいと思います。

そこで、初心者、PC苦手な方向けの方法をご紹介します。

それはCSS設定エリアを使う方です。

詳細は後述しますが、スタイルシートへの変更や追加が少しならこの方法がベストです。

もし、大規模なCSSの変更や追加をした場合は、上述した2つの方法のどちらかをやるしかありません。

直接編集する方法

直接テーマファイルのCSSを編集する方法をご紹介します。

WordPressの管理画面に入って、”外観ーテーマの編集”で「style.css」を開いて編集します。(”外観ーテーマの編集”に入ると「style.css」が最初に開かれるはずです。)

ただ、基本的にはテーマファイルのファイルを直接編集するのは推奨されていません。

よく使われる方法は、子テーマを作ってそちらの「style.css」を編集する方法です。

子テーマについては、Bizvektorテーマのように既にファイルとして用意してくれている場合もありますが、ファイルが用意されていないテーマの場合も自作することが可能です。

このページでは、子テーマの作り方はご紹介しませんので以下のリンク先の情報を参考にして下さい。

◎Bizvektorテーマの子テーマ(外部サイト)
https://bizvektor.com/setting/customize/

◎子テーマの作り方(外部サイト)
http://viral-community.com/wordpress/wp-child-theme-5818/

子テーマを使う方法ですと、元のテーマのファイルが汚れませんので、いざとなればすぐに元に戻せるメリットがあります。

子テーマを編集する場合も手順は同じで、管理画面から”外観ーテーマの編集”で子テーマの方の「style.css」を開いて編集します。

ところで、WordPressの管理画面でのスタイルシートの編集はやりにくいです。

そこで、自分のPCで普段使っているテキストエディタを使って編集してからFTPでアップロードする方法もあります。

この場合も、直接テーマの「style.css」を上書きしてしまう方法と子テーマの「style.css」をアップロードする方法のどちらかが取れます。

CSS編集エリアを使う方法

初心者、PC苦手な方にはこの方法がベストだと思われます。

Bizvektorテーマなどの場合は、以下の様にメニューとしてCSS編集機能が存在します。(”CSSカスタマイズ”というリンクです。)

以下のような画面で編集することで、簡単にスタイルシートを追加・変更することができます。

ただ、大半のテーマには、こういったメニュー(機能)はないので、その場合はプラグインを使うことになります。

CSS設定エリアを追加してくれるものに「simple custom CSS」というプラグインがあります。

プラグインをインストールすると以下の様なメニューと編集画面が使えるようになります。

この画面でスタイルシートを編集すればOKですので非常に手軽です。

このページは最終更新日から1年が経過しています。
情報が古い可能性がありますのでご注意願います。
新しい情報があるかもしれませんのでこちらから検索してみてください。