【HP作成】WordPressにおけるCSSの活用方法

ご挨拶

あけましておめでとうございます。Itoopの佐藤です。

ブログを始めてからあっという間に半年が経ち、時間が過ぎるのが早いなと感じますね。

早速ですが、今回はWordpressでは頻繁に活用することになるCSSについてです。

Webデザインを覚えようと学習している友達がおり、その中で自分が覚えたことを伝えたときに「もっと早く知りたかった」と話があったため、そういった方々のために書いていきます。

何に困っていたのか

今回友達が困っていたことですが、トップページに表示する文字のサイズを行によって変更するといった、「簡単にできそうなのに、うまく解決する方法がわからない」ようなことでした。

かつて自分も困ったことがあったものでしたが、そこで利用したのがCSSになります。

CSSの利用方法

CSSは対象となる箇所にIDを割り振ることで、その部分のみを指定して文字のサイズなどを変更することが可能です

IDの振り方は以下になります。

上記のように「<p id = “任意の文字列”>xxxxxxx</p>」と記載します。

その後、CSSにて以下のように記述します。

上記の例はフォントサイズを36ピクセルに変更しています。

例えばWordpressの外観デザイン時に、追加CSSに記述すると変更することが可能です。

おわりに

いかがでしたでしょうか。

簡潔にまとめましたが、このやり方を教えていただいたときにはこんな簡単にできるのかと驚きました。

今回のやり方を用いることにより、HTML編集で様々な箇所にIDを割り振ることができるため、より自由にデザインすることが可能です。

特にWordpressを利用して間もない方の力になれれば幸いです。

今年も一年、よろしくお願いいたします。