このサイトは「Simplicity2」というテーマを使用しています。このテーマはデフォルト状態でも気に入っているデザインで、WordPress標準のカスタマイザーを使えば問題なくきれいなサイトが作れます。ただそのままだとSimplicity2でサイトを作っている人と同じになってしまうし、せっかくシンプルなテーマですからここらで「CSS」なるものを覚えてみようと思いました。
今までCSSはちょっと敷居が高くて、何とか避けて通れないかと思っていましたが、記事などのコンテンツを追加していくうち、「ここはこういうデザインで表現できたら」と思うようになり、訪問してくれた方がより楽しく、より見やすいサイトを作るにはやるしかない！ということで挑戦しました。というか、基本的にホームページなりサイトなりを作ろうと思ったら必須項目なんですね。WordPressではテーマ変更プラグインである程度やりたいことができてしまうのでやってなかっただけなのです。では個人的な勉強も兼ねて書いていきます。
私のスキルが上がっているのか、最初からそうだったのか不明ですが、ちょっとしたデザイン変更だったら案外簡単に行うことができることが分かりました。もちろんCSSを触るのは素人ですから素人なりに基礎的な部分を紹介できたらと思います。
WordPressでデザインを出力している仕組み
WordPressに限らずほとんどすべてのサイトが同じ仕組みであるとは言えますが、ここはあえてWordPressを基礎に進めます。
WordPressのサイトを表示するのは「テーマ」と呼ばれるテンプレートです。このテンプレートは
- PHPを使ってデータベースから必要な情報を呼び出す
- HTMLを使ってコンテンツを表現していく
- CSSから必要なデザイン情報を呼び出す
という３つのことをして訪問してくれた方にページを表示しています（もちろん管理画面もCSSとPHPとHTMLで作られています）。３つめの「デザイン情報」を持っているのが「css.php」というファイルになります。
「css.php」の編集は管理画面の「外観」→「テーマ編集」から行うことができます。
CSS.phpを開いてみてびっくりすること
ふむふむ・・・ということでさっそくCSS.phpを開いてみると・・・「なんじゃこりゃ？」というコードの記述がずらーっと並んだ画面が登場します。この長いファイルでサイトのデザインが決定されているんですね。ただこれを全部理解して改造していくのは至難の業ですから、必要な部分だけ編集していくことにします。
CSSの変更はこのファイルに直接書き換えをしてももちろん使えるのですが、テーマを変更したり、テーマの更新をしたりするとやったことがすべて無になってしまいます。これではもったいないので別の方法でCSSを編集していきます。方法は次の２種類です。
子テーマを作って編集する
Simplicity2は公式サイトで子テーマが配布されているので、それをアップロードして有効化するだけです。その他のテーマについては子テーマを作成して適用することになりますが、ここでは割愛させていただきます。子テーマにするメリットは前述した親テーマの更新を行った際に影響を受けないということです。
CSSを追加・管理するプラグインを使う
やっぱりWordPressといえばプラグイン。ということで、CSSを追加できるプラグインを紹介します。有効化すると管理画面にメニューが出てくるのでそこでCSSを追加・編集していくだけです。しかもこのプラグインではCSSを細かく管理できるのでどこの部分をデザインするためのものなのかが一目瞭然となり、コードの羅列でアレルギーが起こることもありません。
Simple Custom CSS and JSの公式サイト：
できればメインのCSSを直接編集した方がいい
WordPressのようにPHPとデータベースを使ったサイト構築ツール（CMS）の場合、１つのページを見えるようにするためにたくさんのデータの出し入れがあります。この中にCSSも含まれていて、これらを抽出する作業は少しでも少なく、少しでも一本化した方がページを作るのにかかるスピードが短縮され、かつ、動かすサーバーの負担も減ります。CSSの抽出だけに絞ってみても・・・
- CSSを追加するプラグインがあればそこから抽出
- １になければ子テーマに該当のCSSがあればそこから抽出
- ２になければ親テーマに該当のCSSがあればそこから抽出
- ３になければWordPress標準のCSSから抽出もしくは基本デザインで出力
といった段取になります。これを上から順にタグや文字があるたびに動くわけですから大変な作業ですね。できればこの段取を短縮したいものですが、より簡単に管理したい、プログラムの更新で「無」になってしまうことを避けたいという観点からいろいろなツールを使うのです。できれば上記の２ぐらいまでで表現できるようにしましょう。
CSSの基本は「セレクタ（クラス）」と「コード」
CSSにはクラスに対してコードを記述するという仕組みになっています。
要約すると・・・
このコードのデザインをこのクラスで指定された部分すべてにはめ込みなさい
ということです。クラスの中にはよく使われる見出しタグ（h1など）の他、ページ上に表示があるほとんどのパーツに適用されています。これを１つ１つ覚えてデザイン変更をするの？と思っていた私にとってはここが一番の難関でした。今までは、これが分かって操作できるなんてウェブデザイナーは天才だと思っていましたがそうでもなかったのかもしれません。
CSS編集の基本は「今のデザイン」をどう変えるか？
CSSのクラスや適用されているコードは１つ１つ調べなくても以下の方法で抽出し、コピーして使うことができます。決して作業は難しくなく、IEやChromeなどのブラウザに標準搭載されている機能を使えば簡単に調べることができます。
CSSのコードの抽出と変更を行う手順
- 自分のサイト（デザイン変更したいページ）を開く
- デザインを変えたい（適用されているCSSを調べたい）部分で「右クリック」し、「検証」をクリック
画面の左右や下にサブ画面が登場します。これをデベロッパーツールと呼びます。
- 出てくるサブ画面の中で「styles」という項目を探す
- そこに書いてあるコードをコピー
基本的にはこれで今使われている「セレクタ」と「コード」が入手できます。コピーしたらテーマ編集でCSSにペーストして変更を加えていけば完了です。同じセレクタが使われている部分は一括で設定できます。もちろん今まで作ったページのすべてで同じセレクタが使われている部分も変更されます。
色や隙間などの変更は元のコードの数字や色コードを変更すればいいのですが、その他複雑なデザインを与える場合はネットで調べてみれば一発です。通常検索して調べたコードはクラス名が自身のサイト用になっていないだけなので、その部分を変えればＯＫです。
また、画像を使う場合は
テーマフォルダからみた相対パス
で設定する（「テーマフォルダ」の中の「images」フォルダだったら「/images/画像のファイル名」）ことさえ覚えておけばいいと思います。
CSSは上から下に読み込まれて上書きされていきますので、内容を追記する場合は一番下に記述するようにしましょう。
また、WordPressのバージョンによってはテーマのCSSではなく、「外観」→「カスタマイズ」から「追加CSS」を開いて追記することもできますので試してみてくださいね。
ここまでが基本中の基本です。「こんなこと解っているよ」と言われそうな内容でしたが、私は前述したとおりド素人ですのでご容赦ください。勉強していってさらにいろいろ分かった段階で加筆なり別の記事なりで紹介したいと思います。
サイトの環境によっては即時反映されないことも
サイト表示を高速化する機能として有効な「キャッシュ」機能。これによって何度表示しても変更したはずのCSSが反映していないように見えることがあります。キャッシュは通常訪問されたページを一定時間保存して、次にアクセスされたときには保存した情報を表示するので、CSSを変更する際にはこの機能を一旦無効にする、あまり閲覧されていないページを表示する、しばらく時間を置いて表示してみるなどするときちんと反映されています。
