WordPressテーマを安全にカスタマイズさせる「追加CSS」の使い方

2019 12/29
WordPressテーマを安全にカスタマイズさせる「追加CSS」の使い方

WordPressテーマのカスタマイズ」って聞くと、「なんか難しそう…。」って思ってませんか。もちろん「子テーマ」を編集する方法や「FTP」の使い方を知っている方は、この記事を読まなくても大丈夫です。逆に、「テーマのここを少しカスタマイズをしたいけど…どうしたらいいの!?」って方は、是非この記事を読んでくださいね。

パパッくま パパッくま

WordPressの標準機能「追加CSS」を使えば、安全・簡単にカスタマイズができるんだよ!

CSSとは??

CSSとは簡単に言うと「装飾」になります。ファッションで例えると「バッグは赤の方がいいかな~。いや、ピンクの方がこの服には合うからピンクにしよう!形はぁ~」って色を変えたり、バッグのサイズを決めたりするのと同じです。CSSを使って、サイズや色を伝えるってイメージです。

こんな方には役に立つかも!
  • プログラムが全く分からない方
  • 「子テーマ」「FTP」の使い方がわからない方
  • WordPressを始めたばかりの方
  • 少しだけカスタマイズをしたい方
    (追加CSSは行数が多くなると使いにくいため。)
目次

追加CSSの使い方

パパッくま パパッくま

画像が見にくい場合は「画像をクリック」すると大きく表示がされるよ!

追加CSSの画面を表示させる

画像

最終この画面の「追加CSSはここに記入をします!」にコードを記載していきます。

STEP
ダッシュボード(管理画面)を開く
画像

まず、ダッシュボード(管理画面)を開いてください。その後、①「外観」の上にマウスを乗せると、サブカテゴリーが表示されるので②「カスタマイズ」をクリックしてください。

STEP
カスタマイズ画面が開いたら…。
画像

カスタマイズの画面が表示されたら「ここをスクロール」って場所を1番下までスクロールしてください。

STEP
スクロールをしていくと…。
画像

1番下に「追加CSS」があるのでクリックしましょう!

STEP
追加CSSをクリックしたら…。
画像

上部に「ヘルプ」が表示されます。読んでから、「必要がなかったら閉じるボタンをクリック」してください。

STEP
追加CSSの表示が完成!!
画像

追加CSSの表示に関しては、これで完成です!

次はCSSを記入する方法を記載していきます。

実際にCSSをさわってみよう!

パパッくま パパッくま

まずはCSSの書き方についての説明をしていきますね!

CSSの書き方

画像

クラス名」はHTML構造で言うと「」を指します。
プロパティ」はその箱に「命令」を伝える場所になります。
プロパティは波括弧{ }で囲まれていないといけません

簡単な例

h2に囲まれている文字を大きく( 20px )にしたい場合。

この時の書き方はこんな感じになります。

h2 {
    font-size: 20px;
}

h2がクラス名で波括弧内のプロパティに「font-size: 20px;」と記載します。
ちなみに「font-sizeが文字の大きさの命令文」です。その横には区切りとして「:(コロン)」を記載します。その横の「20px」が文字のサイズになり、最後は「;(セミコロン)」で締めくくりになります。

パパッくま パパッくま

では、これらを踏まえて実際に「追加CSS」に記載をしてみましょう!

追加CSSにコードを書く

先ほどの例だと変化がわかりにくいので「h2タグの文字色を変化」させます。私のテーマはSWELL(めちゃ使いやすい!!)ですが、h2の文字色は黒っぽい色にしています。このh2の文字色を変化させる手順になります。

文字色を変化させるプロパティ

文字の大きさを変える場合は「font-size」を使いましたが、文字色を変更する場合は「color」を使います。書き方が以下になります。

h2 {
    color: red;
}

先に注意点をお伝えしておきますね。追加CSSに記載漏れ(波括弧やコロン・セミコロンの忘れ)があった場合は警告がでます。CSSは「装飾」関連なので、もし警告が出たまま保存をしても後から追加CSSを削除すると元に戻ります。が、警告が出た場合はコピペのミスや先ほどの記載漏れがないかを確認してくださいね。警告画像はこちら。

画像
追加CSSエラー

赤×がエラー場所になります。

h2の文字色を赤色に

画像
color: red;
パパッくま パパッくま

赤枠にコードを記載したら「プレビュー」が変化するよ!緑枠がh2タグだけど、文字色が見事に赤くなっているよ

h2の文字色を緑色に

画像
color: green;

h2の文字色を青色に

画像
color: blue;

まとめ

CSSを使う事で、自分だけのオリジナルサイトを作ることができます。他のサイトとの「違い」を生み出せるかどうかがとても大切ですよ。

パパッくま パパッくま

追加CSSを入力したら、最後に「公開」をクリックしてね!よく忘れて、変わってないとかがあるから…。

この記事が気に入ったら
フォローしてね!

目次
目次