《WordPress》追加CSSでブログデザインや記事の文章をデコレーションしよう!

ブログで記事を書いていると、だんだんと「もうちょっと彩りが欲しい」と感じてくると思います。
文章に色線を引きたい」「見出しを目立たせたい」「枠をつくりたい」と多岐に渡るでしょう。
そんなとき安全かつ簡単に設定する方法が「追加CSS」です。




CSSとは

CSSとはブログなどのウェブページのスタイルやデザインをクラスとして作成するためのものです。

ブログのフォント・行間・背景色などの全ページで共通で設定されているものは、CSSでまとめて設定されています。

こんなふうに背景色をつけたりするのも、こんなふうに蛍光線を引いたりするのも

こうやって枠をつくるのも

全部CSSで設定できます。

本来こういったことをするには文章ひとつひとつに「フォントサイズ」「フォントカラー」といったことを細かく設定していかなくてはなりません。

しかし記事ごとにいちいち設定を書くのは面倒ですよね?
そこで「文章はこういう設定」と設定を一括でまとめてしまえるのがCSSの役割です。
CSSのおかげでhtml文を書く手間を大幅に減らすことができます。

CSSを使えばブログ内の「記事の見出しデザイン」や「文章デザイン」、あるいはページレイアウトなどをたった数行のプログラムで一括で設定・管理できるようになります。

CSSの書き方

CSSはhtml文で書いたデザインを「クラス」として設定・管理することができます。

例えば「フォントサイズを30px」「フォントカラーを青」といったデザインに変更したい場合、

<span style="font-size:30px;color:#0000ff">あいうえお</span>

といった風にデザインを変更したい文章一つ一つに書かないといけません。

これをCSSクラスとして作成します。(font-designは便宜上のもので、好きに変更できます。)

.font-design{
  font-size:30px;
  color:#0000ff;
}

次に作成したクラスをhtml文で適応させます。

<span class="font-size:30px;color:#0000ff">あいうえお</span>

上記のhtml文の「style」が「class」に変更されていますよね?
これで書くプログラム量を少なくできます。
実際の文章はこうなります。

あいうえお

「html文書く手間はあんまり変わらないんじゃ?」と思うでしょうが、これが真価を発揮するのは後々デザインを変えたくなったときです。

この文章のフォントを赤に変えたくなったとします。
そうするとstyleで文章を変えていると全記事を一つ一つ見直さなくてはなりません。

CSSで設定しておけば「color」の部分を#ff0000に変えれば設定した全記事の文章のフォントが赤に変わります。
このように変更作業の手間を大幅に省いてくれます。

追加CSSとは

追加CSSとはWordPressの基本機能の一つで、安全かつ簡単にブログデザインを変更できる機能です。

本来CSSを設定するには、ブログのCSSプログラムがまとめて書かれている「style.css」というファイルのCSSプログラムを書き変えなければなりません。

しかしCSSファイルの内容を直接書き変えてしまうと、書きかえる前の設定を忘れてしまった場合元に戻せなくなってしまいます。

追加CSSは文字通り「追加」でCSSを追加するもので、元のCSSファイルを弄ることなく設定を反映されることができます。
追加したCSSの設定が気に入らなければ、追加CSS内に書いたCSSクラスを消せば元通りになるため、安全に設定を変更していくことができるようになります。

「追加CSS」の場所

追加CSSはダッシュボードの「外観」→「カスタマイズ」で、ブログのカスタマイズ画面にあります。
どのテーマを選んでいても、一番下のほうに「追加CSS」とあるので、ここでCSSの設定をしましょう。

「追加CSS」の使い方

「追加CSS」を開いて出た欄にCSSを書きこんでいけば、右のブログ画面に反映されていきます。


これの設定は、

・記事ページの見出し2を対象
・背景色を水色
・左側に青の縦線
・余白の追加

で装飾しています。

同じように他の見出しも設定できますし、フォントの大きさや色なども変えることができます。

設定はブログ全体に反映される

追加CSSで設定したことは、ブログ内にある対応する要素すべてに反映されます
ですので既存のテーマで設定されているクラスの場合、変更したくない部分も反映されてしまうことがあります

例えば「h2」タグで見出し2を装飾したら、記事ページの見出しだけでなくトップページの「カテゴリー」や「アーカイブ」といったところまで変更されてしまったりすることがあります。(カテゴリーのタグが「h2」で設定されていた場合)

各テーマはつくっている人が違います。
基本的な部分などは同じように設定されていますが、設定されているクラス名などが微妙に違ったりすることもあるので、編集したい部分をしっかり把握しないとうまく設定できないことも多いです。

編集したい部分を知るためには

「CSSでh2タグを編集しても反映されない」などの場合、ページ設定されているクラス名が微妙に違う場合があります。

その設定されているクラス名を知る方法のひとつとして、そのページの「ソースコード」を見てみましょう。

まずはそのページで右クリックし、「ページのソースを表示」あるいは「フレームのソースを表示」でソースコードを表示します。

次にそのページの最初の5~6文字ほどソースコード内で検索します。(Ctrl+Fで検索)
検索結果の文字の前に「p」タグが使われているところ、その上あたりにページ全体に使われているクラス名があると思います。


この場合はページ全体に entry-content というクラス設定がされています。

つまりこのページの見出し2をCSS設定したいときは、

.entry-content h2{
   font-size:20px;
}

などと書いていきます。
これで見出し2が設定できるようになります。
「h2」の部分を「h3」に変えれば見出し3に適用されるようになります。

最後に

「追加CSS」は「テーマの編集」と同じく、ブログの一括編集を手助けできる機能です。
しかし詳しく設定しないと、別の場所にも設定が反映されてしまったりします。
一度設定したら、ちゃんと自分の臨む場所だけに反映されているか、「トップページ」や「記事ページ」を見比べて確かめましょう。