WordPressの使い方・Tips発信サイト

ワードプレス・テーマ内にある追加CSSの使い方

はじめに

インストールしたテーマによってはCSSが入力できる項目が用意されています。ちょっとしたCSSの追加などに便利ですね。
直接コードを書き込む作業になりますので、テーマによってばらつきがない項目です。
なので、こちらのページで方法をまとめました。また、簡単にCSSの書き方を書いておきます。

追加CSS

OnePressというテーマを例に追加CSSを説明したいと思います。

外観のカスタマイズをクリックします。
カスタマイズを選択

画面切り替わりますので、一番下にある追加CSSをクリックします。
※この画面に「追加CSS」が無いテーマは項目そのものが無い可能性が高いと認識して良いかと思います。探せばどこかににあるかもしれないという意味で可能性が高いという表現にしています。
追加CSSを選択

ちょっと見づらいですがCSSが直接入力できる欄が表示されます。
保存するときは上の「保存して公開」ボタンをクリックしましょう。
CSS入力画面

CSSの書き方

CSSはWEB上のスタイルを制御するものです。見た目、構成、位置などを決めるものです。
例えば、文字を赤色にする、横並びで表示させる、上から○ピクセル下にボタンを表示させる、等のスタイルを実現させます。

書き方ですが、前準備として、HTMLタグを書いておく、または決めておく必要があります。

例えば、「おはようございます。」という文字列を赤色にしたい場合は下記のように記入します。

HTMLタグで赤色にしたい文字を囲う
<div class=”test”>おはようございます。</test>

CSSは下記のように記入します。
.test {
    color: red;
}

まずは、上記のように簡単なものから試してみて、こんな風に変わるんだなという実感を掴んでみることから始める方法が良いかと思います。

まとめ

HTMLタグやCSS(カスケーディングスタイルシート)について詳しくなくても、ワードプレスを使うことでWebページの作成は可能です。 

しかし、アドバイスとしては、ワードプレスの本領を発揮するのは、それらを覚えてからになります。例えばテンプレートをカスタマイズしたいな、と考えた時にはHTMLタグを扱えた方が良いです。そしてテーマを自分自身のものにカスタマイズしたいと考えたら、CSSを扱えると表現の幅が段違いに変わります。

ただ、覚えておいて欲しいのですが、どちらも学ぶのにある程度時間を必要とし、ワードプレスを使って情報を発信したいという、もともとの目的から逸れてしまう可能性が少なからず発生してしまいます。

順序としてはまず発信したいものを作り上げ、その後時間が出来たらHTMLタグやCSS、余裕があればPHPなどについても少しずつ学んでみましょう。とても楽しいですよ。