[WordPress] モバイル版の記事一覧の間隔を狭くした

モバイル版の記事一覧の間隔が狭くなるように、スタイルを調整しました。

一度に 5記事から 8記事見えるようになりました。

/** 記事一覧の密度を高くする 2024-04-26*/
@media screen and (max-width: 480px) {
  .list {
    row-gap: 0;
  }

  .list.ecb-entry-border .entry-card-wrap {
    margin-bottom: 0;
  }
  .e-card-title {
    font-size: 16px;
  }
  .related-entry-card-title,
  .entry-card-title {
    margin-top: 8px;
    margin-bottom: 0;
  }

  .ect-entry-card .card-thumb {
    margin-bottom: 6px;
  }
  .entry-card-meta {
    bottom: -2px;
  }
  .ect-entry-card-wrap main.main {
    padding-top: 0;
  }
}

こちらもどうぞ。

[CSS] ブログの文字詰めを微調整した【letter-spacing と font-feature-settings】

ちいラボでは、なるべく「文字が見やすい大きさ」に設定しています。しかし、自分のスマートフォンで閲覧すると、一行の文字数が少ないために、改行が多すぎる気もしています。そこで、文字の大きさをそのままに、「文字詰め」を狭めてみることにしました。letter-spacing全体的な字間をそのまま減らすには、letter-spacing に負の値を設定します（規定は0）。letter-spacing: -0.05em;font-feature-settings に "palt" を設定...

chiilabo.com

[CSS] 幅とパディングの関係【box-sizing】

HTML要素の幅を固定して、パディングを内側に取りたいときには、「box-sizing」プロパティでborder-boxに指定します。固定ヘッダーとサイドバーが重なって幅が取れないウェブページに固定ヘッダーを作ろうと思いました。位置を position: fixで固定します。ところが、画面サイズによって幅の変わる左サイドバーがあったので、幅がうまくいきません。サイドバーの幅の分だけ右にずらす（leftやpadding-left）と、ヘッダーバー全体が画面から右にはみ出てしまい...

chiilabo.com

どうやって「EXアプリ」を使い始めたらいい？【会員サービスの複雑さ】

iPhoneで新幹線を予約するのに「EXアプリ」をインストールしました。新規会員登録からつまづいてしまいました。自分の場合は、どれを選んで設定していけばよいのでしょうか？EXアプリは、JR東海の「スマートEX」を利用するためのアプリです。シンプルかつ洗練された画面で「スマートEX」がご利用いただける公式アプリです。EXアプリ｜ＪＲ東海（参考）EXアプリ（Android用 / iPhone用）EXアプリ｜ＪＲ東海エクスプレス予約サービス公式スマホアプリ・EXアプリ新幹線の予約サ...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。