WordPressのページをスタイルシート（css）でカスタマイズする

スタイルシート（css）でカスタマイズ

WordPressのブロックエディタには多くの装飾機能が装備されているため、スタイルシート（css）を編集しなくてもページを作り上げることは十分可能です。しかしながら、段落の背景や枠線などはスタイルシート（css）を利用することで柔軟な装飾することができます。

スタイルシート（CSS）とは、デザインやレイアウトなど、ページを装飾できるファイルのことをいいます。ページ（文書）の文字サイズ、文字種類、文字色、行間、余白などを指定することができます。

カスケーディングスタイルシート (Cascading Style Sheets)の略で「CSS」と呼ばれています。

WordPressはテンプレートでこのスタイルシートを使用して、デザインやレイアウトを指定しています。ページのデザインは、こちらのCSSファイルを編集することでを簡単にカスタマイズすることができます。

WordPressで「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。

ブロックエディタ対応のテーマではブロックごとにタイポグラフィ（「文字や文章を読みやすく、または美しく見せるための技術」）を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。

注意点）スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。

テーマカスタマイザーで記述

「スタイルシート・css」はテーマカスタマイザーの「追加css」に記述します。

通常の css コードを記述することでスタイルシートとして適応されます。複数記述したい場合は、順次追加します。サイト内のすべてのページに反映されるので、あまり使用しないものは、ページごとに設定することを推奨します。

/*方眼紙風ボックス*/
.box_hou{
margin: 2em auto;
padding:2em;/*内側余白*/
background-image: linear-gradient(0deg, transparent 19px, #ccc 20px),linear-gradient(90deg,  transparent 19px, #ccc 20px);
background-size: 20px 20px;
}

テンプレートファイルに記述

テンプレートファイルにスタイルシートを記述してゆく方法です。こちらは現在推奨されていないものです。それは、子テーマを作成して、子テーマに記述しないと、テーマ更新時に上書きされてしまい再度記述する必要があるからです。テーマカスタマイザーの「追加css」に記述すれば、更新による上書きで空白になることはありません。

外観　→　テーマファイルエディター　→　style.css と進めば上記画面になり、cssを記述することができます。記述する場合は、下部に順次追加していくことになります。

プラグインを利用して記述

ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ　を有効にしておくと、ページごとに スタイルシートを追加することができます。

有料テーマや無料テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。サイトの内容によってはこちらを選ぶとよいかもしれません。

WordPressには大きく分けると有料テーマと無料テーマの２種類があります。おすすめはやはり有料テーマになります。WEB制作会社が販売していることが多く、デザイン性が高い、カスタマイズをしなくても使える、記事の装飾機能が充実しているなどのメリットがあります。無料で利用できるテーマには、wordpress.orgのテーマディレクトリからダウンロードできる公認テーマもありますが、プラグインでの機能追加、スタイルシートのカスタマイズなどちょっと敷居が高いとも言えます。また、一般的には無料テーマは無償で利用でき、開発者のサイトなどからダウンロードすることで利用できるものもありますがこちらは更新がストップするなどの不安材料もあります。可能ならば有料テーマを検討することをおすすめします。