webgonia

WordPressのCSSをカスタマイズするなら知っておきたいこと

WordPressのCSSをカスタマイズするなら知っておきたいこと

CSSってなんだろ?

CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略でHTMLを家の土台、骨組みとするならCSSは外観、内装をデザインするものだとイメージしてください。WordPressではすでにテンプレートにCSSが組み込まれているのでこの記事では基礎知識を紹介します。

CSSの編集方法

編集の仕方はテンプレートによって多少異なりますが、Jet Packプラグインのモジュール”カスタムCSS”をアクティブにしておくと「外観」から「CSS編集」ができるのでおすすめしています。では編集を選択して編集方法を確認していきましょう。
“CSSスタイルエディッター”画面が表示されます。CSSは赤枠のテキストエリアに記述してら「プレビュー」を選択して確認、よければ「スタイルシートを保存」します。
次にCSSの記述方法を見て行きましょう。

CSSの記述方法

CSSはHTMLに連動しており、HTMLで記述していない要素には適応することが出来ません。例えば記事の文書を文字のサイズを変更しようと思ったらHTMLで<p>要素にCSSを適応させます。<p>はParagraphの略で文書の段落に作用しておりこんな風に使われています。

<p>CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略でHTMLを家の土台、骨組みとするならCSSは外観、内装をデザインするものだとイメージしてください。</p>

これをCSSで確認するとこうなっています。

.entry p {font-size: 13px;}

文字のサイズを変更する時は13pxをすきな数値に変えることでCSSが適応されます。次によく使用するCSSコードについて確認していきましょう。

覚えておきたいCSSコード

CSSコードは深く掘り下げていくと特殊なコードやいつ使うのかなといったものまで幅広く存在しますがここでは最低限サイト運営していくのに覚えておいきたいコードを紹介します。

色 color
背景や文字に色を指定するコード。
背景 background
背景に色や画像を指定するコード。
フォント font
文字のサイズや種類を指定するコード。
テキスト text
テキストの位置や文字の揃えを指定するコード。
幅 width | 高さ height 
サイトやボックスの幅と高さを指定するコード。
余白 margin,padding
余白の内側、外側の幅を指定するコード。
ボーダー border
ボーダーラインの種類、サイズを指定するコード。
配置 float
数字入りリストを生成したい文章を<ol><li>~</li></ol>で囲ってリストを表示。

いかがでしたでしょうか?難しく感じたかもしれませんが基礎知識としてCSSを覚えておいてくださいね。


これだけは知っておきたいワードプレスでCSSの使用方法は以上になります。

最後までお読みいただきありがとうございます。

Return Top