読者です 読者をやめる 読者になる 読者になる

現代の千利休を求めて

モバイルゲームプログラマーのブログ

MENU

コピペで一発!素人でも綺麗な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 Pゴシック" , "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;

}

 

まとめ

いかがだっただろうか、まだ改造したりないところはあるものの、結構マシな見栄えになってきたのではないだろうか。

最後に参考にさせていただいたサイトをご紹介して締めます。

はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなど - Yukihy Life

はてなブログの"続きを読む"ボタンカスタマイズしてみた【はてなブログ始めましたシリーズ】 - YuToRi

【保存版】簡単コピペの"続きを読む"ボタンデザイン集【はてなブログカスタムVol.11】 - 急がば 急いでまわれ!

フラットデザインを始める人向け参考サイト ~ギャラリー&カラーツール編~ | Webデザイン・Webデザイナースクール

モバイルフレンドリー対応_GoogleとAppleの推奨フォントは? | ブログ | SINAP - 株式会社シナップ

スマホサイトで指定すべき最適なフォントサイズとは?(モバイルフレンドリー対応) | ブログ | SINAP - 株式会社シナップ