v1.0.1 リリースしました

Release major version

まだまだ、手を入れるべきところはありますが、目立ったバグをほとんど潰したので、ver1 (正式リリース)としました。

前回のブログ v0.9.17 と比べると、数限りない改良を行っています。詳しくは、Githubのコミットの履歴をご覧ください。

大きな改良点をあげると、以下の5つです。

  1. フォントサイズ、コンテンツ幅の変更
  2. ナビのバグを修正、ナビの色の調整、ナビの色を変更しやすく修正
  3. サイドバー付きページのバグ修正、改善
  4. 検索フォーム、検索結果を改善(デザインをよくしました)
  5. アーカイブページのカード表示、ページネーションの改善

以下、詳細を説明します。


フォントサイズ、コンテンツ幅の変更

メインコンテンツのフォントサイズ、コンテンツ幅については、ずいぶん悩みました。スマホで読みやすいフォントサイズを選びつつ、PCでも同じ文字数で折り返すことを考え、18px を採用しました。

しかしながら、最近の多くのページや見慣れてくるについれて、「PCは、ちょっと大きいかも・・・」と感じるようになりました。

そこで、フォントサイズを小さくしつつ「コンテンツ幅」も 650px と狭くしました。従来よりも狭くなりましたが、フォントサイズは少し小さくなり、37文字程度で折り返すため、読みやすく感じるはずです。

前と、ちょっと変わったみたいに感じるけど、何だろう?と思われたら「フォントサイズ、コンテンツ幅」が共に数%小さくなったことが原因だと思います。

ナビ関連の改良

特定の状況下(サイドバーありのページを使い、プライマリメニューがない場合。つまりロゴしかない状態のナビ)の場合、ナビの高さがなくなって小さくなる問題がありました。

この問題を解決しました。

次に、ナビの「文字色」を細かく調整しました。ナビの色問題は、悩みの種です。フロントページは「背景透過」ですが、それ以外のページでは「背景あり」になったりします。このような状況で上手く制御するために、HTML、クラスなどを切り分けました。

さらにはっきりと色を設定できるように、調整を行いました。

その結果、ページトップ固定時に、はっきりと背景色が出るようになりました。また、こだわりたい方は、細かくナビの色を調整できるようになっているので、チャレンジしてください(追加CSSか、フックを使ってください)。

サイドバー付きページの改善

サイドバー付きのページは、以前から問題がありました。サイドバーを常に表示(Sticky : 張り付く)させつつ、コンテンツとは独立してスクロールをさせていました。

このような状態を実現するためにとった方法が、flex や jQuery によるものでした。しかしながら、jQuery (javascript)を利用することで、素早くスクロールすると、表示が乱れました。

さらに、特定の状況(サイドバーがコンテンツよりも長く、スクロールが必要なほど長い場合)では、スクロールを無理やり続けると、コンテンツ部分が伸び続けるバグがありました(フッターは一部しか表示しない)。

このような問題に対処するために、CSS の postion:sticky などを上手く利用する方法(uikitを活用)を検討し、採用しました。

これにより、非常に滑らかな動きをするようになったはずです。

検索フォーム

検索フォームを改善しました。結果はこちらをどうぞ。

アーカイブ表示の改良

カード表示、ページネーションなどのデザインを見直しました。またコンテンツ幅も変更し、幅広で見やすいデザインに変更しています。

いいね:





コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です