こんにちは、主婦ブロガーmyme（マイミー）@mymeblogです。
当サイト『myme Box』のデザインは、ブログサービス【はてなブログpro】のデザインテンプレート【ZENO‐TEAL】を使用しております。
トップ画面のスタイリッシュな"カード型"のデザインがおしゃれでお気に入り。
ただ一つ気になる点が…。
それは、記事タイトルの文字サイズ。
PCで編集していると気にならないのですが、スマホで記事を閲覧すると…
とにかくデカいっ！！！
幸い【ZENO‐TEAL】はたくさんのカスタイマイズ記事がヒットする現状ですが、この「記事タイトルの文字サイズ変更」に関してはなかなか見当たらず…。
本記事では筆者が導入している【ZENO‐TEAL】の記事タイトルの文字サイズ変更の方法を備忘録も兼ねて紹介していきます！
- 【ZENO‐TEAL】デフォルトの記事タイトル
- ネットで検索した方法でカスタマイズしてみるも…
- 【ZENO‐TEAL】の記事タイトルを「検証」してみた
- 【ZENO‐TEAL】の記事タイトルの文字サイズ変更
【ZENO‐TEAL】デフォルトの記事タイトル
まず、記事タイトルに対し何もカスタマイズをする前の状態がこちら。
筆者のiPhone10で記事を開くと、タイトルで画面の半分が埋まってしまっています…笑
ネットで検索した方法でカスタマイズしてみるも…
「はてなブログ」「記事タイトル」「文字サイズ変更」等で検索をかけるとだいたいヒットするのが以下のようなコード。
.entry-title{
font-size:○○;
padding:○○;
}
.entry-titleが記事のタイトルを表すコード。
しかし当サイトではこのコードでカスタマイズをかけても変化なし…。
その他、「.entry-title」ではなく「h1」指定で変更するという情報も見かけたので試してみると…
ひぇーーーーっ！！
トップ画面の記事タイトルがめっちゃデカくなってるwww
これはダメだ…。
【ZENO‐TEAL】の記事タイトルを「検証」してみた
そもそも、【ZENO‐TEAL】の記事タイトルってどんな状況なんだろう…？
そんな時に便利なのが「検証」機能だ。
調べたい文字をドラッグして、右クリックをします。
すると…
画面右側にワーッとコードが出てきます。
上の画像でドラックしている部分がどうやら記事タイトルを表すコード（？）っぽい…。
.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（root em）は相対的なサイズを表す単位です。remはルート要素のフォントサイズを基準に相対的なサイズを定めます。
remの単位は、ルート要素（html要素）に指定されたフォントサイズに対する倍率として指定します。ルート要素のフォントサイズが10pxの状態で2remが指定された場合には、2倍の20pxが定まる事になります。
※下記サイトを参考にさせていただいております。
【CSS】rem 単位とは｜仕組みや計算方法【rem（root em）】 | MaryCore
つまり、remはもともと指定しているフォントサイズに対する倍率を指定する単位ということ。
で、現状「2rem」なので、記事タイトルはもとのフォントサイズの2倍になっているようだ。
【ZENO‐TEAL】の文字サイズ
【ZENO‐TEAL】の文字サイズはデフォルトで14.5px。
一方Googleが推奨している文字サイズは16.0px以上のため、当サイトではサイト全体の文字サイズを16.0pxにカスタマイズしています。
つまり記事タイトルは2倍の32px…！！
通りでデッかいわけだ。
remの変更
試しに「2rem」を「1.5rem」に変更してみました。
おおお～っ♡
これはかなりいい感じのサイズなのでは？
心配していたブログトップ画面のタイトルはそのままで、記事内のタイトルのみ変更されています！！
以下、実際に編集したコードです。（コピペ可。自己流です。あくまで自己責任でお願いします。）
.page-entry .entry-title, .page-preview.entry-title {
font-size: 1.5rem;
line-height: 1.4;
margin: 0 0 0.5em 0;
「検証」を使って現状と原因さえ把握できれば、他にもいろいろカスタマイズできそうですね。
以上、はてなブログ【ZENO‐TEAL】記事タイトルの文字サイズのカスタマイズを紹介しました。
【ZENO‐TEAL】記事タイトルの文字サイズが大きすぎて困っている方の参考になれば幸いです。