hamashun.com のリニューアルについて
- Category
- 雑記
- Bookmark
hamashun.comをリニューアルしました。 これまではブログがメインコンテンツだったんですが、今後はブログは切り離して、単純にポートフォリオ的な扱いにします。
と言う訳で、リニューアルのメモ書きです。
デザイン
Twitterでもちょろっと言ったんですが、大沖さんという人のイラストがデザインを思いついた元ネタです。
そしてあんまり深く考えてないです。 思いついたままに筆を滑らせた的な。 とか言ったら怒られそう。
太い矢印がキャラクターを指してるのとか、何かのイラストか表紙で見た記憶があるんですけど、具体的には覚えてないです。 なんだったかなー。
ページ遷移は、最近流行りらしいワンページ（シングルページ）です。 JavaScriptで切り替える的な。
HTML
HTML5です。 このタイミングでリニューアルするならHTML5しかないかな的な。
新しいセクションで登場する見出し
（ワンページサイトでの）一ページ分の最初の見出しはh1要素で、以降はh2, h3 ... となってます。
新しいセクションごとに全てがh1要素でも良かったんですけど、SEOスパムと誤認されたら嫌だなという消極的な理由と、コンポーネント化するとしても（多分しないけど）、（ワンページサイトでの）一ページ分が最小単位かなと思ったのが理由です。
あとXFN使ってみたりなんかしちゃったりして。
CSS
ちょこちょことCSS3を使っています。 今の所は
- border-radius
- transform
- text-shadow
- Web Fonts
- rgba
- Multiple background
くらいかな。 そんなに突飛な事はやってないです。 Web FontsはGoogle Font APIを使ってみました。
あとは :before疑似要素とcontentプロパティとか使ってます。
JavaScript
JSなしでも情報は得られるようにしてます。
- 長い一つのページのコンテンツを非表示にして、ワンページサイト（シングルページサイト）にしてる
- フラグメント識別子付きのアドレスでアクセスすると、そのコンテンツが表示される
- ウィンドウの縦幅が狭い場合、それに合わせたデザインになる
みたいな。
リニューアルしたとは言っても、突貫工事だったので気に入ってない点がいくつかあります。 今後修正していきたい感じ。
