こんにちは、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」にこの機能がついています。

左側のメニューの「VK ExUnit」＞「CSSかカスタマイズ」を開きましょう。
ここにCSSを書くと、元のテーマのファイルを編集しなくても、デザインを自由に変更することができます。

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

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

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

すると、デザインが少し調整されます。

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

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

色の指定について

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

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

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