フォントと絵文字の位置
フォントと同列（インライン）で配置される絵文字（img要素）の縦方向の位置は、一般に「vertical-align」というプロパティで調節されます。
下は、「アメーバピグ スタッフブログ」の例です。
4月5日のフォント指定の変更前の状態では、以下の表示でした。 フォントは「MS Pゴシック」、アメブロ絵文字の配置設定は「vertical-align: text-bottom」です。
現在はフォントが「メイリオ」になりましたが、配置設定は「vertical-align: text-bottom」のままで、絵文字の配置が明らかに下方にズレています。
絵文字は、最適な表示位置になる様に、「vertical-align」をフォントごとに調節する必要があります。 これは、フォントごとに「文字形」の設計が異なるためです。 この例の場合は、「vertical-align: -2px」で綺麗に絵文字が収まります。
現在のアメブロの設定と「メイリオ」で理想的な設定
今回の基本フォント設定は、WindowsPCに対しては「指定のない」指定方法です。 ブラウザのデフォルトフォント設定を弄れば、「メイリオ」にもなれば、それ以外の「sans-serif」に分類されるフォントで表示する事も可能です。 しかし実際には、ブラウザのフォント設定を弄るユーザーはそう多くなく、現在は殆ど「メイリオ」で参照されると思います。（※1 ページ末参照）
厳密には、フォントによって絵文字の「vertical-align」補正値が変わるわけですが、ここからは一応「メイリオ」を前提として書きます。
● 現在、絵文字に対して設定されている「vertical-align」設定は以下です。
アメブロ絵文字は「みんなの絵文字、アメブロ絵文字char2～char4」の4種類があります。 全ての絵文字に対して設定が「vertical-align: text-bottom」と非常にシンプルなのは、これらの絵文字が「MS Pゴシック」を前提に作成されたからです。 しかしこの設定は、先に書いた様に「メイリオ」では位置ズレを生じ不適当です。
以下は、私が「メイリオ」に対して位置補正を調べたもので、この設定は「Ameblo Force Meiryo」というスタイルで数年に渡って培った調整値です。
❶「メイリオ」に適した絵文字の「vertical-align」設定
▪「margin-top」を指定しているのは、「24px」の大きなサイズのアメブロ絵文字を使用した場合に、使用した行だけ行間隔が大きくなるのを防ぐためです。
▪最後の「twemoji」は、ツイッターで使用される絵文字が、Win10絵文字の代替として表示される場合があったからで、現在は不要ではないかと思います。
この指定は、基本フォントが「メイリオ」のブログ表示で、必要なアメブロ絵文字の位置補正だと思います。「CSS編集用デザイン」のスキンの場合は、❶ のCSSコードをスキンCSS末尾に追加する事で絵文字のズレ補正ができます。（※2 ページ末参照）
また、「フリースペース」に以下の「styleタグ」を追記することで、一般の公式スキンでも絵文字の位置を補正できます。
❷「フリースペース」に追加するタイプの補正コード
▪ コードは長いですが、途中で改行せずに、このままコピー・ペーストします。
▪「フリースペース」に補正コードを記入する方法は、以下のページに詳しく書いていますので、参考にしてください。 手順は同じですが、記入するコードは ❷のコードになるので、間違わないでください。
旧タイプスキンの補正 〔 追記 2022.04.16 〕
上記 ❶ ❷ の補正コードは、多くのアメーバブログで妥当な補正値と思います。 しかし、多数のブログをチェックしていると、たまに「補正が足りない？」と気付くブログがありました。
補正値が足りないのは、旧タイプスキン（「ページ選択ボタン」の縦幅が小さいデザインです）の場合に限られ、（本来は新タイプスキン用の）「24px」サイズの大きいアメブロ絵文字を使っている場合でした。
旧タイプスキンのユーザーは、大サイズの絵文字を使うと行間隔が不整に開くので、自ずと「16px」サイズの絵文字を選択するので、あまり見かけないのだと思います。
しかし、そんな場合も対応できる様に、以下の ❸ ❹ の補正コードを追加します。
旧タイプスキンは「フォントサイズ 14px / 行間隔 1.5」と窮屈な設定です。 これに「24px」サイズのアメブロ絵文字を使っても行間隔が乱れない補正コードです。 これは「char3」「char4」の絵文字の補正値のみが ❶ ❷ と異なります。
❸ 旧タイプスキンで「メイリオ」に適した絵文字の「vertical-align」設定
❹ 旧タイプスキンで「フリースペース」に追加するタイプの補正コード
アメーバが対応すべきズレ補正
アメブロ絵文字の位置補正は、本来はアメーバ行うべき補正です。 上記の設定は、今後もアメブロが対応しない様なら、自衛するためのコードという事です。
他にも、私の知る限り、以下のSVG画像の配置に関するズレがあります。
旧タイプスキンの「いいね」ボタン
「旧タイプスキン」で、本文幅が狭くなるサイドバーを2本使ったスキン設定を選択したブログで、「いいね」ボタンが崩れます。
下は、「アメーバピグ スタッフブログ」の例で、「いいね！」ボタンを押した途端に崩れた表示になります。
拡大したところです。
この「SVG」には「margin-right: 0.25em」が指定されていますが、上の様に幅が溢れて崩れるという状態で「0.16em以下」の指定が必要です。
ブログテーマ表示・ランキング順位表示 のSVG
全てのブログのタイトル下の「テーマ表示」の「SVG」のマーク。
サイドバーのランキング順位等の「SVG」マーク。
これらをずっと放置しているのは、もしかして Macだと正常位置だからでしょうか？ もしそうだとすれば、Windowsユーザーはみくびられたものですが。どなたか、Mac等でズレていないなら教えてください。
アメーバ運営の改善案
〔※1〕に関して
アメーバスタッフブログで、ブラウザの設定を変更して「sans-serif」を「MS Pゴシック」を設定する改善案をほのめかしています。『ブラウザのフォント設定について変更をご検討いただけますと幸い』とし、具体的な方法も「MS Pゴシック」を明言をしていないのですが、この方法ははっきり言って勧められない方法です。
何故なら、このブラウザの設定変更は、他のサイトの表示にも影響するので、アメブロの記事表示は「MS Pゴシック」になりますが、例えば「Google検索」なども表示が変わってしまいます。 こんな方法を示すなら、その結果生じる弊害をちゃんと書くべきなのに、あんまりだと思いました。
〔※2〕に関して
このページの補正コードは、2022年現在の Windows PC で動作する Chrome・Edge・Firefox などの主要ブラウザで有効と考えています。 ただし、Mac PC上で動作する各種ブラウザでは、ブログ記事が「メイリオ」で表示されない場合が多いはずです。 その場合にこのページの補正コードが適切かどうか、私は検証できません。 考えられる多くの閲覧環境も含めた、理想的な補正コードが提示できないのか、やる気が無いのかは判りませんが、現在のアメーバのシステムは未補正で放置状態です。
このページの補正方法より程度の良い、他の閲覧環境にも適した補正が、アメーバのシステム側で実行される様になった場合は、このブログで報告します。 また、その場合には、このページの補正は、削除して無効化するべきものです。