初心者向けWordPress

【サルでもわかる】JINでトップのスマホの文字が小さい!コピペで簡単カスタマイズ

こんにちは。HTML,CSSマスターのさやさん(@saya__san_)です。

この記事は、WordPressのテーマ「JIN」を使っている方向けの内容になります!

こんなお悩みありませんか?

 

悩む人
悩む人

スマホで見たJINのトップのタイトル、字が小さい気がするんだよね~。

読みづらいんだよなぁ。

でもどうやって変えるんだろう?

 

さやさん
さやさん

それ、私が教えちゃう!

実はコピペですぐ解決できるよ!

 

この記事に向いてる人
  • スマホで見た時に字が小さいのでなんとかしたい!
  • でもやり方がわからない!
  • ぱぱっと変えちゃいたい!

 

それ「CSS」という言語で変えてあげないといけないんです。

大丈夫、全然難しくないですよ!やってみましょう!

 

ずばり、解決できるコードはこれだ!

 

/* トップの文字の調整 */

@media screen and (max-width:767px) {

  .post-list.basicstyle .post-list-item .post-list-inner .post-list-meta .post-list-title {

    font-size: 14px;

    line-height: 1.3;

  }

}

 

さやさん
さやさん

/* トップの文字の修正 */ これもコピーしてね!

後で解説するけど、CSSの目印みたいなもんだよ!

 

とりあえず、このコードを貼り付けちゃえば適度に見やすい大きさになります。

こんな感じ!

どこに貼り付けるの?

 

まず、外観カスタマイズから

 

 

追加CSSを選びます!

 

 

すると、こんな感じのコード編集っぽい画面が出てきます。

 

 

ここに、コードをぺたっとコピペしましょう!

 

 

コピペしたら、更新を押して反映させましょう!

 

 

これで反映完了!

文字が大きく見えてたら成功です!

 

もっと文字を大きくしたりしたいんだけど?

全然出来ますよ!

まずは、コードの意味を解説しますね。

メディアクエリ(ブレークポイント)

 

@media screen and (max-width:767px) {

 

これは「メディアクエリ(ブレークポイント)」といって、

画面のサイズによってCSSを適用させるポイントを変えてくれる、超便利なコードです。

意味は、「横幅767pxまで{  }内のコードを適用してね」。

レスポンシブなサイトでは必ず使われているんですよ。

今回は文字の大きさを変えるだけなので、ここはいじらなくて大丈夫です。

 

フォントサイズを変えよう

 

font-size: 14px;

 

で指定しています。

この「font-size」はプロパティといって、CSSのブラウザに対する命令の宣言みたいなものです。

意味は、「フォントサイズを~~の大きさにしてね」です。

14px」は、「font-size」に対する、具体的な値です。

文字を大きくしたい場合は、14px」のところを15pxにしたりしてみましょう!

 

行のスキマを狭くしたいんだけど?

 

line-height: 1.3;

 

で指定しています。

line-height」の意味は、「行間の高さを~~してね」。

1.3」は、「font-sizeに対して、上と下に0.3ずつ行間をとってね」です。

このあたりの概念はちょっと勉強しないと難しいかもしれません。

とりあえず、「1.3」の部分を1.2とか、1.5とか変えてみて感覚をつかんでみてください。

 

カッコって絶対いるの?

 

絶対いります!!

無いとバグります。

 

/* トップの文字の調整 */

@media screen and (max-width:767px) {

  .post-list.basicstyle .post-list-item .post-list-inner .post-list-meta .post-list-title {

    font-size: 14px;

    line-height: 1.3;

  }  これ

}  これ

 

このカッコ閉じは、終わりの宣言みたいなものです。

忘れずに入れるようにしましょう!

 

まとめ

今やスマホからのアクセスは80%以上と言われています!

スマホからのアクセスが多いということは、必然的にスマホの見た目が重要になってきますよね!

あわせて読みたい
ブログのデザインダメ出ししてみてわかった!離脱率が高いブログの5つの特徴こんにちは。ブロギルでデザインダメ出し部でダメ出しさせてもらっている、さやさん(@saya__san_)です。 ダメ出ししている中で色...

フォントサイズをマスターして、文字サイズ調節の達人になろう!

ABOUT ME
さやさん
さやさん
一度デザイナーになったけどうつ病で挫折!→ 復活し会社員になるも組織に馴染めず挫折しまたうつ病!→ 貯金も尽きどん底😚