こんにちは、erikaです。
今回の記事は、WordPressで追加CSSを編集する方法です。
WordPressをすでに使われていて、CSSを少し知っている方向けに解説させていただきます。
WordPress
言わずもがなですね。
このサイトもWordPressで作成しています。
テーマはデフォルトの「Twenty Twenty」です。
とにかくシンプルに作ろうと思って、デフォルトのテーマで作成することにしました。
追加CSS
WordPressには、「追加CSS」機能があります。
これで、高度なカスタマイズができます。
しかし、私は初心者中の初心者なので、文字の大きさを変更することなどしかできません。
需要があるかはわかりませんが、例としてその方法を解説します。
方法
追加CSSを編集する方法はこちらです。
1.「外観」にマウスポインターを合わせる
2.「カスタマイズ」をクリック
3.「追加CSS」をクリック
4.コードを入力
※詳しくは次の段落をご覧ください。
コードの入力
試しに、h1の文字の大きさを50pxに変更してみましょう。
「追加CSS」に「h1{font-size:50px}」と入力してください。
これで文字の大きさが変更されました。
検証
試しに、h1の文字の大きさを変更しました。
しかし、WordPressだと「ここを変更したいけど、h1なのかpなのか、セレクタが何なのかわからない。」といったことはございませんか？
そんな時は、「検証」で確認すると便利です。
検証で確認する方法はこちらです。
1.変更したい箇所にマウスポインターを合わせ右クリック
2.「検証」をクリック
右側にページのソースなどが表示されました。
変更したい箇所のコードが、薄い灰色で覆われています。
これで、変更したい箇所のセレクタがわかります。
class
上の画像で、h2を変更する場合は、セレクタは「h2」だけでは変更が反映されません。
検証で確認すると、h2にclassがついて、「h2 class=”entry-title heading-size-1″」となっています。
その場合は、セレクタは「h2.entry-title」(「heading-size-1」はサイズの指定です。)と入力します。
以上で解説を終了します。
それでは、次の投稿でお会いしましょう！