はてなブログ【ZENO‐TEAL】記事タイトルの文字サイズをカスタマイズするよ - マイミーボックス（myme box) 転勤族の妻が送るブログ

f:id:hotaru-mm:20200320115445p:plain

こんにちは、主婦ブロガーmyme（マイミー）@mymeblogです。

当サイト『myme Box』のデザインは、ブログサービス【はてなブログpro】のデザインテンプレート【ZENO‐TEAL】を使用しております。

トップ画面のスタイリッシュな"カード型"のデザインがおしゃれでお気に入り。

ただ一つ気になる点が…。

それは、記事タイトルの文字サイズ。

PCで編集していると気にならないのですが、スマホで記事を閲覧すると…

とにかくデカいっ！！！

幸い【ZENO‐TEAL】はたくさんのカスタイマイズ記事がヒットする現状ですが、この「記事タイトルの文字サイズ変更」に関してはなかなか見当たらず…。

本記事では筆者が導入している【ZENO‐TEAL】の記事タイトルの文字サイズ変更の方法を備忘録も兼ねて紹介していきます！

【ZENO‐TEAL】デフォルトの記事タイトル
ネットで検索した方法でカスタマイズしてみるも…
【ZENO‐TEAL】の記事タイトルを「検証」してみた
【ZENO‐TEAL】の記事タイトルの文字サイズ変更

【ZENO‐TEAL】デフォルトの記事タイトル

まず、記事タイトルに対し何もカスタマイズをする前の状態がこちら。

f:id:hotaru-mm:20200319182237p:plain

筆者のiPhone10で記事を開くと、タイトルで画面の半分が埋まってしまっています…笑

ネットで検索した方法でカスタマイズしてみるも…

「はてなブログ」「記事タイトル」「文字サイズ変更」等で検索をかけるとだいたいヒットするのが以下のようなコード。

.entry-title{
font-size:○○;
padding:○○;
}

.entry-titleが記事のタイトルを表すコード。

しかし当サイトではこのコードでカスタマイズをかけても変化なし…。

その他、「.entry-title」ではなく「h1」指定で変更するという情報も見かけたので試してみると…

f:id:hotaru-mm:20200319184116p:plain

ひぇーーーーっ！！

トップ画面の記事タイトルがめっちゃデカくなってるwww

これはダメだ…。

【ZENO‐TEAL】の記事タイトルを「検証」してみた

そもそも、【ZENO‐TEAL】の記事タイトルってどんな状況なんだろう…？

そんな時に便利なのが「検証」機能だ。

調べたい文字をドラッグして、右クリックをします。

f:id:hotaru-mm:20200319185505p:plain

すると…

f:id:hotaru-mm:20200319190154p:plain

画面右側にワーッとコードが出てきます。

上の画像でドラックしている部分がどうやら記事タイトルを表すコード（？）っぽい…。

.page-entry .entry-title, .page-preview .entry-title {
font-size: 2rem;
line-height: 1.4;
margin: 0 0 0.5em 0;

もしかして、これをカスタマイズしてデザインCSSに貼れば記事タイトルをカスタマイズできるのでは…⁉

【ZENO‐TEAL】の記事タイトルの文字サイズ変更

さて、ようやくここからが本題です。

それでは上記コードを編集してみましょう…！

font-size

font-sizeはそのままフォントの大きさを指定するコードです。

が、「2rem」って何でしょう？

remとは

rem（root em）は相対的なサイズを表す単位です。remはルート要素のフォントサイズを基準に相対的なサイズを定めます。
remの単位は、ルート要素（html要素）に指定されたフォントサイズに対する倍率として指定します。ルート要素のフォントサイズが10pxの状態で2remが指定された場合には、2倍の20pxが定まる事になります。

※下記サイトを参考にさせていただいております。

【CSS】rem 単位とは｜仕組みや計算方法【rem（root em）】 | MaryCore

つまり、remはもともと指定しているフォントサイズに対する倍率を指定する単位ということ。

で、現状「2rem」なので、記事タイトルはもとのフォントサイズの2倍になっているようだ。