フォント変更がうまくいかない事をきっかけに、色々と調べてきましたが、今回で終わりにしようと思います。
フォント変更がうまくいかない場合の確認
- フォントが日本語対応しているか？
- <head></head>内にリンクが貼れているか？（必要な場合）
- CSSの優先順位は正確か？
- 「テーマ」で指定されてるフォントが下の階層にないか？
このブログのフォントは
「M PLUS Rounded 1c」です
Googleフォントで<head></head>の間に（ダッシュボード→設定→詳細設定→headに要素を追加）に以下のリンクを貼る必要があります。
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap" rel="stylesheet">
上記を前提としていきます。
目次です。
body内のフォント変更
オリジナル
body {
fonto-famiry :helvetica,Segoe UI,游ゴシック体,YuGothic,游ゴシック Medium,Yu Gothic Medium,游ゴシック,Yu Gothic,メイリオ,Meiryo,sans-serif;
color : #293030;
}
CSSにフォント指定追加
CSSに入力
body {
font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif;
}
色々なところのフォントが変更されました。
見出しについても指定してませんが、フォント変更されました。
このテーマでは見出しについては特にフォント変更されておらず、もともとの「body」で指定されたフォントが使用されるようになっていました。
では、変更されなかった場所を変更していきます。
記事タイトルのフォント変更
オリジナル
.entry-title {
font-family:Times New Roman,游明朝体,YuMincho,游明朝,Yu Mincho,serif;
}
上記のフォントが「entry-title」とのclass名で指定されてました。
このclass名をh1に付けられてます。
<h1 class="entry-title">テスト日記です</h1>
なので、h1を指定してフォント変更指示を出しても変化なしです。
CSS上
h1 {
font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif;
}
これではダメです。
bodyの下の階層？であってるのかな？で指定されてるので、優先順位の為にbodyで指定したフォントが負けてます。同じ考えで、h1の下にclassがあり、そこでentry-titleと言う名前でフォント指定されてるのでh1を指定して指示をだすだけではフォントは変わりません。
CSSにフォント指定追加
CSSに入力
/*記事タイトルフォント変更*/
.entry-title {
font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif
}
です。ドットを忘れずに。今後、記事タイトルのフォントを変更する予定がない場合は、
body,.entry-title {
font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif;
}
と、bodyのあとにコンマを付けて続けて記載してもＯＫです。
ブログタイトルのフォント変更
オリジナル
CSSにて
#title {
font-family:Times New Roman,游明朝体,YuMincho,游明朝,Yu Mincho,serif;
}
ここではclassではなくid名です。
HTML上では
<h1 id="title">nofanのテスト日記</h1>
なので、id名を指定してフォント変更
CSSにフォント指定追加
CSSに入力
/*ブログタイトルフォント変更*/
#title {
font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif
}
id名なのでドットではなくシャープです。
これも今後、ブログタイトル単独でフォント変更しないのであれば
body,.entry-title,#title {
font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif;
}
で、上で説明した追加方法のコンマで区切って追加してもＯＫです。
ちなみにブログタイトル下のサブタイトル？は、このテーマではフォント指定されてませんでした。なのでbodyで変更したフォントが採用されてます。
もし、サブタイトルのフォントを変更する場合は
#blog-description
がid名となるので、タイトル名を変更するのと同様に
#blog-description {
font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif;
}
と、入力してあげればＯＫかと思います。
サイドバーのフォント変更
サイドバーは数個の枠組みがあり、フォントもそれぞれで指定されてたりします。
まずはサイドバータイトル名の変更です
オリジナル
.hatena-module-title {
font-family:Times New Roman,游明朝体,YuMincho,游明朝,Yu Mincho,serif;
}
class名でフォント指定されてます。
CSSにサイドバータイトルのフォント指定追加
/*サイドバーのタイトルフォント変更*/
.hatena-module-title {
font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif;
}
サイドバータイトルのフォントが変更されました。
このテーマではサイドバータイトルのフォント指定はされてましたが、リンク先などの説明文？のフォント指定はされてませんので、これもbodyで変更されたフォントが採用されてます。
これでこのテーマのフォントは「ほぼ」統一されました。
「ほぼ」と言うのは、いろいろ見てみると、まだ違うところで違うフォントが指定されてるのがちらほら見えるからです。
そのあたりは、どこかをクリックしたときに出る確認メッセージ？みたいなところっぽい（現状は確認してません）ので、通常のブログではあまり問題ないかなーと。
最後に「そんなの面倒だよ。一気にできないの？」って方は・・・
全称セレクタ「アスタリスク」で試してみよう！！
で解決です。多分。
全要素に適用される。との事だったので、やってみました。
* {
font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif;
}
です。
でも、記事タイトルが変更されませんでした。
なぜに？よくわかりません。そして、これを使うと、後々のカスタマイズで支障が起きそうな感じだったので、使用しませんでした。
どうしてもうまくいかない。
という場合は一度トライしてみてもいいかもしれません。
そして、変更されなかった場所のid名やclass名などを調べると、そこに解決の糸口が見つかるかもです。
とりあえずフォント変更については、これで最後の予定です。
ブログを続けていく上で、あれ？違う？なんだこれ？と、なったときは、またトライします。
ではでは
