ちょこっとデザイン変更

このブログは公式テーマにあった「Novel」ってテーマを適用してます。

blog.hatena.ne.jp

このテーマを選んだ理由は、投稿した日付の下に小記事がぶら下がるみたいな構造になっててよいと思ったから。

で、そこはよかったんだけど、フォント変えたいのと、記事フッタにある名前とかを小さくしたい〜ってなったのでちょこっといじってみた。CSS全然覚えてないし、次やるときにまた忘れてそうなので調べたのを以下に書いとく。

複数のclassを持った要素を指定する

class名を並べるだけでよかった。

<span class="unko buriburi">うんこぶりぶり</span>

span.unko.buriburi {
  color: brown;
}

developer.mozilla.org

webfontを指定する

• Google Fontsとかで使いたいWebフォント（今回はM PLUS 1）を選んで→embed codeを開いて埋め込みコード取得して、
• 「はてなブログ管理画面→設定→詳細設定→< head>要素にメタデータを追加」に「Embed code in the < head> of your html」の中身を貼って保存

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap" rel="stylesheet">

• 「デザイン設定→デザインCSS」に「CSS class」を貼って保存

// 雑にbodyに設定
body {
  font-family: "M PLUS 1", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1.7em;
}