メジャーアップデート。デザインバージョン3をリリースしました。

f:id:Kawan0116:20210429000522p:plain

本日、メジャーアップデートをおこない、バージョン3になりました。

coool.blue

見た目はあまり変わりませんが、CSSの部分で大改造しました。

デフォルトで用意されているCSSから避ける形にしました。

ただし、完璧ではありません。

なお、バージョン3からIEを対象外としました。記事は読めますが、レイアウトが崩れています。

よって、当サイトをご覧いただく時は、Edge,Chrome,Firefoxのいずれかをお使いください。

また、Windowsで制作しました。WindowsのEdge,Chrome,Firefoxで表示確認済みです。

Macを持っていないのでどうなるか分かりません(笑)。

恐らく大丈夫かと思いますけどね。

Macのシェアはそんなに高くないですし、Windowsでカバー出来れば良いのかなと思います。

制作に1日ほど費やしました。

かなり疲れましたね(笑)。

細かなバグがあると思いますので、その都度対応していきたいと思っています。

1番問題となったのは

1番問題となったのは、トップページのカード型レイアウトになります。

display:grid

を使いましたが、原因不明のカラム落ち。

バージョン2で上手くいっていたのに・・・。

何をしたか忘れましたが、上手くいって良かったです。

今回、トップページはバージョン2に引き続きカード型にこだわりました。

なので、絶対に解決してやるぞってことで対応しました。

なお、スマホで見たときは、カード型にはなりません。

単純に1カラムにしています。

もう少し見せ方があるかもですが、まぁ、このままでいいです。

ヘッダの固定を解除

バージョン2では、ロゴを左端に配置しヘッダを固定していましたが、不要だと判断。

ページをスクロールしてもヘッダが画面上部に貼り付くようにしていました。

固定するのはやめました。そして、ロゴを左端に置くのはやめて中央に置くことにしました。

ちょっと高級感が出たような(笑)。

とても気に入っています。

記事ページはかわり映えなく

記事ページはかわり映えないです。

バージョン3になってもベストという形で判断しています。

記事ページは読みやすさ重視です。

これで良いかなと思っています。

ローカルで作業

当ブログは、はてなブログを使っています。

「デザインCSS」で作業していたのですが、明らかに効率が落ちるので、ローカルで作業しました。

ローカルで問題ないことを確認し、そして問題なければデザインCSSに貼り付けるということをしました。

ちょっとしたバグであれば「デザインCSS」で対応しますが、まとまったバグであればローカルで作業します。

さいごに

まだ気付いてないだけで、おかしなところはあるかと思います。

発見次第、修正したいと思っています。

一通り作業を終えてみて、とても楽しかったですね。

バージョン4にする?

ちょっと考えてみようと思います。