せっかくワードプレスでブログを始めたなら、自分好みのデザインにしたいですよね。
- デフォルトの設定のままでは味気ない
- 他のブログと差別化したい
- おしゃれに装飾したい！
その気持ち、分かります！そこで登場するのが、「追加CSS」という機能です。
今回は、追加CSSの使い方を動画付きで、なるべく分かりやすく解説してみました！
当方プロではないので細かい部分の説明はできてませんが、ブロガーさんには十分な内容のはず！ご参考にどうぞ＾＾
【2020/2/19追記】
最近「追加CSSクラス」についてお調べの方がこの記事にたどり着くことがあります。
これはワードプレス新エディタ「Gutenberg」で追加された機能で、画面右側のメニュー「ブロック」→「高度な設定」で入力できる項目ですね。
後の方で解説しますので、順を追って読んでいただければと思いますm(_ _)m
追加CSSとは
ワードプレスをインストールすると、「追加CSS」という機能が使えます。
別名、「付随の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; }
「post-〇」の数字の部分を、先ほど調べたページ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キー）
- アイコン*をクリック→カスタマイズしたい箇所をクリック
- コードが表示されるので、数値などを編集
- 編集したコードをコピーし、追加CSSに貼り付けて公開
慣れてしまえばこれが一番簡単です。ぜひ試してみてくださいね＾＾
ディベロッパーツールについて詳しく知りたい方は、こちらのサイトをどうぞ。
見出しなどのカスタマイズは、こちらのページをご参考に。
グーテンベルクエディタの「追加CSSクラス」について
ワードプレスはバージョン5.0を境に、「グーテンベルク」と呼ばれる新ディタへ投稿画面が変わりました。ガラッと。
新エディタでは、「ブロック」単位で記事を作成していきます。文章は段落ブロックで、写真は画像ブロックで、と言った具合に。
新エディタでは、画面右側の「ブロック」→「高度な設定」で、「追加CSSクラス」なるものが入力できるようになりました。
これは何かというと、自分で設定したお好きなCSSをブロックに適用できるようになったということですね。
例えば、追加CSSに以下のように書いたとします。
.original-shadow{filter:drop-shadow(4px 4px 6px gray);}
コードの細かい解説は割愛します。
「original-shadow」は、私が適当に付けた「クラス名」です。
このCSSを適用すると、ブロックに影がつきます。
複雑なことは試していませんが、例えばこの影をつけるCSSなら、「追加CSSクラス」に「original-shadow」と入力すると、テキストだろうが画像だろうが影がつくようです。
既存のクラス名と被らなければ、基本的に好きな名前でこのようなオリジナルスタイルを作って大丈夫なはず。
この辺は「高度な設定」とあるように、なかなかワードプレス触りたての方がやるような事ではないと思うので、ご参考程度に。
追加CSSでカスタマイズするメリットとデメリット（まとめ）
追加CSSってなに？から、コードの入力例までをご紹介しました。
本文中で触れなかった部分も含め、追加CSSのメリット・デメリットをまとめると以下のとおり。
- プレビューを見ながらカスタマイズできる
- テーマ更新の影響を受けない
- 環境によってはプレビューが機能しない
- テーマを変更する（親→子テーマへの変更を含む）場合、追加CSSの内容は引き継がれない（※1）
- コメントアウト（/* */で囲んで説明などを入れられる）を使うとエラーになることがある（※2）
※1 通常は変更前のテーマに戻せば、入力済みの追加CSSは残っています。
※2 コメントアウトを使用したい場合、子テーマのスタイルシートを使う事をおすすめします。
追加CSSは、手軽にカスタマイズできて便利です。が、あまりに長くなるようであれば、コードを子テーマに移した方がいいかもしれません。
また、子テーマと追加CSSを併用する場合、子テーマよりも追加CSSの内容が優先となるようです。（何かで見たのですがページを失念しました・・・）
うまく使い分けてみてくださいね！
最後までお読みいただきまして、ありがとうございました。