のうらリリースノート

 ブログUIのマイナーアップデート。

スマホ表示の両幅の余白の縮小

 このブログは、PC表示では左右に大きく余白を持たせている。スマホ表示でも余白を設けていたのだが、大きすぎて見にくく感じたので修正した。

@media (max-width: 768px) {
  .container {
    padding: 4px;
  }
  ...
}

 CSSに上記を追加。

 また、文字の間隔にも違和感があったのでそちらも修正。

body {
  ...
  letter-spacing: 0.01em;
}

 明示的にletter-spacingを指定。値は0.01emにした。

 うん、だいぶ見やすくなった。

YouTube動画の埋め込みの横幅の調整

 もう一つ。埋め込まれたYouTube動画が、スマホで見ると画面をはみ出してしまっていたのでこちらも修正。

  .article-content iframe {
    display: block;
    width: min(560px, 100%);
    aspect-ratio: 16 / 9;
    height: auto;
  }

 iframeについてのCSSを追加。

 うん、これもいい感じ。まあ、あんまりスマホで埋め込まれたYouTube動画見ることはないとは思うが。