二次創作のジャンル変更に伴い創作物公開用の個人サイトを作り直したわけだが、最初のトップページが突貫工事だったため先日作り直した。その時のメモを記す。
創作コンテンツや日記の本体はブログスクリプト、拍手もレンタルにしてあるため、TOPページだけ作成しカテゴリーのリンクを貼るだけでいいわけだが、ナビゲーションを作らなければならない。レスポンシブに対応させる場合、スマートフォン用はハンバーガーメニューにする必要がある。というわけで画面サイズによって表示を変える分岐を作る。ネットで公開されているテンプレートを使うのはハンバーガーメニューの箇所だけであるため、PCのナビゲーションバーは自作するわけだ。
PCのナビゲーションバーはコンテンツの幅÷ナビゲーションリンク数の％で幅を分割し並べる。最近はinline-blockやbox-sizingという要素が使えるため、ここは20年前よりかなり楽になった。20年前だとfloat一択だったと思う。
トップ絵はh1の見出しと融合させるため、background-sizeのcontainかcoverを利用する（※レスポンシブのサイズによって分ける）h1にwidth（リサイズ後）に合わせたheightを指定すれば画像だけを表示させた状態に近くなる。
また、今回はTOPページだけ自作ということでスタイルシートはstyleタグに直接記入する。外部だとキャッシュの読み込みの関係で不良が出るわけで…。
フッターには創作サーチのリンクと画像化したメールアドレスを貼る…くらいか。
これで数時間。多分世間的には早い方ではあるのかな。タグ打ちするならタイピングは覚えておくと得かと。
