コメント投稿者アイコンのズレを修正しました。

私のブログは基本『徒然日記』故に難しいwebの話は他所にお任せ（他力本願）なのですが、自作共有化しているテンプレートで「あれ？」を見付けてしまったら見過ごす事は出来ません。（← 当たり前ですね。^^;）
修正・更新記事ばかりで申し訳無いのですが、本日テンプレートを更新させて頂きました。m(__)m

1. コメント投稿者のアイコン表示が場合によってズレてしまう。
2. 最近のブレークポイントを元にスマートフォン用メディアクエリを修正。

1 ）　コメント投稿者のアイコン表示が場合によってズレてしまう。

これに気付いたのは、最近 iPhone12mini に機種変更して自身のブログを表示してみた事によります。
前機種（iPhoneSE）はSIMを抜いただけなので自宅Wi-Fiでネットに繋がるため確認してみると（下記画像を参照）

↑何のズレも無く表示されているのに
iPhone12mini ではガクリとコメント者のアイコンがズレ落ちているという。(-_-;)（下 左画像）
しかしこのアイコン、自動ロック（スリープ）から復帰すると同ページ内ではズレが直り（下 右画像）、ページ移動やページ更新でズレが再発する現象を確認。（下 左画像(~_~;)）

管理者のアイコンも、カスタマイズによる訪問者コメントのユーザーアイコンもズレてしまいます。

訪問者コメントにユーザーアイコンを表示

ずっとずっと、出来たら良いなぁ～と思っていた「管理人以外のコメントにユーザーアイコンを付ける」…。これを叶えてくれる！しかも自動で！！無いものを作ってくれる有志の方が居るって

sorauta1.blog.fc2.com

この2台の違いは（iPhoneの機種という事を除いて）iOSのバージョンが違うという事。
（iPhoneSE＝14.4.2、iPhone12mini＝14.5.1）
iPhone12mini は現時点でバージョンダウンが既に出来ないようなのでこれが原因かどうかは分からないですが、どちらの場合でもキチンと表示されるように調整しなければいけません。
ただ、このズレが起こるのはテンプレート名『genial, serene, youth』という事も判明。

何故『genial, serene, youth』に起こって『home, sunny』に起こらないのか？
思い付いたのは「user-icon部分に文字（特殊文字）を使っているかどうか」では？と推測。

『genial, serene, youth』で使っている『❦』はハートで変換できる文字です。これとは異なり『home, sunny』ではPNG画像をBase64文字列にエンコードしたものを背景として使っています。
この user-icon という部分に author-icon というclassを重ねる事で投稿者のアイコンが表示される仕組みになっているのですが、親要素であるclass user-icon に文字（インライン要素）が使われているため、上に重なるclass author-icon の position:absolute が影響されていると思われます。
（検証してみましたら、ct_resp, al_resp, ryo, candy, green, lace-al, lace-dc ではアイコンのズレを確認できませんでした。『❦』使っているのに何故？という感じです。）

説明が難しいので、詳しい解説は下記をご覧下さい。m(__)m

position:absolute は位置指定をしていないと親要素の影響で思わぬ動きをするときがある、という話 - わたしと納豆ごはん

CSSのposition:relativeとposition:absoluteを使ったデザインがありますが、意外と子要素にposition:absoluteを指定していても、親要素のtext-alignやvertical-alignなどの影響を受けるときがある、といった話です。

tomotan.hateblo.jp

結果、上記の記事に有るように「位置を指定するプロパティを設定するのが確実だ」という事で、位置指定のプロパティを使ってキチンと位置を指定する修正を全テンプレートで致しました。

修正箇所と内容は、スタイルシート内のclass名
.user-icon に position:relative; 、.author-icon に top:0; left:0; を記述致しました。
2021/05/25 更新日以前のテンプレートを修正する場合は、スタイルシート編集枠内の一番下に

.user-icon{
  position:relative;
}
.author-icon{
  top:0;
  left:0;
}

と入れて更新して下さい。お手数をお掛け致します。m(__)m

【 追記 2021/05/26 】
2021/05/24（米国時間）iOS ver.14.6 の配信が開始されたので26日にインストールして検証致しましたら、この度の修正を行わなくてもアイコンはズレませんでした。（ver.14.5.1のバグ？）ただ、修正自体は正しいものなので直しても無駄ではありません。m(__)m

2 ）　最近のブレークポイントを元にスマートフォン用メディアクエリを修正。

最近何やら大きいサイズのスマートフォンも出てきて、ブレイクポイント（メディアクエリを使ってCSSスタイルを切り替えるポイント）とする数値も年々大きくなって参りました。
私なんかは「片手で持ちやすくて重く無くて鞄のポケットに入るサイズ♪」などと極力小さいものを欲するのですが、世の中大きい方が売れてるようです。（iPhone12miniが不振らしいし。）

CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ

WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、モバイルファースト用のメディアクエリ、スマホ・タブレットの主要デバイス用のメディアクエリのチートシートをまとめました。 C

coliss.com

スマートフォンの場合、最近は横480pxと掲載している所が多いようなので、この度の更新時に修正を致しました。
下記テンプレートのメディアクエリ (max-width: 〇px) となっているものを全て (max-width: 480px) に改めています。
テンプレートのスタイルシートを修正する場合は、キーボードのCtrlキー＋Fキーで検索窓を出し、その中に (max-width: 430px) 若しくは (max-width:430px) 等を入れて箇所を見付け、数値を480pxに変えて下さい。
（↑ :と値の間にスペースが無いものも有るので、430や420 等の数値で検索するのも可。）

(max-width: 480px) に修正したメディアクエリ
sunny_resp2c (max-width: 430px)
home_resp2c,3c (max-width: 430px)
youth_resp2c,3c (max-width: 430px) と (max-width: 415px)
genial_resp2c,3c (max-width: 430px) と (max-width: 420px)
serene_resp2c,3c (max-width: 430px)
ct_responsive2c,3c (max-width:430px)
al_responsive2c,3c (max-width: 430px) と (max-width: 400px)
candy,green-2c,3c (max-width: 430px)
lace-al2,al3 (max-width: 430px) と (max-width: 400px)
lace-d2c,d3c (max-width: 430px) と (max-width: 400px)
dt21_ryo,ryo_2c (max-width: 430px)

修正しなくても大きな崩れは無いと思いますが、もし表示がおかしい場合は上記のようにお願い致します。
（因みに iPhone12ProMax で6.7インチ、428×926です。）