Snow MonkeyでCSSを設定してサイトの見た目を変えよう [おれのゴリラ育成③]

こんばんは。おれのゴリラ育成も連載三回目。
今日は、サイトの見た目をあれこれ変えられるCSSについて、どういう風にしているかなどをお話させていただきます。

そもそもCSSとは

CSSとは、サイトのレイアウトやデザインなど見た目を変えていくための言語です。
HTMLという家の骨組み・基礎に対して、内壁のような部屋の形をしていくようなレイアウト・壁紙や床、ペンキといった部屋のテイストを決めるデザインの部分がCSSという言語でごにょごにょする部分になります。

CSSとは？これを読めば初心者でも必ずCSSが書ける！｜Udemy メディア

今回はCSSとは何なのかについて解説します。豊富な画像と具体例で専門用語を使わずに解説しているのでCSS初心者にも安心の記事です。最後には、CSS体験というのもご用意し…

udemy.benesse.co.jp

Snow MonkeyでもCSSを使うことによってサイトの印象やレイアウトを変えていくことができる

CSSは、最初に宣言したスタイル以外にも、上書き上書きでスタイルを変更することができます。
こちらはSnow Monkeyテーマでももちろん行うことが可能！

例えば、Snow Monkeyの公式フォーラムにて「○○の見た目を○○にしたい」といった質問をすると、よく「下記CSSを追加してみてください」と、CSSのコードを回答にいただくことがあると思います。

で、CSSってどう追加するのだろう・・・ってなった場合は下記手順をやってみてください。

カスタマイザーの追加CSSにコードを記述していく

WordPress には元々カスタマイズ の中に「追加CSS」という設定メニューがあり、そこにCSSを追加し保存すると、サイトに追加したCSSを設定することができます。

私も実際追加CSS設定でCSS設定していっている

たたき台（ワイヤー）のサイト作りのとき、あと急ぎで修正対応などしていかなければいけないときなどに、私もよく「追加CSS」にCSSを追加して対応していきます。

Chromeの要素の検証にて、とりあえずCSSを編集してテストを行う

これでスタイル変更できるかな？？っていうコードに当たりをつけておいて、Chromeの要素の検証にて、コードを入力してテストを行います。

カスタマイザーの追加CSSでテストしたCSSを追記する

テストが無事終了し、追加すべきコードがわかったら、追加CSSにテストしたコードを追加して保存します。

My Snow Monkeyを使用してCSSを設定していく

CSSはCSSファイルとして持たせて、そちらを読み込ませることによっても、カスタマイズしたスタイルをサイトに設定することができます。

CSSファイルとして持たせておくと、

• エディタを使用してコードをサクサク書ける（エディタだとコードを補完してくれたり、Emmet使用して短い入力でコード書けたりして便利です）
• gitなどでバージョン管理ができる（バックアップとしても安心）
• コードをキャッシュで保持させることも可能になる

といったメリットがあります。

My Snow MonkeyにCSS設置する手順など詳細については、また次回。