うっかりさんと暮らす

ADHD傾向強めの発達障害グレーゾーン夫との暮らし。お互いが暮らしやすくなる方法日々模索中。時々こどもの話も。最近は雑記ブログになってきました

記事フォント変更しました


同じ記事に追記しようと思いましたが、CSSコードを貼り付けようとすると、コードを貼り付けるには、「はてな記法」か「Markdown記法」の方がやりやすいようなので別記事にしました。
はてな記法が初めてなので、上手く書けるかわかりませんが、私のようにブログ初心者だけどフォント変えたい!という方の参考になれば幸いです。

▼変更前の記事フォントのCSSコード
/* 記事タイトル */
.page-index .entry-title{
  padding : 5px 0px 0px 3px;  /* タイトル上下に間隔 */
}

f:id:hattatsu_life:20211201191040p:plain
このような感じで、先に変更したタイトルやサイドバーは変更されていますが、記事タイトルは公式テーマのデフォルトのままです。

記事タイトルもGooglefontsを使用するため、(たぶん)フォントを読み込めるように、「ヘッダ」の「タイトル下」に読み込む情報を記載する。

場所は「ダッシュボード」→「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」です。「タイトル下」に使いたいフォントの情報を読み込みます。

<!--記事タイトル用フォントー-->
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">

今回私は「さわらびゴシック」を使用したかったのでこれを記載しました。Googlefontsの他ののフォントを使用する方は他のフォントのものをタイトル下にコピーしてください。ちなみにhtml内ではで囲んだ部分はソースには影響せずメモがわりに使うことができます。記載内容が増えてくるとメモがあると結構便利です。また、Googlefontsを使用しない場合は、この手順は不要と思われます。

▶︎Google Fonts + Japanese • Google Fonts + 日本語
上記を貼り終えたら、いよいよCSSです。

▼変更後の記事フォントのCSSコード

こんな感じで記載しました。

/* 記事タイトル */
.page-index .entry-title{
font-family:"Sawarabi Gothic"; /* この一行を追記*/
  padding : 5px 0px 0px 3px;  /* タイトル上下に間隔 */
}

PCのみカード型で見れるようにしているCSSコードを入れているため、どこにフォント変更のことを書けばいいかかなり迷いましたが、カード型にするときに参考にさせていただいたブログの方が、/* 記事タイトル */とメモを入れてくださっていたので、たぶんここかな?という感じで記載しました。変化しなかったりエラー出たら追記したところだけ消せばいいですしね。CSSをもっと勉強していればすぐにわかったのかもしれません笑 予想は当たったようで、無事変更できました。
f:id:hattatsu_life:20211201224854p:plain
個人的には変更できてめちゃくちゃ嬉しいです。諦めなくてよかった。
CSS内で/*〜 */で囲う部分は、ソースには影響せずメモとして使えます。ブログのデザインをCSSに記載することが増えると「このコードなんだっけ?」がたくさん出てくるので、何に関連したコードか忘れないために結構使っています。メモがいらなければ、コードに影響しないので、なくても平気なものです。

html内で使うやCSS内で使う/*〜 */は、ブログ始めたばかりの頃はさっぱりわかりませんでしたが、progateというアプリで少し勉強したり、カスタマイズしたいと思って調べていると必ず出てくるので、コードは全然書けませんが、この2つはメモとして便利なことは覚えられました。

今回の記事は、初めてはてな記法で書いてみました。リンクがうまく貼れなかったり、CSSコード内の文字色を変えるところまではわからなかったので、少しみづらいと思いますが、よろしかったら参考にしてください。