モバイルデザイン④（記事を見やすく調整）

アメブロカスタマイズ

モバイルページをカスタマイズするための『ステップ④』です。
モバイルページでの記事の見栄えを良くするための css を紹介します。
※「ブログデザインの設定」で『GALAXY』を使用しています。

見栄えを良くするためのコード

@media screen and (orientation:portrait) and (max-width:568px),screen and (orientation:landscape) and (max-width:896px){
  header h1{ /* 記事のタイトル */
    font-size: 90% !important;
  }

  .PhotoSwipeBlock{ /* 記事の内容 */
    font-size: 80% !important;
  }

  p span span{ /* 記事に貼りつけた画像 */
    margin-left: 0 !important;
    min-width: 90vw !important;
  }

  ol{ /* 番号付きリスト */
    padding-left: 20px !important;
  }

  li span span{ /* 番号付きリスト内の画像 */
    margin-left: 0 !important;
    max-width: 87vw !important;
    min-width: auto !important;
  }
}

目的と理由

『記事のタイトル』と『記事の内容』の文字の大きさを小さめにしています。
※無駄な自動改行を減らして、スクロール量を減らすため
『記事に貼りつけた画像』を左にスペースを残し少し小さめにしています。
※小さめの画像が、左端に寄っていて、違和感があるため
『番号付きリスト』の左のスペースを半分にしています。
※左にスペースがありすぎて、違和感があるため
『番号付きリスト内の画像』を左に少し寄せ、画像を少し小さくしています。
※画像が画面の右にはみ出しているため

使用方法

　上記のコードから、不要な説明やスペースをすべて無くした下記のコードを記事を『HTML表示』して、先頭にコピーしてください。

@media screen and (orientation:portrait) and (max-width:568px),screen and (orientation:landscape) and (max-width:896px){header h1{font-size:90%!important;}.PhotoSwipeBlock{font-size:80%!important;}p span span{margin-left:0!important;min-width:90vw!important;}ol{padding-left:20px!important;}li span span{margin-left:0!important;max-width:87vw!important;min-width:auto!important;}}