サイトをグリッドデザインにしたい

ほぼ独立状態ですが、この雑記ブログ「ざっくざく」は、M＆Wというサイトの一コンテンツとして始めました。

こんにちは、和美です。

【目次】

1. 計画
2. 本音の話
3. 対応ブラウザ
4. 変更箇所
5. 制作途中画像
6. 参考ページ

計画

2015年に改装したサイトを再び改装しようかと画策中です。
さすがに今時テーブルレイアウトはないでしょう。
という事で、自分待望のレスポンシブ化と、まさかのグリッドレイアウトです。

本音の話

現在のレイアウトでは、更新履歴がトップページの右半分を占めてしまって
います。
一ヶ月に一度以上更新できていた時はそのレイアウトで良かったのですが。
現在、全コンテンツが更新停止中な上、次の更新予定が立っていません。
なので、更新履歴を目立たないようにしたいというのが改装のきっかけです。

対応ブラウザ

色々試したのですが、参考にしたサイトの関係で、かなり新しいCSSとHTMLのタグを使っています。
なので、Internet Explorerでは綺麗に表示されない可能性が高いです。
IE8辺りだと完全に非対応なはず。
今はEdgeでのみ動作確認を取っています。

変更箇所

変更点はほぼ一ヶ所です。
【小説•画廊の分岐ページ廃止】
現在のトップページでは、小説や画廊の文字リンクをクリックすると、各ジャンル毎に分かれる分岐ページに行きます。
このページを廃止して、トップページから直接各ジャンルの小説•画廊ページに行けるようになります。

他にも雑記ブログの注意書きページの廃止、トップページから更新履歴の削除、レスポンシブ化（トップページのみスマホ対応）などもありますが……一番大きいのはこれかなと思います。

制作途中画像

スクリーンショットで撮影したレイアウト画像を貼っておきます。
レイアウトはほぼ確定したので、これから文字と画像を入れていきます。

参考ページ

最後に、レイアウトの参考にしたサイトを挙げてお礼に代えさせて頂きます。
webクリエイターボックス：CSSグリッドレイアウトでサイズが違う複数のボックスをタイル状に配置する