こんにちは

THE SONICの文字サイズや色を変えたお話【とっても簡単】

「THE SONIC導入してみたけど、文字サイズや色を変えたいな… 」

そんな悩みにお答えしましょう!

https://maholog.com/wp-content/uploads/2020/02/icon_joy.jpg

maho

おばちゃんですが、ある程度のことは自分で出来ちゃいます

この記事でわかるのは、

  • 記事部分の文字と文字サイズの変更
  • ヘッダー部分の文字の色を変更
  • ヘッダーメニューの文字の色を変更
  • フッターメニューの文字の色を変更
  • コピーライトの文字の色を変更
  • 関連記事の文字の色を変更

です。とても簡単に出来ちゃいますよ。

THE SONICは本当に速くて使いやすいWordPressのテーマです。
わたしも導入してよかったと思っています。
記事数が少ないので導入するチャンスでもあったんですよね。

外観のカスタマイズからサイト全体のデザインや色を簡単に変えられるのが素晴らしいところ!

https://maholog.com/wp-content/uploads/2020/02/icon_joy.jpg

maho

形から入る私は、細かいところの文字サイズや色が気になります

THE SONICの文字サイズや色を変更

全てはこの画像の通り、

外観→→テーマエディターのスタイルシートに追加していく感じです!

  1. 記事部分の文字と文字サイズの変更
  2. ヘッダー部分の文字の色を変更
  3. ヘッダーメニューの文字の色を変更
  4. フッターメニューの文字の色を変更
  5. コピーライトの文字の色を変更
  6. 関連記事の文字の色を変更

CSSをつけ足していきますよ~

https://maholog.com/wp-content/uploads/2020/02/icon_joy.jpg

maho

始める前にバックアップを取っておきましょう!変更は慎重に、自己責任でお願いします。

①記事部分の文字と文字サイズの変更

body {
font-family: ‘ヒラギノ角ゴ ProN W3′,’メイリオ’,’Arial’,YuGothic,’Yu Gothic’,’Hiragino Kaku Gothic ProN’, Meiryo,’MS ゴシック’,sans-serif;
font-size:16px;
}

https://maholog.com/wp-content/uploads/2020/02/icon_joy.jpg

maho

font-family:文字の種類
font-size:文字サイズ

下線部分を適宜変更してください。文字の種類は読み手の目に馴染みやすいものがいいと思います。私は文字サイズを16pxにしました。

②ヘッダー部分の文字の色を変更

h1.header-title a, .header-title-left,
.footer-in-under .footer-title,
.footer-in-under .footer-title a {
color:#545454;
}

https://maholog.com/wp-content/uploads/2020/02/icon_joy.jpg

maho

ヘッダー部分にロゴ画像を使わない場合のものです
color:好きな色を16進数で入れましょう
THE SONICのCSSをみると、フッター部分も一緒にされていたのでそのまま使いました

文字の色が真っ黒だとコントラストがきつすぎるので、#333を使うところが多かったりします。代表的なところだとYahoo!なんてそうですね。

でも、自分のすきな色をパッと16進数で言える人ってあまりいないとおもいます。
分かりやすい色見本のサイトがあるので活用してください。

③ヘッダーメニューの文字の色を変更

ul.nav-style-def a {
color: #545454;
}

https://maholog.com/wp-content/uploads/2020/02/icon_joy.jpg

maho

color:ここに好きな色の16進数をいれてね

ヘッダー部分のグローバルメニューのところです。

④フッターメニューの文字の色を変更

.footer-container .menu-item a {
color: #545454;
}

フッターのメニュー部分、「サイトマップ」などの部分です。colorの部分に好きな色をいれましょう。

⑤コピーライトの文字の色を変更

.copyright {
color: #545454;
}

サイトの一番下に書かれているコピーライトの部分です。colorの部分に好きな色をいれましょう。

⑥関連記事の文字の色を変更

.kanren-kiji-title.main-c {
color: #545454;
}

関連記事の文字色が周りのオレンジ色に溶け込んでしまってたので、ここも変えました。

文字サイズと色は重要

ブログを読みやすくするのに文字サイズと色はとても重要です。
いずれも視認性に大きくかかわりますので、適宜変更するのがいいと思います。

色々なサイトやブログをみていると、コントラストがきつかったり文字が小さかったりするとそっと閉じてしまいますよね。

そうならないためにも、ここは視認性良くしておくべきです。

まとめ:THE SONICの文字サイズや色を変更しよう

  1. どんな文字色が見やすいのか
  2. 文字の最適サイズはいくつなのか
  3. 読み手のことを考えよう

大手ニュースサイトや検索サイトなどを見ると文字サイズや色を見やすいようにされています。
ニュースサイトは文字サイズをやや大きめに16px以上にしているところが多いです。

当ブログもそれにならって文字サイズを16pxに、色はダークグレー#545454にしてみました。

最初からカラー設定のメインカラーを「白が映える濃い目の色」にしておくと、CSSをいじらなくてもきれいに見栄え良く出来ますよ。私のようにちょっと薄めの色にする方は、変更しておいた方がいいでしょう。

今日は「THE SONICの文字サイズや色を変えたお話【とっても簡単】」というお話でした。
参考になれば幸いです。

Sponsored Link
maho

maho

縫い物や編み物などの手芸が好きです。そして車もネイルもゲームも好き。だけどどこにでもいる主婦です。
当ブログではわたしが好きなことを書いていますが、基本的に手芸関係や家事のことを中心に書いていけたらいいなぁって思ってます。

詳しくは⇒⇒はじめまして

FOLLOW

カテゴリー:
Sponsored Link
関連記事