CSSをスマホにだけ適応させて文字サイズ・行間を修正する方法

THE THOR（ザ・トール）で書いた記事がテーマのカスタマイズだけだと、スマホで読みにくいと感じたので直す方法を解説します。

他のブログと比較すると、THE THORの記事がスマホで読みにくい原因は、

1. 文字が大きい
2. 行間が狭い

たぶんこの二つです。

なので自分でCSSをカスタマイズしてスマホでも読みやすくします。

THE THOR（ザ・トール）を使っている人は一度このカスタマイズをして文字を小さくすることでどれくらい読みやすさが変わるのかを確認することをおすすめします
この方法はCSSを使うだけなので、他のテーマを使っていても同じ方法が使えますよ。

CSSをスマホにだけ適応させて文字サイズ・行間を修正する方法【THE THOR（ザ・トール）使い方】

THE THOR（ザ・トール）がスマホだと文字が大きくて行間が狭い

THE THORにもカスタマイズでスマホ表示時の文字サイズを変更できますが、これを一番小さい小に設定してもこれぐらいに文字が大きいです（むしろ大といってもいいぐらいに文字がでかくてぎゅうぎゅうだと感じました！）

読みにくいと離脱率が上がる（当然）

当然ですが読みにくい記事を読もうとする人は少ないのですぐに離脱されてしまいます。

そもそも読んですらもらえないとなると記事の内容は全く関係がなくなってしまうので、サイトのデザインを読みやすくすることは離脱率を下げてPV数を上げるためには一番重要だと言えますよね。

THE THOR（ザ・トール）でスマホ表示時の文字サイズと行間を変更【CSS】

実際にCSSを使ってスマホ表示したときに文字サイズと行間を変更する方法に入りましょう

スマホ表示時のみCSSを適用させる

CSSは@mediaでCSSを適用する条件を指定できるので、画面の横幅がある値より小さいことを指定すればスマホ表示時のみにCSSを適用できます。

CSSを実装

THE THORなら、カスタマイズから追加CSSを選択すればプレビューを確認しながらCSSを編集できるので、数値をいじってプレビューの変化を確認できます。

CSSのソースコード

このブログで現在実装されているCSSコードがこちらです。

/*****スマホ表示時のフォント調整*****/
@media screen and (max-width:750px) {
	.content h2{
		font-size:15px;
	}
	
	.content h3{
		font-size:14px;
	}
	
	.content h4{
		font-size: 13px;
	}
	
	p, li{
		font-size: 13px;
		line-height: 26px;
	}	
}

解説

• @media screen and (max-width:750px){}　はスクリーン表示（スマホやPCで表示されるとき）かつ横幅が750px以下のときだけ{}内が適用されることを意味しています。
• font-size、line-height　はそれぞれ文字サイズと行間を指定しています。
• p、li、.content h2、.content h3、.content h4　はそれぞれ段落、リスト、見出し2、３，４を表しています。

これでだいぶ読みやすくなったのではないでしょうか

CSSで他のパーツも自由にカスタマイズする方法

ブラウザの検証機能でタグを確認する

好きなパーツ（例えばサイトカードやボタン、トップページのレイアウト）を自分好みに変える簡単な方法は、ブラウザの機能を使って自分のページのソースコードを読むことです。

Google Chromeなら　Ctrl+Shift+I　または　右クリックのメニューから検証を選択

することで、ページのソースコードを検証できます

具体例

Google Chromeで検証を開く（Ctrl+Shift+I）

このブログのトップページの記事カードの見え方を少し修正します。

左側のプレビューで各スマホの機種でのプレビューが確認できます

ここでは、サイトカードの余白を減らしたい….

該当箇所のクラス名やid名を確認

真ん中のソースコードにカーソルを合わせるとプレビューで該当箇所にメッシュがかかるので、自分が直したい箇所まで階層構造を開きます。

すると、今回直したい場所のクラス名（heading heading-tertiary）がわかりました。クラス名は普通は同じようなパーツにはすべて同じ名前がついているはずなので、下のサイトカードにおける該当箇所のクラス名もすべて（heading heading-teriaty）となっているはずです。（一応確認しましたが）

CSSに書き込んで修正

右側のCSSエディターに該当箇所のクラス名でCSSが新しくでてきたので、margin-top: 5px;（上の余白を5pxにする）を書き込むと、

左側のプレビューでは、余白が狭くなりました。

これはまだブラウザ上での変化なので、実際にサーバーのCSSに書き加えなければ反映されません。先程のCSSに今のコードを加えて完了です。

この修正を加えたCSSのソースコード

/*****スマホ表示時のフォント調整*****/
@media screen and (max-width:750px) {
	.content h2{
		font-size:15px;
	}
	
	.content h3{
		font-size:14px;
	}
	
	.content h4{
		font-size: 13px;
	}
	
	p, li{
		font-size: 13px;
		line-height: 26px;
	}
}
	
	/***トップページサイトカード***/
	h3.heading.heading-tertiary{
		margin-top:5px;
	}

他の人のサイトのソースコードを確認してまねする

HtmlとCSSの構造を理解して少し改良することに慣れてきたら、今度は人のサイトのソースコードを覗いてまねしてみましょう（悪いことではないです）

WordPressを使ったサイトならだいたいは同じ（テーマが一緒ならほぼ一緒）なので、簡単に人のサイトのまねをすることができますよ。