WordPressの外観/カスタマイズ/追加CSSに記入する時の3つのポイント
- columbusproject
- Photo：
- 2019-01-22
WordPressのデザインをカスタマイズしたいけど、テーマテンプレートを編集するのは怖いし、元に戻らなかったらどうしようと不安になったりしませんか？
WordPressでは外観のカスタマイズ項目に追加CSSという機能があります。テーマテンプレートを直接編集しなくても、追加CSSに記述することで、簡単なデザインカスタマイズや修正・編集が可能となります。
今回はWordPressで追加CSSに記入する時のポイントを大きく3つに分けて、それぞれ細かくご説明します。
WordPressの追加CSSとは
WordPressではテーマを変更することで簡単にデザインを変えることができます。しかし、サイトの雰囲気や内容によっては、タイトルや見出しの文字サイズや色、罫線など、細かい修正が必要な場合もありますよね。
慣れた方であればテーマのテンプレートファイルを直接編集することで変更できますが、WordPressを構築したばかりの方ですと不安になることもあります。
追加CSSに記入することで、簡単な修正を行ったり、全体の色合いの調整、文字サイズの変更を行うことができます。
いきなりサイト全体のデザインを調整しようとすると、デザインが大きく崩れますので、今回はタイトルや見出しなど、部分的な調整方法を見本として説明します。
1.CSSの基礎を軽く知っておこう
HTMLで構造化された文書を見やすくするためにCSSを使います。以前はHTMLのタグに直接CSSを書き込んだり、HTML内に直接記述などもされましたが、構造化とデザインが切り分けられるようになりました。
まずは簡単に入れ子の仕組みについて理解しましょう。
HTMLの入れ子やCSSの記述覚えよう
<html> <head> <link rel=stylesheet type="text/css" href="test.css"> </head> <body> <h1>タイトル・見出しレベル1</h1> <p>文章</p> </body> </html>
HTMLでは上記のように入れ子によって文書を構造化します。文書の構造化はパソコンのために行われるものであり、文字の大きさや色などは調整されません。
CSSをh1のタグに設定します。
h1{ font-size:3em; }
h1のfont-sizeを3emの文字サイズにするCSSですね。
なお、ブラウザよっては画面右下のようにuser agent stylesheetがあり、CSSが定義されていない場合はuser agent stylesheetが適用されることがあります。
user agent stylesheetでは2emだった文字サイズを3emに変更した形になります。
h1のタグに対し{}の中で属性と:;の中の値や文字列で定義しました。
WordPressに限らずホームページやサイトのほとんどはHTMLとCSSによって表現されています。
例えばWordPressでは、PHPやデータベースを利用して、HTMLやCSSを管理し、動的に出力する仕組みです。
まずはHTMLとCSSはセットになっているということ、追加CSSよって、WordPressによって出力されるHTMLタグにスタイルを割り当てられると理解しましょう。
次はh1の文字サイズを小さくしてみます。
h1{ font-size:1em; }
CSSの属性や値の定義を変更することでデザインを簡単にカスタマイズできるんですね。
WordPressでは追加CSSに記述することによって、テーマテンプレートファイルを編集することなく、サイトデザインをカスタマイズできます。
サイト全体に影響することを忘れない
例えばh1のCSSを追加CSSに設定した場合、サイト全体のh1に同じCSSが適用されます。
h1は多用するタグではないので、1ヶ所かもしれませんが、pなどのタグに追加CSSで設定すると、意図しない箇所でも同じCSSとなることを忘れないようにしましょう。
追加CSSによって一部分のデザインを変更したつもりが、別の場所でも適用されてデザインが崩れたりするのはよくあることです。
テーマのCSSによっては反映されにくいことも
CSSには優先順位があり、テーマやタグ、classやidの位置によってはCSSが反映されにくいことがあります。
h1やh2のタグに対して、文字サイズの変更や太字などを定義しても適用されないのは優先順位が低いためです。
タグの入れ子とclassやidを理解すると局所的にCSSを効かせることもできるので、少しずつHTMLやCSSを学んでおくことも大切です。
また、スマホやタブレットに合わせて設定されているCSSも少なくないので、スクリーンショットのようにカスタマイズ画面で表示を切り替えたり、変更を保存した後、スマホやタブレットにて確認するか、パソコンのブラウザの幅を狭めてチェックしてみましょう。
外観→カスタマイズ→追加CSS
管理画面の外観、カスタマイズ、追加CSSをクリックすると、何も記述されていない状態になります。
WordPressを構築したばかりの状態であり、テーマもそのまま「Twenty Nineteen」が有効化されています。
追加CSSに記述する時はいきなり稼働中のWordPressで行わず、テスト環境・ローカル環境でテストしてからにしましょう。
思わぬところでデザインが崩れたりすると見にくくなってしまったり、気づかないまま時間が過ぎてしまうこともあるので要注意です。
文字の大きさや色を変えてみる
まずはデフォルトの状態からトップページに表示されているh1とh2の文字の大きさを変えてみます。
h1{font-size:7em !important;} h2{font-size:5em !important;}
今回はわかりやすく表示させるために優先順位を高くする!importantを利用していますが、!importantを乱用してしまうとデザインの構造がわかりにくくなったり、全く関係ないところで強制的にCSSが適用されることもあるので注意しましょう。
ちなみにCSSでは%、em、pxなど単位が色々あります。単位を間違えてしまうだけで文字が大きくなりすぎてしまったり、デザインが崩れたりします。
次はh1の文字サイズを少し小さくして、h2の文字色を変更、罫線を引いて、罫線にも色を付けてみます。
h1{font-size:4em !important;} h2{ font-size:3em !important; color:green; border-bottom:10px solid orange; }
HTMLタグとCSSについて理解すると、画面に表示される全てをデザイン、カスタマイズ、表現することが可能になります。
配置や余白、文字色や罫線だけでなく、構成など全てが設定できるので、サイトやサービスを運営したり、構築したいと考えている方は少しずつでもCSSについて学んでおくと非常に役立ちます。
すぐに反映されない時はカスタマイズ内でページを移動
CSSを記述しても変化が見られない場合はカスタマイズ内でページ移動すると反映されることがあります。
タイトルの文字列をクリックするとトップページ、記事のタイトルをクリックすると記事ページに移動するので、反映されない時は試してみましょう。
もちろん、CSSの定義が上手くいかず、優先順位が低いために反映されていない可能性もあります。
カスタマイズする時のユーザーエージェントはパソコン
追加CSSに記述しながらカスタマイズしていると、スマホやタブレットの幅にしてもデザインが上手く反映されないことがあります。
次項で詳しく説明するデベロッパーツールを使うことで、スクリーンショットのようにスマホやタブレットでの表示チェックも可能なので組み合わせて使ってみましょう。
Chromeのデベロッパーツールを使おう
デペロッパーツールを利用することで、マウス操作でカスタマイズしたい箇所のidやclassを確認することができます。
デベロッパーツールを組み合わせながらCSSを記述することで、局所的にCSSを設定することができるので、デザインが崩れにくくなります。
右クリック→検証
まずは変更したい箇所にマウスカーソルを合わせて右クリック、検証を押してみましょう。
スクリーンショットではタイトルのh1の箇所を右クリックして検証してみました。
右側にデベロッパーツールが表示されるので、境界線をドラッグして、WordPressの表示幅を広くします。
カスタマイズしたいタグのidやclassを見る
検証したい箇所のタグが右側に表示されるので、idやclassをチェックします。
h1のclassにsite-titleと表示されているので、コピペでメモしてカスタマイズの追加CSSに記述します。
先ほど記述したCSSを削除して下記を追記しました。
h1.site-title{ font-size:1em; margin:10px; padding:10px; background:whitesmoke; border:5px solid gray; }
フォントサイズを小さくして、タグの外側と内側の余白を指定、背景を薄いグレー、罫線を5pxでグレーで囲んで見ました。
次はuserのaタグにのみ局所的にCSSを設定してみます。まずはデベロッパーツールでuserの辺りで右クリック、検証します。
a { border:1px solid black; }
例えば上記のように、aタグのみに罫線を設定した場合、スクリーンショットのようにaタグがある部分全てにCSSが設定されて、デザインが崩れてしまいます。
CSSはタグのclass名をしっかりと指定すること、タグの入れ子をきちんと記述すればするほど優先順位が上がります。
span .author.vcard a { border:5px solid red; }
上記はuserのaタグのひとつ上のspanタグのclass名を記述し、しっかりと指定することで、赤い5pxの枠をuserの部分にのみ適用しています。
デペロッパーツールでスマホ・タブレット表示
デペロッパーツールでは、赤い矢印の指すボタンでデバイスを切り替えることができます。また、水色の矢印の部分でデバイスを指定することで横幅や縦幅が設定され、それぞれのデバイスの表示を確認することが可能です。
稼働中のWordPressに追加CSSに記入する前に、オフライン・ローカル環境の状態でスマホやタブレットの実機を用いてチェックすることも忘れないようにしましょう。
まとめ
WordPressで追加CSSを記述する時の3つのポイントをそれぞれ詳しくご説明しました。
タグによる文書の構造化、タグに対してCSSで装飾を施すという仕組みがわかってくると、どんなデザインでも表現できるようになります。
WordPressの良さでもある「HTMLやCSSを知らなくてもサイトを作れる！」という要素は非常に素晴らしいものですが、付随してHTMLやCSSを学ぶことでさらに自由にカスタマイズできるようになりますし、PHPを学べばもっともっと自分らしい、自分だけのデザインを作れるようになるんですね。
CSS、HTML、わからない！と不安になり過ぎず、今回の記事のように文字を大きくしたり、小さくしたりから始めて、色や罫線、余白などを少しずつ理解してみてください。
テーマファイルを直接編集出来るようになったり、テーマを作れるレベルになれば新しい表現やデザインも生み出しやすくなります。
また、注意点として追加CSSに記述したものを削除すれば基本的には元に戻りますが、テーマファイルを直接編集して、誤って必要な部分を削除したり、記述する方法や箇所が間違っていると取り返しが付かない場合もあります。
もし、作業的に不安な要素が大きいけれどデザインの変更が行いたい場合はぜひご相談ください。
新着
カスタマイズ
マーケティング
比較
ワードプレス業界情報
