初心者が企業のWebサイトを作る上でかかせないWordPress（ワードプレス）には、「追加CSS」という機能が備わっています。この「追加CSS」は非常に便利な機能なのですが、初心者には一見ハードルが高いように見えます。初心者である私たちも、エラーだらけで全く手に負えなかったこの機能。実は工夫次第で簡単に扱えて、勉強にもなる素晴らしいものでした。ここでは「追加CSS」について書いていきたいと思います。
「追加CSS」とは？
そもそも何なのだという話。CSSとはWebサイトの主に「見た目」を決定してい部分です。ダッシュボードの「外観」から「テーマの編集」を開いていただくと、テーマを形作っているCSSが見られますが、そのCSSを書き換えることで、Webサイトの「見た目」を変えられるのです。
この「テーマの編集」のやり方に関してはネット検索をすれば、沢山の記事が散見されますが、私のような素人は「失敗するとサイトが真っ白になって戻らなくなりますよ」という脅しも同時に目について離れません。
「テーマ」をカスタマイズしていると、ここのフォントを変えたい、色を変えたいという細かい願望が出てきます。でも「テーマの編集」を書き換えるのはちょっと。という人のために「追加CSS」があるのです。
「テーマの編集」を開くとこのような文句が記載してあります。
この付随のCSSエディターのリンクをクリックすると、「追加CSS」の編集画面に飛ばされます。
「追加CSS」とは、CSSの書き換えたい部分に、上書きをする機能なのです。
例えば
.site-title {
font-size: 30px;
}
という記載がCSSにあったとすると、「追加CSS」に
.site-title {
font-size: 40px;
}
と書き込むことで、サイトタイトルのフォントを30pxから40pxへ変更することができます。
「追加CSS」の扱い方
「追加CSSって意外と使えそう」と感じられたと思います。
私は始め、「テーマの編集」画面のCSSを凝視して、変えたいと思う部分を「追加CSS」に書き込んでみたのですが、何度やっても上手くいきませんでした。初心者が読み込むことで理解できるほど、CSSは簡単な構造ではありません。ではどうするのか。
Google先生にお願いする！
Googleの検索で調べろというわけではありません。Google Chromeのブラウザ上で右クリックしてみて下さい。「検証」という文字が見付かると思います。
この「検証」を押すことで、下図のように右側にサイトのソースコードが現れます。
赤い四角で囲われた部分がCSSです。実はこのCSSを書き換えると、左のサイトが変更結果を表示してくれるのです。
黒い小さい四角で囲まれたアイコンをクリックし、例えば左上の赤矢印の部分にカーソルを合わせると、その部分に対応するソースコードが示されます。上図では右側の赤矢印の部分になります。そして右側の赤矢印上の青塗りされた部分をクリックすると、赤い四角内のCSSが赤矢印に対応した部分を表示してくれます。
例えば上の場合、タイトルのフォントやサイズを変更したいのであれば、今表示されている赤い四角内のCSSを書き換えれば良いのです。書き換えた結果は左のサイト画面に反映されるので、思い通りの結果になるまで、試行錯誤ができます。
実際にタイトルのフォントサイズを変更してみる
実際に私たちのサイトタイトルのフォントサイズを変更してみます。
上記の要領で、「検証」からCSSを表示し、フォントサイズを指定しているコードを特定します。
ここでサイトタイトルのフォントサイズを30pxに指定していることが分かります。この30を60に書き換えると、
こんな感じにサイトタイトルの文字が大きくなりました。この表示結果で満足であれば、上のCSSの赤で囲った部分をコピーして「追加CSS」に貼り付ければ完了です。
.navbar-inverse .navbar-brand .site-title {
margin-bottom: 0;
color: #000;
font-family: “Noto Sans Japanese-100”, Helvetica, sans-serif;
font-size: 60px;
font-weight: bold;
line-height: normal;
}
こんな感じに貼り付けますが、貼り付けに際しては「 . 」 から始まって「 ｝」で終わるようにします。
上の場合、｛ ｝の中は「font-size: 60px;」だけ残せばいいのですが、一応全て貼り付けました。
以上で「追加CSS」の使い方の説明を終わります。Google Chromeの「検証」機能によって、「追加CSS」が初心者でも簡単に変更できることが分かると思います。
