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

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に変更してみたら、うまくいい感じに大きくできました。
ありがとうございました!
おかぴーおかぴー

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

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

デザイン効果と組み合わせて、最適な収益化方法を見つけよう

おまけ

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

興味がある方は、ぜひ以下からご覧ください〜

 

↓↓↓

 

 

ストレスフリーなブロガーライフを送ろう ブログデザインお悩み解決室WPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG