CSSって何だろう？

CSSとは「Cascading Style Sheets」の略でテキストやHTMLのスタイルを指定する時に使われるスタイルシート言語です。

文字の色、大きさ、背景色などの装飾はHTML上でも記述することができますが、HTMLはあくまでも文書構造を定義するものであるため、HTML内に装飾の記述をしてしまうと、とても醜い文書構造になってしまいます。

CSSを使用し、特定の要素をタグで指定し、スタイルを指定することで様々な装飾を施すことができます。

初心者の方は「webサイトの外観を整えるもの」と考えると分かりやすいと思います。

ワードプレスでCSS編集時の注意点

CSSを編集する際にWordPress上のスタイルシートを直接変更してしまうと、あとで元に戻そうとした時などに苦労してしまいます。

Webサイトをオープンして誰にでも見られる状態にしている時にCSSを編集しながらプレビューで確認してサイトを編集していると、たまたまサイトに訪れている人が困惑する可能性もあります。

そこで以下のような環境を整えておくことによってサイトをスムーズに編集することができるようになります。

バックアップを取っておこう

バックアップを取っておくことは何よりも大切です。スタイルを変更するためにCSSを編集していくわけですが、元のCSSを残しておかなければ元に戻すことはできません。

初期のスタイルシートの状態に戻すことは初期化でできますが、ある程度、変更が加わっているスタイルシートに戻すことは非常に面倒に感じるでしょう。

なので、CSSを編集する前に、その時の状態をバックアップしておくような習慣をつけておきましょう。

子テーマを作ろう

WordPressでスタイルシートを編集する際に直接、CSSを編集するのではなく「子テーマ」というスタイルシートを作成して、そこにCSSを記述するという方法があります。子テーマを作ることによって親テーマを直接変更する必要がなくなります。

親テーマに対して、変更したい部分だけを子テーマに指定するだけで良いのでスタイルシートの見た目もシンプルになって見やすいです。

親テーマのスタイルシートを編集してしまうと、テーマ自体をアップデートした時に編集したスタイルがリセットされてしまいます。この点でも子テーマを作成するメリットがあります。

子テーマを作成するのは難しいことではありませんので、事前に作成しておくと良いでしょう。

参考： 子テーマの作り方

テスト環境があるとベター

webサイトのスタイルを編集する時に「ここをこうしたら、どうなるだろう？」と実験しながら編集したいなんてことはよくあることです。

そんな時に公開中のサイトで実験をしていて、レイアウトが崩れてしまったり、原因不明の不具合が出てしまったら困ってしまいます。サイトに変更を加えたいと思い実行する前に「テスト環境」があれば、そこで何度も実験することが可能です。

テスト環境があれば、大胆な変更も心配することなく実行できます。「テスト環境」とは本家のサイトと同じものを「テスト用」として作ることを言います。「BASIC認証」することでサイトが第三者に見られることもありません。

テスト版で問題不明の不具合が出た時は本家の方からCSSをコピーしてくれば元の状態に戻すことができます。2つの同じサイトがあれば互いがバックアップにもなるので、テスト環境を構築しておくことをおすすめします。

ワードプレスCSSの編集方法

ワードプレス管理画面からCSSを編集する

スタイルシートを変更する際の最もシンプルな方法はWordPressの管理画面から変更する方法です。インターネット上でCSSの変更方法を検索してヒットする情報のほとんどが、この方法でスタイルシートを編集しています。

WordPress管理画面の左側にある「外観」にカーソルを合わせると変更項目が表示されるので「テーマ編集」を選択します。

こちらの画像ではAFFINGER4の「子テーマ」をインストールしているので「AFFINGER4 Child」という名前のスタイルシートが表示されます。テーマに関係なくCSSを編集する際は「スタイルシート（style.css）」を選択して編集します。

FTPツールを使ってCSSを編集する

FTPとは「File Transfer Protocol」の略でコンピューターとサーバーの間でファイルの転送をする為に用いられる手順のこと。

FTPツールとは簡単に言うとサーバーとコンピューターの「ファイル転送ツール」です。

こちらがFTPツール（FileZilla）の画面、こちらでスタイルシートを選択するとテキストエディタが開きます。

あとはテキストを編集してアップロードすれば完了です。

基本的な仕組みはWordPressの管理画面から編集するのと変わりません。FTPツールを使うメリットは編集だけでなくバックアップを取ることも簡単なことや、ファイルの転送ができるため、今後、自分でホームページを作っていきたいと思う方などは、使い方を覚えておいて損はないツールであると言えます。

今回使ってりいるFTPツールは、WindowsでもMacでも使える高機能で無料のFTPツール「FileZilla」です。

FileZilla

https://filezilla-project.org/

HTMLに記述してCSSを編集する

CSSはwebサイトのスタイルを編集するために用いられるスタイルシート言語ですが、HTMLにスタイルを記述することもできます。

これは前述したように、あまりにも沢山のスタイルをHTML上に記述してしまうと、HTMLの文書構造が崩れるため、あまりおすすめできません。

ただし、とてもシンプルなスタイルの適用の場合、HTML上でスタイルを記述することもあります。

例えば、文字の大きさを1箇所のみ変更したい場合や、部分的にフォントを変更する場合などにHTML上でスタイルを定義することがあります。

ただスタイルシートがある場合はスタイルシートで完結させた方が後々のことを考えても作業がスムーズできるでしょう。

テーマの「追加CSS」から編集する

使用するテーマによっては「追加CSS」という項目があります。

WordPress管理画面から「外観」「カスタマイズ」と進むとプレビューを確認しながら外観をカスタマイズする画面が表示されます。

カスタマイズ項目の中に「追加CSS」という項目がある場合は、こちらでCSSを追加で記述することでスタイルを指定することができます。

「追加CSS」でスタイルシートを編集する場合は「子テーマ」と同じような仕組みになっており、親テーマは直接変更されることはありません。プレビューを見ながら、どのように変更されるのかを確認しながら作業ができるのが特徴です。

こちらの方法でスタイルシートをに追記する場合もバックアップを取ることは忘れないようにしましょう。

CSS編集ができるようになるプラグイン

WordPressにはスタイルシートを直接編集しなくても大丈夫なようにプラグインも開発されています。

こちらも基本的な概念は「子テーマ」や「追加CSS」と同じです。

テーマをアップデートしてもリセットされることもありません。わざわざ「子テーマ」を作りたくないという方や「追加CSS」の画面が小さくて見づらいと感じる方にはプラグインがオススメです。

中でも「Simple Custom CSS」は非常にシンプルでおすすめです。編集したいスタイルを記述して「Update Custom CSS」をクリックすれば完了なのでプラグインというよりも子テーマ的な感覚で扱えます。

Simple Custom CSS

https://ja.wordpress.org/plugins/simple-custom-css/

楽！ミスが減る！ブラウザでCSSの動作を確認する

webブラウザには「開発者ツール」というものがあります。これは自分が見ているサイトがどのような構造になっているかを確認することができる開発者にとって非常に便利な機能です。ほとんどのブラウザに実装されている機能で、その場で見ているサイトを編集することもできます。

サイトを編集したとしても、本当に変更されるわけではありませんので、安心して使うことができます。

ここでは主要なブラウザの開発者ツールを紹介します。

Chrome

webブラウザで人気のgoogle chromeの開発者ツールです。

chromeのメニューで「開発/管理」から「デベロッパーツール」を選択すると以下のような画面が表示されます。

ここで、どのような構造になっているか気になる部分を指定すれば、下の画像のようにスタイルシートの内容やHTMLの内容が確認できます。

Googleの検索画面のロゴのHTMLの記述とCSSの記述を確認することができるので、自分のサイトを編集する時の1つの目安になります。

上の画像では例としてGoogleの検索画面の背景色を黄緑色に変更して、本来は「日本」と入っている部分を「■■WordPressの使い方■■」と変更したものです。

このようにプレビューを確認しながら作業をすることができます。自分のwebサイトを表示して、この作業を行えば「何をどうすれば望むデザインになるのか」が簡単に確認できるので便利です。

IE

IE（インターネット・エクスプローラ）はWindowsに標準でインストールされているブラウザです。IEでもGoogle Chromeと同じように開発者ツールがあります。

気になるwebサイト上でキーボードの「F12」を押すと、HTMLやCSSが表示されます。

IEのバージョン毎に開発者ツールの見た目も大きく変わっていますが、基礎となる部分は変わりませので、参考になるサイトのサイト構造をどんどん見ていきましょう。

Edge

Windows10から実装された相互運用性の高いブラウザ「Edge」でも開発者ツールを使用できます。EdgeでもIEの時と同じようにキーボードの「F12」を押すことによって開発者ツールが開きます。

使い方は他の開発者ツールと同じく、ソースコードの表示、編集に使うことができます。

HTMLやCSSの知識が乏しい方は開発者ツールで、サイトがどのように構成されているのかや、どのような記述をすると何が変わるのかを確認してみるのも良いでしょう。

まとめ

今回は、初心者の方向けにCSSを編集するための基礎知識とツールを紹介しました。

CSSはサイトの外観を整えるために必ず覚えておきたい事でもあります。完全にマスターするには時間を必要としますが「何が問題でこうなっているのか」「ここをイメージ通りの外観に編集するには何をすればいいのか」を理解して実行できるようになることは、サイトを運営していくにあたって非常に役立つスキルになるでしょう。

1日で覚えられることではありませんが、開発者ツールなどを使って頻繁にサイト構造に触れていくことで感覚を掴んでいってみてください。