「WordPressって簡単にブログが作成できるんだけど、なんかダサくみえる・・・」
と、お困りのあなた！というか、私自身がそれで困ってるんですが（笑）
このシリーズ『無料テーマを使い倒す』コーナーでは、無料テーマを少しでも見やすくする、きれいにする、かっこよくするヒントを載せていきます！もっとこうしたほうがいいよなど意見ありましたら是非コメントください！
さて、今回使用するのはこちらのテーマ。
「TwentyTwentyOne」
デフォルトテーマですね！WordPress使おうとすれば絶対に最初に目にするテーマだと思います。
このテーマで早速ブログを作ってみたいと思います。
とりあえず、固定ページとカスタマイズでホーム画面を作る。
ささっと作成してみました。そもそもここまでささっと作成できないよ～～～って方は
こっちのページ（※準備中）を見てください。
う～ん個人的に気になった点は、
- 英語だけだとかっこいいけど日本語が入るとちょっとダサくなる。
- ピックアップ記事の表示が浮いている。
- 新着記事の見た目がイマイチ。
まあやっぱりデフォルトの設定だけでは総じて見た目がイマイチですね。日本語があると特に（笑）。
これに少し手を加えてみますね！
工夫１．フォント変更
デフォルトのフォントがイケてない気がするので、フォント変えてみよう！
と思ったら、カスタマイズから変えられない・・・。
しゃーない、自分で頑張って変えよう。
開発者ツールでのぞいてみると、なるほど、:root使って指定しているみたい。
/* Variables */
:root {
/* Font Family */
--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
↑↑ style.css（一部抜粋）
ここで指定したフォントがこのテーマのほとんどの箇所に反映されるみたいですね。
というわけで、テーマエディターのstyle.cssに以下のように記述してみました。
/* Variables */
:root {
/* Font Family */
--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
↑↑ style.css（変更前・一部抜粋）
/* Variables */
:root {
/* Font Family */
/* --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); */
/* --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); */
--global--font-primary: var(--font-headings, 'Montserrat', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif);
--global--font-secondary: var(--font-base, 'Montserrat', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif);
↑↑ style.css（変更後・一部抜粋）
欧文書体はMontserrat、和文書体は游ゴシックに決定。この組み合わせにすると、サイト全体が落ち着いた印象になるので選択。Montserrat（Google Fonts）を使用するには、header.phpのheadタグ内に以下記述が必要です。（コピペでOK！）
<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php wp_head(); ?>
</head>
↑↑ header.php・headタグ内追記後
するとこんな感じ。
少し落ち着いた感じが出てきました！
工夫２．ヘッダー変更
このヘッダー画像を、せっかくなので自分で作成したものに変えてみます。
作ったヘッダー画像。
この画像を固定ページに設定します。
・ブロック：画像
・位置：幅広
にします。
設定してみた結果がこちら。
ホームページのヘッダー部分だけでもだいぶいい感じになりました！
まとめ
デフォルトテーマの見え方が、フォントを変えたり、ヘッダー画像を変えるだけでかなり雰囲気が変わったと思います！フォントは皆さんのホームページの雰囲気に合わせていろいろな組み合わせで設定してみてください！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
Webサイト作成サービスは以下から承っております。
