「Hexagon」は角ばった印象のテンプレートです。28作目です。
カスタマイズしやすいベーシックなデザイン
どの端末からも見やすく、1カラムで表示されるレスポンシブデザインです。
お好きな背景色やウェブフォントに差し替えることでオリジナリティを出せます。
こんな方におすすめです
- 色やウェブフォントを変えて楽しみたい
- 使用画像は少ないほうがいい
- シンプルモダンな感じが好き
このテンプレートはMITライセンスを適用しています。詳しくは利用規約をご覧ください。
「Hexagon」の特徴3つ
使いやすい白テーブル
ページ全体の背景色は青緑ですが、コンテンツ部の背景色は白色です。
このような白テーブルのデザインはkleeで比較的人気があります。このテンプレートがお好きな方は「Marine」や「GRIGIO」もお好みかもしれません。
白テーブルは背景色が映えますし、パターン背景や写真を敷くこともできて使いやすいですよ。
マーカーを引いたようなリンクがかわいい
今回はリンクの背景色に薄い青緑色を使っています。
シンプルなスタイルシートでありながら、どこがリンクか分かりやすく、蛍光ペンを引いたようでかわいいです。
ただし、カラーコードの指定をrgba()で行なっているので、おそらくガラケーでは表示されません。
ガラケーでの閲覧を考慮する場合は透明度(alpha)のない普通のカラーコードを使ってください。
角ばったウェブフォント
サイト名やメニューの文字にはGoogle FontsのSkranjiを使っています。角ばっていて面白いフォントです。（特に小文字のoの穴がひし形のようでかわいいです）
このフォントに合わせた装飾をメニューや見出しにしてあります。
フォントによっては.gnav li a:hover{border-top: 3px dotted;}としてメニューホバー時の線をドットにしたり、h2の疑似要素を中黒（・）や黒丸（●）に変えたりした方がしっくりくるかもしれません。
色々な組み合わせを試してみてください！
テンプレートのデータ
| 文書型宣言 | HTML5 |
| 文字コード | UTF-8 |
| フレームワーク | Bootstrap |
| CSSの書き方 | モバイルファースト |
サイト作りに慣れていなければ「HTMLテンプレートを使ったサイト制作の流れ」をご覧ください。