⑱デザイン・見た目をカスタマイズする(カスタムCSS)

カスタムCSS WordPress

こんにちは、natsukiです。

今日はよりサイトのデザインを自分好みに変えられてしまう、カスタムCSSという機能について書きます!
正直、これをマスターすればかなりデザインを自由に変えることができる反面、
マスターするにはHTMLとCSSの知識が必要にもなります。

なので、ここでは、
「ここに色々書くとデザインを変えられるんだな」
「自分で本格的にデザインをカスタマイズしたいなら、こういうことを学んだり調べたりする必要があるんだな」
「でも自分はここまで勉強する気はないし、ある程度理解できたら後は誰かにお願いしよう」

など、だいたいのイメージが掴めればOKと思って下さい。

CSSとは

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)は、ホームページのデザインを指定するための言語です。
CSSをカスタマイズすることができれば、「文字色を変える」とか「もっと右に寄せたい」とか「背景に画像を入れたい」とか、色々なデザインをカスタマイズすることができます。

ただ、このCSSはHTMLとセットで使うものなので、HTMLの基礎知識も必要になってきます(汗)

HTMLの例

CSSの例

この例を見て、なんとなくイメージをつかんでもらえたら嬉しいのですが…
つまりホームページで表示している「文字」や「画像」「リンク」などは、全てHTMLという言語ルールに従って、「タグ」と呼ばれるのを使って書かれています。
そしてそのデザインをCSSで指定しているのです。

参考サイト:
HTMLタグクイックリファレンス(目的別)
スタイルシートリファレンス(目的別)

カスタムCSSを開こう

カスタムCSSという機能は、テーマによってついていたりついていなかったりします。
ついていないテーマの場合は、自分で子テーマというのを作ってカスタマイズする必要があります。

今回利用しているテーマ「Lightning」では、推奨プラグイン「VK All in One Expansion Unit」にこの機能がついています。
WordPress Lightning  カスタムCSS
左側のメニューの「VK ExUnit」>「CSSかカスタマイズ」を開きましょう。
ここにCSSを書くと、元のテーマのファイルを編集しなくても、デザインを自由に変更することができます。

でも何を書いていいか分からないですよね(汗)

とりあえずコピペしてみよう

とりあえずコレをコピペしてみましょう(笑)
コレはこのサイトで使っているCSSの一部になります。

すると、デザインが少し調整されます。
WordPress カスタムCSS

実際に保存してみて、見比べてみて下さい。

見出しのデザインはこちらにCSSの見本が色々出ています。
シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

色の指定について

先ほどのCSSをそのままコピペすると、見出しなどに使われている「色」がこのサイトと一緒になってしまいます(汗)
そこで、カラーコード「#●●●●●●」のところは、自分の選んだ「色」のコードを入れます。

⑮管理画面からカスタマイズできるイロイロ(サイトタイトルやベースカラーなど)で指定したキーカラーと合わせて決めると良いと思います。

はじめはよく分からなくても、何となく書いたり消したりしていくうちに、コツが掴めてきます。
上書き保存したら、前のデータが分からなくなっちゃった!ということのないように、こまめにメモをとりながら、色々変えてみて下さい。

PROFILE

natsukiWEBクリエイター
WordPressでサイトを作ってます。 とにかく面白いコトが好き。面白い人には簡単についていきます。 福井在住。東京に時々出没。3児のシングルマザー。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA