賢威7の記事タイトルや見出しの文字サイズを変更する方法【スマホ(レスポンシブ)表示】

どうも。葉です。

この記事では、賢威7でスマホ(レスポンシブ)表示した際の記事タイトルや見出しの文字サイズを変更する方法を解説していきます。

1.記事タイトルや見出しの文字サイズを変更しようと思った経緯

では、まず、今回、僕が賢威7のスマホ(レスポンシブ)表示の記事タイトルや見出しの文字サイズを変更しようと思った経緯をお話しますね。

まずは、賢威7のスマホ表示がどのようになっているのかを確認しましょう。下図がそうなのですが、記事タイトルや見出しがとても大きいですよね。

賢威7のスマホ(レスポンシブ)表示で記事タイトルや見出しのフォントサイズが大きい

タイトルが目立って良いのですが、流石にこれは少し大きぎると感じたんです。なので、スマホ(レスポンシブ)表示した際の記事タイトルや見出しのフォントサイズを変更することにしました。

具体的には、次の2つのことを行っていきます。

記事タイトルのフォントサイズを小さくする

賢威7のスマホ(レスポンシブ)表示で記事タイトルのフォントサイズを小さくする

見出しのフォントサイズを小さくする

賢威7のスマホ(レスポンシブ)表示で見出しのフォントサイズを小さくする

2.賢威7のスマホ(レスポンシブ)表示時のフォントサイズを変更する

では、ここからは、CSSコードを編集して、スマホ(レスポンシブ)表示した際のフォントサイズを変更する具体的な手順を解説していきます。

まず、WordPress管理画面の左メニューより「外観→テーマ編集」をクリックしてください。

賢威7のスマホ(レスポンシブ)表示時のフォントサイズを変更する手順

次に「rwd.css」をクリックします。「rwd.css」には、スマホ表示した際のデザインを決めるコードが記述されています。

賢威7のスマホ(レスポンシブ)表示時のフォントサイズを変更する手順2

ここからは、記事タイトル及び見出しのフォントサイズを小さくするためのコードの編集方法を解説していきます。

記事タイトルのフォントサイズを変更する手順

まずは、記事タイトルのフォントサイズを変更する手順を解説していきます。

「rwd.css」内で次のコードが記述されている場所を探してください。

.section-wrap .section-in .section-title,
.section-wrap .article-header .section-title{
     margin: -15px -15px 0;
     padding: 15px;
     font-size: 1.75em;
}

見つけたら、フォントサイズを「font-size: 1.75em;」から「font-size: 1.4em;」に変更してください。変更したら、そのまま「ファイルを更新」をクリックしてください。

賢威7のスマホ(レスポンシブ)表示で記事タイトルのフォントサイズがを変更

この状態で、ブログのトップページや投稿の記事タイトルを確認してみましょう。もちろん、スマホ表示でですよ。すると次のように、記事タイトルのフォントサイズが小さくなっているはずです。

賢威7のスマホ(レスポンシブ)表示で記事タイトルのフォントサイズを変更した時の比較画像

これで、スマホでも文字サイズがちょうどよいサイズになりましたね。

見出しのフォントサイズを小さくする手順

次に、見出しのフォントサイズを変更する手順を解説していきます。

先程と同様に、「rwd.css」内で次のコードが記述されている場所を探してください。

.main-body h1,
.main-body h2{
     font-size: 1.5em;
}

コードを見つけたら、その箇所を次のコードに書き換えてください。

.main-body h1,
.main-body h2,
.main-body h3{
     font-size: 1.2em;
}
.main-body h4,
.main-body h5,
.main-body h6{
     font-size: 1.1em;
}

そしたら、「ファイルを更新」をクリックしてください。

賢威7のスマホ(レスポンシブ)表示で見出しのフォントサイズを変更

これで、見出し1~見出し6までのすべての見出しのフォントサイズの変更ができました。実際に記事をスマホ表示で確認してみると次のようにフォントサイズが小さくなっているはずです。

賢威7のスマホ(レスポンシブ)表示で見出しのフォントサイズを変更した時の比較画像

3.まとめ

この記事では、

  • 賢威7の記事タイトルのフォントサイズを変更する方法(スマホ表示)
  • 賢威7の見出しのフォントサイズを変更する方法(スマホ表示)

について解説しました。

今現在、ブログやWebサイトへのアクセスのメインは、スマホです。スマホの表示を整えることで、ユーザーに取って見やすいブログを作っていきましょう!

この他にも、記事タイトル表示デザインを変更したい場合は、次の記事を参考にしてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします