【Simplicity2カスタマイズ④】トップページで表示されるタイトルと記事抜粋の文字を小さくする方法

Word Pressの超優良で且つ無料テーマであるSimplicity2のカスタマイズを備忘録的に残しています。

Simplicity2のカスタマイズの一覧は、こちらのページからご覧ください。

今回行うカスタマイズは、「トップぺージで表示されているタイトルや記事抜粋の文字を小さくする方法」です。

デフォルトで表示されているタイトルの文字が僕的には少し大きすぎる気がしていたので、これを少し小さくして、さらに本文の冒頭が抜粋されている文字も少し小さくしようというカスタマイズです。

これは超簡単でスタイルシート（style.css）にコードを記述するだけでOKです。

スタイルシート（style.css）にコードを記述

タイトルの文字を小さくする

まずはタイトルの文字の大きさを変えるコードです。

スタイルシート（style.css）に以下のコードを記述します。

【19px】と書かれているところを変更すれば、好みのサイズに変えていくことが出来ます。

デフォルトは24pxだったはずなので、かなり小さくしてますね。

【line-height】は行の高さを指定するコードですが、1.4にすることでほんの少しだけ行間を詰めています。

▼旧：タイトルの文字が大きめ

▼新：タイトルが小さく変わりました

これだけです。

本文記事抜粋の文字を小さくする

次にタイトルを小さくした分、一緒に表示されている記事本文の抜粋文字も小さくしてあげないとバランスが悪く感じます。

記事抜粋の文字を小さくするコードは以下です。同じくスタイルシート（style.css）に記述します。

80%の大きさに小さくしてみました。

▼旧：記事抜粋の大きさ

▼新：記事抜粋の大きさは80％になりました

合わせてメタ情報も小さく

タイトルも抜粋記事も小さくしたのなら、同じ箇所として表示されているメタ情報も小さくしようと思います。

▼メタ情報とはここの部分

要するに、日付とカテゴリー表示の文字の大きさのこと。

それを小さくするコードは以下で、こちらもスタイルシート（style.css）に追記します。

これで少し小さくなりました。

▼新：変更後のメタ情報の大きさ

ん～人によっては小さすぎると思われるかもしれないので、これは各自の好みに合わせてカスタマイズを行なってもらえればと思います。

スマホ表示のことも考えておこう！

先程の表示はPCをメインに考えてカスタマイズを行いましたが、スマホ表示を見てみるとまだかなりタイトルが大きく感じました。

▼こんな感じに表示されています

小さくしたと言えど、まだかなりタイトルが大きいし、スマホ表示の時は記事抜粋は必要ないかなと思いました。

ので、タイトルをさらに小さくして、記事抜粋と記事を読むを消すことにしてみます。

スマホ表示限定で記事のタイトルを小さくするコードは以下です。これもスタイルシート（style.css）へ。

【@media only screen and (max-width: 480px) {】を入れてあげることで、スマホの時だけ適用しますよというコードにしてあげています。

▼スマホ表示のタイトルの文字が小さくなりました。

タイトルは4行になっていたものが、3行で表示されるぐらいに小さくなっています。

次に、記事抜粋の文字と「記事を読む」という表示自体を消すコードが以下です。

先程と同様にスマホ表示の時だけに適用されるコードにしています。

▼これで抜粋記事の文字と「記事を読む」の表示が消えました

かなりスッキリしましたね。

正直カテゴリーの表示を日付の横に表示させたいのですが…このコードだけ分からないままなので、それだけはとりあえず放置して様子を見てます。w

タイトルと記事抜粋の文字を小さくする / まとめ

これはスタイルシート（style.css）にコードを記入するだけだったので簡単でしたね。

アクセス数が増えてくるとトップページを見る人も増えてくるので、見やすいようにカスタマイズしてあげると良いかもしれません。

次のページはこちら⇒【Simplicity2カスタマイズ⑤】トップページの「記事を読む」表示をカスタマイズする方法