[実践編 Level 19.] WordPress(ワードプレス)|テーマ「Sydney(シドニー)」のセットアップ③ CSSを使ったレイアウト調整

トップページのコンテンツが埋まってきたところで、ここでさらにワンランク上のレイアウト調整をやってみよう。

ここでは、カスタマイザーやElementorでは調整できない部分をCSS(スタイルシート)を使ってカスタマイズする方法を攻略していく。

Sydneyのテーマを使ったデモサイトを公開するので、参考にしてほしい:

https://www.dammy.wordpress-quest.com/

※サイトの内容は攻略が進むごとに随時変わるのでご了承願いたい。
基本的にデモサイトのカスマイズは、
当サイトで記載してある方法以外は使っていない。

CSSを使ったレイアウト

現状では、参考用のダミーサイトは下記のような見た目になっている。

先ずは、ロゴのサイズが大きすぎるので、そこをCSSを使って調整していこう。

CSSの設定方法

WordPress(ワードプレス)では、いくつかCSSを追加する方法があるが、一番いいのは、カスタマイザー画面からCSSを追加する方法だ。

早速、カスタマイザー画面にアクセスしよう。

ダッシュボード」→「外観」→「カスマイズ

カスタマイザーのメニューから「CSS 追加」を選ぶ

ロゴのサイズを変更してみよう

ロゴのサイズを変更するには下記のコードをCSSに追記しよう。

.site-logo {
max-height: 〇〇px;
}
赤字で表示したpxの手前に数値を入れると横のプレビュー画面でロゴのサイズが変わるのを確認できるだろう。
ちなみに、「max-height」とは「最大の高さ」の数値で、これを設定するとロゴはこれ以上の高さにならず、横幅は高さに合わせて自動で調整される。
下記の参考画像では、ロゴの最大高さを50pxで調整してみた。
CSSの指定はテーマによって変わってくる。
.site-logoはあくまでもSydneyのテンプレートのみに有効なので注意しよう。

ナビゲーションメニューの文字サイズを調整してみよう

同じようなやり方で、メニュー周りの調整も可能だ。

メニューの文字サイズを変更するには下記のコードをCSSに追記しよう。

#mainnav ul li a {
font-size: 1.2rem;
}
「#mainnav ul li a」はSydneyのナビゲーションメニューに対応するスタイルコードとなる。
「font-size」の数値を変更するとサイズが変わるので試してみてほしい。
同じように、サブメニューのサイズも個別に変更することが可能だ。
サブメニューのCSSは下記のコードになる。
#mainnav .sub-menu li a {
font-size: 1.1rem;
}
ちなみに、フォントサイズに加え、行間や字間の調整も可能だ。
行間や字間を調整する方法は下記で攻略していく。

文字周りを調整しよう

CSSでは、文字の大きさ、行間、字間などを調整できる。

これを調整すると見た目がガラッと変わるはずだ。

文字サイズの調整

先ずは文字のサイズ調整からやってみよう。

文字周りはbodyスタイルを変更していく。

下記のコードをCSSにコピペしてみよう。

body {
font-size: 14px;
}
ここでは、文字のサイズを14pxに調整してみた。
ここはカスタマイザーの画面を実際に確認しながら好きな数値に調整してみてほしい。

字間の調整

先ずは字間の調整からやってみよう。

文字周りはbodyスタイルを変更していく。

赤字のコードをbodyの中にコピペしてみよう。

body {
font-size: 14px;
letter-spacing: 0.2em;
}
letter-spacing」は字間を調整するスタイルで、単位はemで設定する。
emとは簡単に説明すると、%と同じような感じで、1em=100%とすると、0.2em=20%という考え方になる。
ちなみに、この100%は設定したフォントサイズと相対なので、14px=100%=1em
設定すると、文字間が変わるのが確認できるはずだ。デフォルトでは詰まり過ぎているので、少しゆったりさせるとスッキリしてオススメだ。

行間の調整

行間の調整には赤字のコードをbodyの中に追記しよう。

body {
font-size: 14px;
letter-spacing: 0.2em;
line-height: 2em;
}
ここでも、カスタマイザーを確認しながら調整してみてほしい。行間も時間と一緒で少し余白を持たせてあげるとスッキリする。

書体(フォント)を設定してみよう

先ずは欧文フォントの設定からしてみよう。

Sydneyではカスタマイザーから簡単に欧文を設定できる。

カスタマイザーのメニューから「フォント」を選択。
「全体のフォント」では、本文内の欧文フォントを変更できる。

同じように、「見出しフォント」では見出しに使っている欧文フォントを変更できる。

「見出しフォント」とは、hタグを使った文字周りのことで、hタグが使われていないと「全体のフォント」の設定が適用される。

 

Google fontで書体を探そう

欧文フォントを設定するには、Google fontから書体を選んで設定する。

Google fontのリンクを貼っておく:

https://fonts.google.com/

フォントを追加するにはフォントのコードを確認する必要がある。

好きなフォントの右上にある「」マークをクリックしてフォントを選択する。

画面下に「Family Selected」のタグが現れるので、クリックしてコードをコピーしよう。

始めに、上のハイライトした箇所(太字の部分)「Noto+Sans+JP」をコピーして、カスタマイザーの「体のフォント」の「フォント名/スタイル/セット」にペーストしよう。

同様に、下の「‘Noto Sans JP’, sans-serif;」をカスタマイザーの「フォントファミリー」にペースト。

左の画像のようにペーストすればOKだ。

ちなみに、「Noto Sans JP」はGoogle fontがサポートしている日本語フォントなので、和文の書体も変わるはずだ。

見出しも同じように設定可能なので、好きな書体を選んで試してみてほしい。

和文書体を設定しよう

Noto Sans JPを使う場合でも、和文の書体設定はしておこう。

和文書体を追加するには赤字のコードをcssのbody内に追記しよう。

body {
font-size: 14px;
letter-spacing: 0.2em;
line-height: 2em;
font-family: “Noto Sans JP”, “游ゴシック Medium”, “游ゴシック体”, “Yu Gothic Medium”, YuGothic, “ヒラギノ角ゴ ProN”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, “MS Pゴシック”, “MS PGothic”;
}
なんで色んな書体がずらっと並んでいるかというと、ブラウザやOSによってはサポートされていない書体があるので、候補を並べている。
CSSでは、先頭の書体を優先的に使うので、「Noto Sans JP」が使えない場合は、「游ゴシック」を使って和文を表示してくれる。
「Nota Sans JP」を先頭に持ってきているのは、先ほどカスタマイザーの「全体のフォント」で「Nota Sans JP」を設定しているためだ。
CSSに「Nota Sans JP」を追記しないと、「游ゴシック」が優先的に使われる。
なお、書体の候補は好きなように変えてもらっても大丈夫だ。

最後に、CSSをカスタマイズする前とした後の画像を見比べてほしい。

【CSSカスタマイズ前】
 
【CSSカスタマイズ後】
小さくて少しわかりにくいかもしれないが、印象はかなり変わるはずだ。
 カスタマイザーやElementorで調整できない箇所はCSSで対応しよう
 CSSはカスタマイザーから編集しよう
 欧文書体はGoogle fontを設定しよう
初心者にとってCSSは敷居が高いイメージがあるが、コツさえ掴んでしまえば、コード追記するだけで様々なカスタマイズが可能なので、積極的に使っていこう。
CSSを使えるようになれば、きっとサイトの表現にも広がりが見えるはずだ。
では、冒険者諸君、GOOD QUEST !!