ブログ新しくする

HAKASHUN commented 8 years ago

気づいたらドメインとサーバー期限きれてたので、タダでなんとかいい感じのものを整備しなければ...

hugo
mediumレイアウトを参考にする
sketch使ってデザイン書いてみる
cssnext

HAKASHUN commented 8 years ago

mediumのレイアウト

PC

記事文はwidth: 700px タイトルはfont-size: 36px; line-height: 1.15 mediumだと、letter-spacingに-0.02emを指定している

文章は、font-size:21pxとやや大きめである。色は面白くて、rgba(0,0,0,0.8)と黒に少し透過を加えている。ただし、英語は適したサイズ感で表示されるので、英語ベースでのサイズ表記な気がしている

モバイル

横幅が767px以下の画面では

画面サイズに対して、左右に20pxのマージン
- 実際にはなぜか右は25pxのマージンが反映されている
タイトルはfont-size: 28px; line-height: 1.12; letter-spacing: -0.022em;を指定している
文章はfont-size: 18px; line-height:1.5; letter-spacing: -0.004em;を指定している

共通

日付スタンプ

font-size: 12pxとかなり小さい
color: rgba(0,0,0,0.44)と、灰色文字も透過文字で表現しているのが面白い

見出しカテゴライズ

<h2>
- font-size: 52px; line-height: 1.04; letter-spacing: -0.016em;
- (767px以下)font-size: 40px; line-height: 1.04; letter-spacing: -0.016em;
<h3> が記事のタイトル
<h4>
- font-size: 28px; line-height: 1.22; letter-spacing: -0.022em;
- (767px以下)font-size: 24px; line-height: 1.18; letter-spacing: -0.022em;

リンク

文章内のリンクには、hover時の色の変化などはない

リンク文字への下線表現

少し複雑なことをしているので具体的にメモ

body.is-withMagicUnderlines .markup--anchor {
  text-decoration: none;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 50%);
  background-repeat: repeat-x;
  background-size: 2px 2px;
  background-position: 0 22px;
}
// 解像度の高い画面
@media not all, only screen and (min-resolution: 2dppx), 
only screen and (-webkit-min-device-pixel-ratio: 2)
body.is-withMagicUnderlines .markup--anchor {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0) 25%);
}

個人的にはhover時に色を変えたいかな
モバイル対象に-webkit-tap-highlight-color: rgba(0,0,0,0.3);がついていた

太字表現

シンプルにfont-weight: bold

区切り線

おしゃれに・・・で表現しているバージョン

hr.section-divider:before {
  content: '...';
  display: inline-block;
  margin-left: 0.6em;
  color: rgba(0,0,0,0.6);
  position: relative;
  top: -30px;
  font-family: "medium-content-slab-serif-font",Georgia,Cambria,"Times New Roman",Times,serif;
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  letter-spacing: 0.6em;
}

引用表現

ブロックの右端に黒い線を表示border-left: 3px solid rgba(0,0,0,0.8)
font-style: italic

日本語でどう見えるか？

改めて、mediumのレイアウトが日本語表現にあっているかを考えると、少し調整が必要そうこんな拡張を作っている人もいた。

https://chrome.google.com/webstore/category/apps?hl=ja

tag	before	after
h2		30px
h3		26px
h4		24px
(.postContent)		17px

HAKASHUN commented 8 years ago

コード表現

画像のようなおしゃれな見せ方を実現したい
- こんな感じの真ん中にコードが書かれているような
- キャプションもこんな感じでつけるとおしゃれ〜

HAKASHUN commented 8 years ago

ダミーテキスト

デザインを組んでいく際に、必要となったので、以下のサイトを活用した。

http://www.blindtextgenerator.com/lorem-ipsum

HAKASHUN commented 8 years ago

リストページのデザイン

これっていう感じがないので、調べてみることにした。

HAKASHUN / manabi