［実践編 Level 19.］ WordPress（ワードプレス）｜テーマ「Sydney（シドニー）」のセットアップ③ CSSを使ったレイアウト調整

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

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

CSSを使ったレイアウト

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

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

CSSの設定方法

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

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

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

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

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

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

.site-logo {
max-height: 〇〇px;
}

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

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

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

#mainnav ul li a {
font-size: 1.2rem;
}

#mainnav .sub-menu li a {
font-size: 1.1rem;
}

文字周りを調整しよう

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

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

文字サイズの調整

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

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

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

body {
font-size: 14px;
}

ここでは、文字のサイズを14pxに調整してみた。

字間の調整

body {
font-size: 14px;
letter-spacing: 0.2em;
}

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

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

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

行間の調整

行間の調整には赤字のコードを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 PGothic";
}

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

【CSSカスタマイズ前】

 

【CSSカスタマイズ後】