プレイ無料!ブラウザで遊べるHTML5ゲームサイト!

TOP> 記事一覧> 記事を見やすくするCSS改修

2017/05/03

記事を見やすくするCSS改修

タグ: 更新情報 技術 サイト改修 ブログサイト作成

このエントリーをはてなブックマークに追加

お気づきの方もいるかもしれませんが、CSSを刷新しました!
以下の参考サイトで「読みやすい記事とは何かを」を勉強して、CSSで今すぐ出来るところから対応した感じになります!

そこで今回は、CSSに落とし込んだ時に実際どのような設定をするかをまとめました!
本当は書き方のテクニックも磨いていかないといけないんですが、、、まずはここから!

紹介を快諾してくださった会社やめたろー様、ありがとうございます!

参考サイト(会社は辞めた。一人で稼いで生きてやる。様)
ブログ記事を最後まで読んでもらうためのハニートラップ

具体的にはどこを改修したの?

行間を広めに空ける

参考サイト様よりそのまま引用しますが、
一気に読む文字の量が増えれば増えるほど疲れやすいです。

文章の書き方での見せ方については量をこなして自分が成長するしかない気もしますが、
これならばCSSで比較的すぐ対応できるのではないか?と思い、対応してみました!

以下は記事本文をinfo_summaryクラスとした時の、pタグ全てに適用するようなCSSとなります。


.info_summary > p {
	margin-top:1.5em;
	margin-bottom:2.5em;
	line-height:3em;
}

CSSについては最近知ったことが多いのですがemという単位が非常に便利ですね!
その要素に適応されているフォントサイズ1文字分が1emという指定がされます!

つまり段落の前後はある程度間隔を空け、
段落内の行間も2文字分くらい空ける設定となります

注意点が一つあり、line-heightは1emで隙間が0なので、
2文字分空けたい時は3emを指定するのが正解です。

ブログで使っているフォントや好みなどに合わせて数値を変える必要がありますが、
pxだと端末差が出てしまったりなど不便なので、emをオススメします!


スポンサーリンク

スマホ版の基準文字サイズをviewport基準に

PCからアクセスされた時のフォントサイズは16pxから20pxに変更しました。
漢字ってゴチャゴチャしがちなので少し大きめなくらいの方が良いかなぁと思います。

ただスマホは端末によって見え方が違うので、フォントサイズも相対幅にしました!

なおviewportはdevice-widthを設定し、
メディアクエリを使って幅が600px以下だったらスマホ用での表示に切り替える設定にしてます。

以下は実際に使用しているCSSです。


@media only screen and (max-width: 600px){
	/*600px以下だったら適用される*/
	html,body {
		font-size:4.2vw;
	}
}

vwという単位は恥ずかしながら初めて知りました。
ちなみに100vwがviewportの幅となる相対単位なので、
大体横に何文字入れたいかというのを計算して数字を決めてやると吉です!

基準のフォントサイズを設定した後は、色んな長さ指定にremという単位を使うと、 要素内でコロコロフォントサイズを変えたいときでも気にしないで文字サイズ基準の設定ができます!

1remで基準のフォントサイズ1文字分と同じ幅となります。
まだそこまで徹底できていないですが、全てremで指定してしまえば基準のフォントサイズを弄るだけでズームが出来る
というような使い方もできるかと思います!

その他の改修

後はサイト改修報告レベルの内容なのでダイジェストで!

  • フォントサイズ変更に伴ってh1,h2,h3タグの文字サイズを調整
  • スマホからアクセスした時のメインコンテンツのpadding,marginを調整
  • 一部divの塗りつぶし色指定忘れの修正
  • 記事一覧ページから試験的に概要を除去

今日の結び

基本的には見た目の調整がメインでしたが、個人的には明らかに見やすくなったように思えます。

強いて言えばこの改修により、過去のさわレシピの箇条書きが読みづらくなってしまったので、
地味~な作業ですが、しょうがないので少しづつ直していこうと思います(泣)


参考サイト(Qiita様)
[CSS]長さの単位(執筆者karore様)


最後まで読んでいただきありがとうございました!

感想・リクエストなどは公式Twitterアカウント(@santmove_com)まで是非ご連絡よろしくお願いいたします!
また、ゲーム・ブログ記事の感想なども励みとなりますのでよろしくお願いいたします!

ではまた!

santmove.

昨日72.698秒という記録を出した猛者が居ました!

スタップウォッチ

スタップウォッチ

0秒ジャストで止めるのは簡単?でも同時にやると鬼難易度!時間管理能力の限界を目指せ!


当サイトはブラウザで遊べるゲームサイトです。

最新のゲームです!
Rotate Number Panels

Rotate Number Panels

ロテパネって呼んでね!キレイなパネルをクルクル回して数字を並べよう!相当頭をつかうよ!

人気のゲームです!
避けて食べてペンギンタワー

避けて食べてペンギンタワー

ペンギンだって暖を取りたい!氷を避けて登って、アツアツ料理を食べよう!

よかったら遊んでいって頂けると幸いです!面白かったら是非シェアしてください!

また以下のリンクよりお買い物頂けるとサイト運営の助けとなりますので、もしよろしければ是非よろしくお願いいたします!

楽天市場

amazon

良ければ是非いいね・シェアしてください!

このエントリーをはてなブックマークに追加

この記事のコメント

この記事にはまだコメントがありません。
はじめてコメントしてみませんか?


ログインするとコメント出来ます!
ログイン
無料アカウント作成

ログインしていません!

アカウントを作るとスコアの保存・閲覧が可能です!(無料です)
アカウントを作る!

サイト運営者

運営:サントムーブ

案件の依頼や問い合わせなどはコチラ!

メンバー

santmove.

プログラマー(代表)

最近更新されたゲーム

夜景と炒飯

2019/10/15 更新

リーマン登山

2019/09/02 更新

うなかぞえ

2019/07/17 更新

新着公開ゲーム

Rotate Number Panels

2019/03/10 公開

記憶丼

2019/02/24 公開

スシバタケ

2019/02/17 公開