どうも、こんばんは。
当サイト“IPPEIntel.com”のデザインを一新しました。よりシンプルで、記事が読みやすいということを最重視しています。
当然レスポンシブデザインですが、メディアクエリを使わずに設計してあります。今日日、端末も様々ですし、文字サイズを拡大している人もいるでしょう。flexとgridを使って、どんなデバイス幅にもシームレスに適応できるようにデザインしました。
いや、正直にいうと、トップページの大きな画像ファイルの振り分けと、記事一覧のデザインの部分だけ、ほんの少しメディアクエリ使っています。ただ、CSSが煩雑になるのがいやだったので、JSでデバイス幅を判定してbodyにmobileというクラスを付与することで対応しています。
JavaScript
jQuery(window).on("load resize", function() {
const smWindowSize = 600;
if (window.innerWidth <= smWindowSize) {
jQuery("body").addClass("mobile");
} else {
jQuery("body").removeClass("mobile");
}
});
WordPressを扱っている人なら知っているかと思いますが、WPがデフォルトで読み込むjQueryは、なぜか"$"では動きません。
あと、ダークモードも実装しかけたのですが、黒背景のデザインがしっくりこなくてやめました。一応、ダークモード時のbodyの背景色だけ、あまりにもさりげないグレーにしてあります。笑
あとは、記事を印刷したりPDFに保存したりするときにきれいに出力できるように、印刷用に別途CSSを当てています。余白を小さくして、広告やサイドバーは非表示になります。A4縦であれば、倍率75%前後でちょうどよく印刷できると思います。
というわけで、今後とも当ブログをよろしくお願いいたします。
33
ありません
コメント
おや、コメントがまだありません。