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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

▼旧:タイトルの文字が大きめs-taitle

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

これだけです。

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

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

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

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

▼旧:記事抜粋の大きさs-text1

▼新:記事抜粋の大きさは80%になりましたs-text2

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

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

▼メタ情報とはここの部分ss-meta

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

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

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

▼新:変更後のメタ情報の大きさs-meta3

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

4 件のコメント

  • 教えてください。
    TwentySixteenで、スマホのページタイトルが大きいので小さくしたいのです。
    いろいろなアドバイス記事を見ているのですが、わからないのです。
    今は無理やりで何とかスマホの記事タイトルを小さくしていますが、パソコンのページインデックスにしっかり残ってしまっています。
    よろしくお願いします。

    • 軽くしかソースを見ていないのですが、TwentySixteenのページタイトルは、【.entry-title】になっています。
      wordpressのテーマの編集からstyle.cssを選択し、ctrl+fで【.entry-title】がどこにあるかを確認します。
      すると、
      .entry-title {
      font-family: Montserrat, “Helvetica Neue”, sans-serif;
      font-size: 28px;
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: 1em;

      というのがでてくるはずです。
      そこのfont-sizeの数値をいじれば、色々と変わるはずですよ!
      サクッとしか見ていないので、簡単な説明ですみません。

      • さっそくありがとうございます。
        多分、その部分は変更してみまたのですが、パソコン上はページタイトルが小さくなったのですが、スマホが大きいままなのです。
        リンクメニューの「ロータス~オパール~」のフォントを解除してみますので、スマホで確認していただけますか。
        パソコン上のページタイトルは小さいのですが、スマホがとても大きいのです。

        • お返事遅くてすみません。
          今サイトを拝見しましたが、ページタイトルは削除した感じでしょうか?
          コードを変えたのにフォントが変わらないのは、キャッシュが残っているからかもしれませんね。
          遅くなりましたが、ご参考までに。

  • コメントを残す

    メールアドレスが公開されることはありません。

    日本語が含まれない投稿はスルーされますのでご注意ください。(スパム対策)