せっかくワードプレスでブログを始めたなら、自分好みのデザインにしたいですよね。
✔他のブログと差別化したい
✔おしゃれに装飾したい！
その気持ち、分かります！
そこで登場するのが、「追加CSS」という機能です。
今回は、追加CSSの使い方を動画付きで、なるべく分かりやすく解説してみました！
追加CSSとは
ワードプレスをインストールすると、「追加CSS」という機能が使えます。(ver.4.7以降)
別名、「付随のCSSエディタ」という言い方もします。
追加CSSで何ができるの？
ライブプレビューを見ながら、サイトデザインをカスタマイズできます。
動画左の入力欄に「CSS」を書き込むと、どう変わるのかを確認しながら、カスタマイズできます。
タブレット/スマホ表示のプレビューも見ることもできるので、便利ですよ！
そもそもCSSとは何ぞや？
CSSは、ウェブサイトを作るためのプログラム言語のひとつです。
HTMLなら聞いたことあるよ！
HTMLは、ページの構成を作る言語です。
タイトル・見出し（hタグ）や段落（pタグ）、リスト（liタグ）などですね。
CSSは、HTMLで記述した内容を、装飾などで整えるための言語。
見出しの色を変えたり、ボタンを作ったり、など。
HTMLだけでも、ある程度の装飾はできます。
でも、CSSを使うと、動きを出せたり、ちょっとリッチな感じにもできるんですよ♪
プログラム言語について、こちらのサイトで分かりやすく解説されています。
CSSのコードって難しい・・・どうやって書けばいいのか全然分からない！
という方でも大丈夫。
割とコピペでなんとかなります（笑）あとで参考サイトもご紹介しますね。
追加CSSを使うのはどんなとき？
追加CSSを使うのは、「ブログの見た目をいじりたいとき」です。
本来なら、「スタイルシート」という、コードがズラズラ書いてあるファイルを編集してカスタマイズを行います。
が、追加CSSを使えば、リスクも少なくサクッと手軽にできるんです！
本来なら、「スタイルシート」を書き換えてカスタマイズする
ワードプレスで何かテーマをインストールすると、必ず「スタイルシート」（style.css）というファイルが入っています。
外観→テーマの編集
このスタイルシートに、デザインなどを決めるコードが書かれています。
カスタマイズの仕方は、
- スタイルシートの中から変更したい箇所のコードを探し出し
- 書き換えて保存する
または、
となります。
が、せっかくこの画面で頑張って書き換えても、使用中のテーマの更新があると、上書きされてしまいます！
頑張ってカスタマイズしたのに、初期設定に戻っちゃった…！
これはツライ！
ワードプレスのカスタマイズは、テーマの更新時に、上書きされないファイルで編集する必要があるんです。
上書きされないファイルとは、次に説明する「子テーマ」というものです。
子テーマを使ってカスタマイズする
追加CSSが登場する前は、ワードプレスのカスタマイズには「子テーマ」を使うのが基本でした。
子テーマってなに？
子テーマとは、
- カスタマイズしたい部分だけ、コードを書いてね！
- その他必要な情報は、おおもとのテーマ（親テーマと呼びます）のデータを呼び出して使うから大丈夫♪
- 親テーマの更新があっても、子テーマに書かれているコードは守るよ！
という、便利なデータファイルです。
子テーマについて詳しく知りたい方は、こちらのサイトをどうぞ。
もし子テーマを作っていれば／最初から子テーマが装備されているテーマであれば、
子テーマのスタイルシートに必要なコードだけをどんどん入力、でカスタマイズOK！
↑こちらは、Cocoonという無料テーマの子テーマ。
Cocoonには、最初から子テーマが用意されているので便利です。
Cocoonのダウンロード方法はこちらの記事をご参照ください。
ただし、子テーマでカスタマイズする場合・・・
「ファイルを更新」（保存）ボタンを押して実際のページを見に行くまで、ちゃんと変更が反映されたか確認することができません。
確認のためにページを行ったり来たりすることになります。
慣れないうちは大変です。
追加CSSを使ってカスタマイズする
追加CSSを使えば、変更が正しく反映されるか、確認しながらカスタマイズできます。
最初の参考動画を見てみてね。
基本的に、子テーマと追加CSSのどちらを使っても、コードの書き方は変わりません。
コードを書いても何も変わらない場合は、記述誤りがあるとか、親テーマのコードが影響しているとか、いろんな原因があります。
でも、思った通りに変更できてから保存（公開）すればOKなので、表示崩れの心配もないですよ。
また、使用中のテーマの更新があっても、追加CSSに書いたコードは消えずに残る（※）ので安心です。
別のテーマに変更する／親→子テーマに変更する場合、内容が引き継がれないので要注意。
追加CSSで実際にカスタマイズしてみよう
追加CSS画面にたどりつく方法は何パターンかあります。
①外観→カスタマイズ→追加CSS
 |
 |
②ツールバー（ログイン時に上部に表示）→カスタマイズ→追加CSS
③外観→テーマの編集→付随のCSSエディター→追加CSS
どこからでも、この画面にたどり着けばOK！
赤枠部分に追加したいCSSをどんどん書いてみましょう。
記述ミスがあると、 アイコンが出て教えてくれます。
にマウスを当てると、エラー内容が表示されます。（ただし超簡潔な英語）
このあと、実際にコードを書いてみたいと思いますが、テーマや環境によって、追加CSSのプレビューが機能しないケースがあるようです。
私の環境では、なぜかプレビューが機能しません・・・。
ライブプレビューが表示されない場合でも、コードが正しく記述されていれば、追加CSSでカスタマイズすること自体は可能ですので、ご安心ください。
追加CSSで特定のページのタイトルを非表示にする
ページによっては、タイトルを非表示にしたい場合があると思います。
そんな時は、「ページID」を調べて、追加CSSで非表示にすることができます。
まずは、タイトルを非表示にしたいページのID番号を確認してください。
ページIDの調べ方はこちら。
追加CSSに、次のように入力します。
.post-1 .entry-title {
display: none;
}
赤字「1」の部分を、先ほど調べたページIDに書き換えてくださいね。
- ページIDが1のページ（post）※の
- エントリータイトル（entry-title）の
- 表示（display）を
- 無くす（none）
という意味ですね！
多くのテーマで、ページのタイトルは「entry-title」というclass（目印みたいなもの）が割り振られているので、このコードで大丈夫だと思います。
※通常、投稿のことをpost、固定ページはpage、なんですが、タイトルを非表示にするCSSに関しては、（なぜか）どちらも「post-ID番号」でOKです。
もし、トップページ（フロントページ）を設定していて、そのタイトルを消したい場合は、以下の記述でもOK！
.home .entry-title {
display: none;
}
トップページの設定方法はこちらの記事をご参照ください。
追加CSSでデバイスの幅に画像サイズを合わせる
ご自身のサイトをスマホで見たときに、画像が大きすぎて横にはみ出ていませんか？
そういった問題も、追加CSSで解消できます。
img {
max-width: 100%;
height:auto;
}
max-widthは、画像の横幅を調整するコードです。
- 最大（max）の幅（width）を
- 画面に対して100％で表示する
という意味。
max-widthだけでは縦横の対比が崩れる場合は、高さ（height）を自動調整（auto）するコードを一緒に書いておきましょう。
ただし、最近の新しいテーマでは、レスポンシブデザイン（画面サイズに合わせて表示を柔軟に変えるデザイン）で設計されています。
画像サイズは自動調整されるよう、最初から設定されていると思います。
元々設定されているなら、わざわざ追加CSSに書く必要はないです。
ご自身のサイトをスマホで見た時に、画像がはみ出るな・・・という時だけ、追加CSSに入れてみてください。
ディベロッパーツールでカスタマイズのシミュレーションをし、コードを追加CSSにコピペする
ディベロッパーツールをご存知ですか？
実は、追加CSSでなくても、ブラウザ上でカスタマイズのシミュレーションをできます。
Chrome、Firefox、Edgeなど、大抵のブラウザには、ページの検証/要素を調査する機能がついています。
Chromeのディベロッパーツールはこんな感じ。（Windows）
動画、見づらくて申し訳ないのですが、雰囲気が伝われば。
このように、どんなCSSが割り当てられているのか調べることが可能。
さらに、赤枠部分のコードを編集すると、どう変わるかプレビューされます。
編集したコードをコピーして、追加CSS（または子テーマのスタイルシート）に貼り付ければ、カスタマイズ完了です！
- 追加CSSを立ち上げておく
- 右クリック→検証（またはF12キー）
![developer-tool]()
このアイコンをクリック→カスタマイズしたい箇所をクリック- コードが表示されるので、数値などを編集
- 編集したコードをコピーし、追加CSSに貼り付けて公開
このアイコンをクリック→カスタマイズしたい箇所をクリック
慣れてしまえば、これが一番簡単です。
ぜひ試してみてくださいね＾＾
ディベロッパーツールについて詳しく知りたい方は、こちらのサイトをどうぞ。
見出しなどのカスタマイズは、こちらのページをご参考に。
追加CSSでカスタマイズするメリットとデメリット（まとめ）
追加CSSってなに？から、コードの入力例までをご紹介しました。
本文中で触れなかった部分も含め、追加CSSのメリット・デメリットをまとめると以下のとおり。
【メリット】
- プレビューを見ながらカスタマイズできる
- テーマ更新の影響を受けない
【デメリット】
- 環境によってはプレビューが機能しない
- テーマを変更する（親→子テーマへの変更を含む）場合、追加CSSの内容は引き継がれない（※1）
- コメントアウト（/* */で囲んで説明などを入れられる）を使うとエラーになることがある（※2）
※1 通常は変更前のテーマに戻せば、入力済みの追加CSSは残っています。
※2 コメントアウトを使用したい場合、子テーマのスタイルシートを使うことをおすすめします。
追加CSSは、手軽にカスタマイズできて便利です。が、あまりに長くなるようであれば、コードを子テーマに移した方がいいかもしれません。
また、子テーマと追加CSSを併用する場合は、子テーマよりも追加CSSの内容が優先となるようです。
うまく使い分けてみてくださいね！
最後までお読みいただきまして、ありがとうございました。