サイトデザイン

サイト配色

material palette にてIndigo+Redを選択。
Accent colorは配色の見本帳にて見繕った「円熟した紫みの赤(#CB002B)」に変更。
%e9%85%8d%e8%89%b2

Dark primary color #303f9f ■■■■■
Primary color #3f51b5 ■■■■■
Light primary color #c5cae9 ■■■■■
Text / Icons #FFFFFF ■■■■■
Accent color #ff5252
#CB002B
■■■■■
Primary text #212121 ■■■■■
Secondary text #757575 ■■■■■
Divider color #BDBDBD ■■■■■

 

ロゴ作成NASA風ロゴ。

ロゴジェネレータ Festisiteで作成。
本ブログの配色に併せて色を修正。

 

アイコン

基本的にfontawesomeのCDNを使用。
原子アイコンはICOOON MONOにて入手。ライセンスフリー。
本サイトは各種サイズと色指定が出来る。
ge

 

サイドバーへのプロフィール表示

サイドバーにテキストウィジェットを用意し、<img>タグにメディアライブラリの画像パスを指定。画像サイズは105*105ピクセルで指定したかったため、420*420ピクセルのアイコンを用意した。理由は高解像度ディスプレイで画像が潰れないようにするため。一般に、画像ファイルはデバイスのdensity(device density ratio)に合わせて用意する。従来はdensityが2のRetinaディスプレイに合わせて2倍の大きさで用意すれば十分だったが、近年はスマホのdensityが4が主流になっていることから4倍の大きさの画像を用意すると良いらしい。