サイトのデザインを一新しました

どうも、こんばんは。

当サイト“IPPEIntel.com”のデザインを一新しました。よりシンプルで、記事が読みやすいということを最重視しています。

当然レスポンシブデザインですが、メディアクエリを使わずに設計してあります。今日日、端末も様々ですし、文字サイズを拡大している人もいるでしょう。flexとgridを使って、どんなデバイス幅にもシームレスに適応できるようにデザインしました。

いや、正直にいうと、トップページの大きな画像ファイルの振り分けと、記事一覧のデザインの部分だけ、ほんの少しメディアクエリ使っています。ただ、CSSが煩雑になるのがいやだったので、JSでデバイス幅を判定してbodyにmobileというクラスを付与することで対応しています。

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％前後でちょうどよく印刷できると思います。

というわけで、今後とも当ブログをよろしくお願いいたします。