コピペで一発！素人でも綺麗なWEBデザインを作る

どうも千利休です。
本物のWEBデザイナーにはかないませんが、今回CSSを変えて見やすいサイト作りにするためのこのブログのコードと集めた情報をドーンと公開いたします。

フォントのサイズはどうするべきか
本文フォントカラーはどうするべきか
カラー配色はどうする？
コード大公開
まとめ

フォントのサイズはどうするべきか

直近ではほとんどの人がスマホからブログを読みに来られるのでスマートフォンで見やすいフォントサイズにする必要がありそうだ。

読みやすいフォントサイズを使用する | PageSpeed Insights | Google Developers

Googleでは

フォントサイズ16px
行間1.2em

を提唱しているらしい。

しかしこれを設定するとどうも日本語フォントだと窮屈に感じてしまう。
そこで調べたところ、主要ニュースサイトのフォントサイズを調べているサイトが見つかった。

sinap.jp

素晴らしいデータに感謝。
ここのデータをもとに

フォントサイズ16px
行間1.5em

に設定したところ、日本語フォントにしっくりきた。
基本はこの設定をしとくといいのではないだろうか。

本文フォントカラーはどうするべきか

本文カラーは長く見つめる特性上、実は真っ黒ではない方がいい。
ほとんどのサイトは実は灰色に近い色を採用しているはずだ。

【デモあり】webデザインにおけるグレー(灰色)の上手な使い方｜2.IDEA

詳しくはこのサイトを見るんが早い

カラー配色はどうする？

統一されたカラーは実は非常に重要だ。
サイトの見やすさにも直結する部分ではあるものの、私はデザイナーではないのでわからないのでこのサイトの力を借りた。

www.internetacademy.jp

Flat UI Colors

基本はコピペだけで済むようにできているので、ここで好きな雰囲気に近いものを選ぼう。

コード大公開

この記事を書いた段階でのCSSになる。
はてなブログの皆さまはデザイン→CSSにコピペで貼り付ければこのブログと同じような感じになる。

謝らなければいけないことがある。
Markdown記法に最初にしなかったせいで、引用でしかうまいことCSSを表示できないことに気がついた。
見たまま編集ではどうやらできないみたいなので許してほしい。

/* 記事タイトル */
.entry-title {
font-size: 18pt;
line-height: 1.3em;
}

/* 本文*/
.entry-content {
font-size: 16px;
line-height: 1.5em;
color: #333333;
font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳＰゴシック" , "MS PGothic" , sans-serif;

}

/* 続きを読む */
.entry-content .entry-see-more {
background-color:#3498db;
}

/* 日付 */
.date a
{
font-size: 13px;
color: white; /*日付の文字色*/
background: #1abc9c;/*日付の背景色*/
border-radius: 0.2em; /*角の丸み*/
padding: 1px 8px;/*日付の文字まわりのスペース*/
}

/* 記事一覧のコメントと星を非表示 */
.page-index .entry-footer{
display: none;
}

.entry-content h4 {
font-size:24px;
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #3498db;
border-bottom: 1px solid #3498db;
}

.entry-content h3{
font-size:26px;
padding: 4px 10px;
color: #111;
background-color: #3498db;
border-left: 8px solid #3498db;

}