THE・THOR(ザ・トール)のカード型記事一覧の文字を小さくするカスタマイズ

THE・THOR(ザ・トール)はそのままでもおしゃれなブログが作れる優秀なテーマですが、私は細かいカスタマイズをすることでさらに自分好みにしています。

そんな私がやっているカスタマイズの中から、この記事ではTHE・THOR(ザ・トール)のカード型記事一覧のタイトル文字を小さくする方法を紹介します。

THE・THORについてはコチラ

所有ブログのほとんどを「THE・THOR(ザトール)」に変えました! というのも、THE・THOR(ザトール)で記事を書く楽さと、読者さんからの見やすさを知ってしまうと、他のテーマが使いにくく感じてしまったからです。 [kjk_[…]

スポンサーリンク

THE・THOR記事一覧のタイトル文字サイズをカスタマイズする前と後

パソコン表示

カスタマイズ前

カスタマイズ後

スマホ表示

カスタマイズ前

カスタマイズ後

今回のカスタマイズをすることで、記事一覧の文字サイズはこのように変わります。

あずさ

特にスマホ表示は文字が大きいと感じたので、元と比べるとかなり小さくしています。

THE・THOR記事一覧のタイトル文字サイズをカスタマイズする方法

事前準備

  1. THE・THOR(ザ・トール)の子テーマを適用する
  2. ダッシュボード→外観→カスタマイズ→アーカイブページ設定[THE]→コントローラ設定から「レイアウト切替ボタンの設定」部分を、それぞれ「非表示」と「カードレイアウト」に設定しておく

追記するCSSコード

ダッシュボード→外観→テーマの編集→(画面右側)style-user.cssに進み、以下のコードをコピペしてください。

/*--------------------------------------
  記事一覧表示変更
--------------------------------------*/
/*タイトル文字サイズ調整*/
h2.heading.heading-secondary {
    font-size: 1.2rem;
}
@media only screen and (min-width: 992px){
h2.heading.heading-secondary {
    font-size: 1.7rem;
}}

これで記事一覧(アーカイブ)ページのタイトル文字サイズが小さくなります。

まとめ

文字サイズは小さくしすぎると読みにくくなりますが、適度に整えてあげると1ページに表示される情報量が増え、ユーザーにとって使いやすくなります。

自分のブログに訪れるユーザーの年齢層に合わせてカスタマイズしてみてください。