【JIN】記事一覧画面で記事内容を説明する文字サイズを変更する方法

jin postlist 文字サイズ
おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

今回も「JIN」のテーマを使っている「松浦さん」からご質問をいただきました。

ブログの記事一覧が出てくる画面で、記事の内容を説明している文字のサイズを大きくしたいというご相談です。

 

目次

今回のご相談内容

松村さん松浦さん
こんにちわ
いつもお世話になっております。今回お聞きしたいと思ったのは、トップページの記事一覧で出てくる記事タイトル下の「記事内容の文字」についてです。

この文字がちょっと小さいので、少し大きくしたいと思っているのですが、どこを探しても文字の大きさの変更が出来そうなところを見つけることができません。

文字の大きさの変更はできないのでしょうか?

 

こちらが相談時にいただいたキャプチャ画像↓

JIN 文字サイズ変更

 

おかぴーおかぴー
松浦さん、こんにちは。キャプチャ画像も、該当箇所に枠まで付けていただきありがとうございます^^!

今回の内容は、追加CSSにコードを追加することで文字サイズが変更できると思いますので、さっそくイメージするサイズに近づけていきましょう!

 

カスタマイズの流れ

『今回のポイント』

  • テーマ「JIN」
  • 着せ替え設定(デモ8)を利用
  • 追加CSSで編集
  • font-sizeで大きさを変更
『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。カスタマイズについては必ず自己責任でお願いいたします。

 

今回は、JINのデフォルトで設定されている以下のCSSのコードを変えていきます。

.post-list.basicstyle .post-list-item .post-list-inner .post-list-desc{
font-size:.7rem;
}

JINのテーマではこのコードにより、文字の大きさを「記事全体の文字サイズを1とした場合に、0.7の割合のサイズ」になるようデフォルトで設定されています。

 

<補足>

font-size

文字の大きさを指定できるコード。
指定する単位は「px」「rem」「em」などがあります。

.7rem

「0.7」を「.7」と省略して記載することが多いです。基本的にどちらも同じ意味です。

レスポンシブデザインを搭載した最近のテーマは、ブラウザのサイズに合わせて自動的に文字サイズが変わるように「rem」、「em」で指定することが多いです。

「px」でもいいのですが、これだと「必ず12pxのサイズ!」のように数値が指定されてしまうので、様々なデバイスでブログを見る最近の傾向には少し向かないのかなと個人的には思っています。

 

それでは、以下のコードでカスタマイズしましょう!

.post-list.basicstyle .post-list-item .post-list-inner .post-list-desc{
font-size:0.9em;
}

おかぴーおかぴー

この「font-size:」の後に「0.9em;」って数字があるのですが、これが今回変えたい箇所の文字サイズを指定するものです。

僕がお伝えした設定だと、「0.9em」というサイズなので、もっと大きくしたい場合はこれを「1em」とか、「1.2em」とかに変えてみてください^^

また、コピペする際の注意点としては、数字の前の「 : 」や、後の「 ; 」も忘れずにコピペしてください。

どれかが抜けると、うまく適用されませんので。

松村さん松浦さん
分かりました。
ちなみにこのコードは、ワードプレスの「外観>カスタマイズ」にある「追加CSS」にコピペすればいいのでしょうか?
おかぴーおかぴー

はい!おっしゃっる通りです!

 

こちらが変更後の文字サイズ↓

JIN 文字サイズ変更

変更前はこちら↓

JIN 文字サイズ変更

 

なるべく文字以外が同じ大きさになるようにキャプチャを並べてみました。

いかがでしょうか?
少し文字が大きくなったのが分かりますでしょうか?

今回は大きな変更ではありませんでしたが、読者の方が読みやすくなるように配慮したカスタマイズだったと思います^^

松浦さん松浦さん
0.9に変更してみたら、うまくいい感じに大きくできました。
ありがとうございました!
おかぴーおかぴー

おぉ、希望のサイズになってよかったですね!
個人的にはこっちの方が見やすいかもです(笑)

また何か困ったことがあればご相談ください^^

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次