（追加CSS）でWordPressのブログをカスタマイズをする方法を紹介（初心者向け）

ブログサポートをしていると、利用しているwordPressテーマを少しだけカスタマイズしたいというニーズが出てきます。

基本的にWordPressにデザインテーマをカスタマイズをすると、購入したWordPressのデザインテーマ開発者や企業からのサポートが受けられなくなることが多いので注意が必要な部分なのですが、それでもCSSカスタマイズの機能を利用してWebサイトに変更を加えたいときの方法を紹介します。

※ 本記事では、CMS（コンテンツマネジメントシステム）でWordPressを利用している事を前提に解説していきます。

1.WordPressテーマの「追加CSS」を利用してWebサイトのカスタマイズをする方法

それでは、まずはサイトデザインをカスタマイズするための領域に行くプロセスを解説して行きます。

CSSをカスタマイズしていくまでの流れ

1. WordPressにログインする
2. WordPressの「外観」をクリック
3. 「外観」から「カスタマイズ」を選択
4. WordPressテーマごとに用意されているメニューから「追加CSS」を選択
   ※英語版の場合は、「Additional CSS」とかになっていると思います。
5. 「追加CSS」内のフォームの中に、カスタマイズしたい内容をコーディングする

一連の流れとしては、上記のような流れで進めていきます。

筆者自身、有料のWordPressテーマを含めて10種類以上のWordPress用デザインテーマを利用していますが、ほとんどの場合が「追加CSS」、または「Additional CSS」と表記されていると思いますので、そこのフォーム内にカスタマイズするためのコーディングをしていきます。

カスタマイズしたい場所を特定するときの方法

有料のWordPressテーマの場合は、「追加CSS」を利用しなくてもデザインメニューで充分にサイトデザインを整えていくのに必要なカスタマイズメニューが用意されています。

それでも、例えば

1. 表示されるブログタイトルの大きさを少し変えたい
2. 気になる「線やライン」をちょっとだけ調節したい
3. 検索ボタンなどの特定マテリアルを少しだけ変更したい

など、サイトデザインを少し自分好みにしたいという場面も出て来ます。

けれど、どの部分を「追加CSS」の中にコーディングしていって変更すれば良いのか分からな位事もあります。

ブラウザの「要素の検証」機能を利用する

今回は、あくまでも一例として、カスタマイズしたい部分の要素を探し出して、どの部分を変更すればカスタマイズ出来るのかを見つけてみたいと思います。

筆者の場合は、WebブラウザのGoogle Chromeを利用しています。

例えば、自分が運営しているブログサイトの「ブログ名」の大きさを調整してみたい時は、自分のWebサイトを表示して、そのブログ名が表示されている場所で【右クリック】します。

そうすると、「検証」や「要素の検証」という単語が出てきます。

それをクリックすると、その「ブログ名」に対して指定されているCSSや様々な要素が

1. デベロッパーツール
2. Elements
3. Style

という画面構成でHTMLやスタイル情報が表示されます。

いきなりたくさんのプログラムが表示される画面が出てきますが、焦らないで大丈夫です。

この画面は解析ツールとしても使えるので、実際に「追加CSS」に埋め込む前に確認をすることが出来る機能でもあるので、まずは「Style」のところから、「ブログ名の大きさ」に関連していそうなStyleの部分を探していきます。

使用しているWordPressテーマ等によって、使用している要素の名前が違ったりしているので、そこはちょっと注意が必要です。

けれど、「Style」部分の要素をクリックすると、どの部分の要素に表示されている値が効いているのか分かるように便利な配慮が数多く実装されているので、実際にやってみると全く分からないということはおきないとおもいます。

例えば、ブログサイトの大きさに関する要素の場合

上記のような感じで要素が指定されていて、表示されているかもしれません。

この場合、「100%」の部分に書いてある数字を変えると、大きくなったり小さくなったりすると思います。

そうしたら、その部分の要素（細かい話では色んな要素に分類できるのですが、ここでは簡単に要素でまとめてしまいます。）をコピー&ペーストするためにコピーをして、そのまま「追加CSS」にペースとしてみましょう。

事前に、ブラウザで数字を変えたりして変化を見ているので、自分のサイトのWordPressのカスタマイズ画面で操作している「追加CSS」の部分でも変化すると思います。

このような感じで、サイトデザインを細かく調整していくことも可能になります。

2.WordPressテーマでCSSをカスタマイズするときの注意事項

WordPressテーマのカスタマイズでおこなえる「追加CSS」は気軽にCSSをカスタマイズすることが出来る反面、注意事項もいくつかあります。

1. 抽出した要素部分の範囲や影響を把握する必要がある
2. 基本は開発者の方々が最適化しているので他のデザイン部分に影響する可能性がある
3. WordPressのバージョンやWordPressテーマのバージョンによって要素名が変わる場合がある

① 抽出した要素部分の範囲や影響を把握する必要がある

ブログサイトのTOPに表示されているタイトルだけなどの場合は、サイト全体に影響する部分とはいえ、影響する範囲は「ブログサイトのTOPのタイトルサイズ」というような形で影響する範囲を容易に推定することが可能です。

しかし、サイトデザインの変更する部分によっては、思わぬところも変更要素が効いてしまって、自分が予想していなかった部分も変わってしまう可能性があることに注意が必要です。

② 基本は開発者の方々が最適化しているので他のデザイン部分に影響する可能性がある

先ほどと書く内容が少し被ってしまいますが、基本的に無料でも有料でもWordPressテーマを開発された方が、そのWordPressテーマを利用する人にとって良いデザインとされる設計でプログラミングをしています。

なので、例えば、このブログ（ユニコブログ®）も「追加CSS」のカスタマイズ機能を利用していますが、本当に一部分にだけしかやっていません。

なので、まずは標準のカスタマイズ機能の中でどうしても設計を変えることが出来ないか、WordPressのテーマ自体を使いこなしてみることから始めて見ることをオススメします。

ブログサポートしている中では、かなりの割合でWordPressテーマの標準カスタマイズで住んでしまうことが分かるパターンが多いです。

③ WordPressのバージョンやWordPressテーマのバージョンによって要素名が変わる場合がある

「CSSの追加」や「Additional CSS」を利用したときは、定期的に確認する必要が出てくる部分です。

カスタマイズした場所によっては、「要素名」が変わったりして変更した部分がアップデートなどによって反映されなくなることがあります。

特にCSSを「追加」した場合では無くて、既存のCSSに「変更」を加えた場合に起きてくる部分なので注意が必要です。

最近は、WordPressやWordPressで利用されるプラグインなどでも「自動アップデート」機能によるセキュリティーアップデートをしており、基本的には「有効化」していることと思います。

なので、特にメジャーアップデートなどの大きな変更があった場合などは「追加CSS」や「Additional CSS」の反映がちゃんと効いているか確認する必要があります。

3.WordPressテーマの「追加CSS」を利用するときに参考になるサイト

今回、本来もっと細かく「要素」という単語１つをとっても、細かく分類が出来てもっと掘り下げて解説をする必要があるのですが今回は

「簡単に「追加CSS」でサイトデザインを変更する」

ということを１番の目的にしているので、だいぶ簡潔にまとめてしまっている部分があります。

実際には、もっともっとたくさんの事を知ることが必要なのですが、それはどこまでHTMLやCSS等のことを学んでいくかによって随分と深さも変わってきます。

とはいえ、自分が扱う情報がどのような意味を持っているのかなど、表面部分だけでも知っておくと便利でもあるので、筆者も参考にしているWebサイトなどを紹介します。

参考サイト：MDN Web Docs

学習プログラムも用意（無料）されていて、すごく勉強になるWebサイトなのでオススメです。

若干、話がそれてしまいますが

1. HTML
2. CSS
3. JavaScript
4. PHP（あとは、フロントだけど…気持ち+Python…）

などが扱えるようになると、Webサイト（ブログサイト）だけでなくてWebアプリケーションも開発できるようになりますし、しっかりと身につけて仕事でも使えるように熟練してきたら、働き方などにもかなり広がりが出てきます。

今は、ノーコードでアプリケーション開発も出来ますし、無料で上記の言語を走らせてみて試す環境も簡単に構築することが可能です。

● 無料レンタルサーバーとは？無料と有料サーバーの違いを徹底比較

ブログサイトの開設から興味が湧いて、上記の言語などを勉強してみるのはスゴく素敵なことだと考えています。

この記事がそのキッカケになってくれれば幸いです。

最後まで読んでいただきありがとうございました。

1. 無料レンタルサーバーおすすめ3選をWordPressの対応比較と合わせて解説
2. レンタルサーバー徹底比較！WordPressおすすめサーバー10選
3. Webとは？初心者向けにWebの基礎知識を効率よく勉強する方法を5つ紹介