検証・レビュー WEB

WordPress投稿、フォントサイズをコードで指定すると乱れて表示される?

2023/05/15

WP検証

ようこそ! ソレでシアワセになれるか!?な情報を発信しているSoReSiA(ソレシア)情報サイトです!

ご縁を結んでいただき、ありがとうございます☆

 

WordPressの記事を投稿するのに、

WordとかEvernoteとか、WordPress以外でタイピングした記事をコピペ

WordPressで編集して投稿公開すると、

フォント種類やサイズや行間がバラバラになって編集が厄介でどうしたものか!?

という検証記事を書いていて、ふと疑問に思ったコトの検証記事です。

 

SoReSiA情報で人生をLovely&Hapilyに☆
WordPressの投稿画面・クラシック版の段落で直接執筆した場合、

フォントサイズをコードでデフォルトと同じ11ptで指定したら、乱れずに表示されるのか?

実際はどう表示される??

 

実際にやってみて、スクショ公開です。

 

では、検証です!

 

デフォルトのままはコレ

検証のための文はタイトルを〜。

 

WordPressの投稿画面・クラシック版の段落で直接執筆した場合、

フォントサイズをコードでデフォルトと同じ11ptで指定したら、

実際はどう表示される?

 

☟ビジュアルエディター画面での設定☟

文字サイズ:11pt(デフォルト)

フォント種類:-apple-system

行間:不明

 

☟コードエディター画面に切り替えると☟

wp検証

 

☟スマホ(iPhone)で表示される画面スクショ☟

スマホの方が、表示される文字の違いがわかりやすいので!

検証

 

 

フォントサイズと種類を変更するとこうなったヨ

WordPressの投稿画面・クラシック版の段落で直接執筆した場合、(☜変更なし)

フォントサイズをコードでデフォルトと同じ11ptで指定したら(☜コードエディターでフォントサイズを”11pt”に指定

実際はどう表示される?(☜変更なし)

 

☟コードエディターの画面スクショ☟

wp検証

 

☟スマホ(iPhone)で表示される画面スクショ☟

検証

SoReSiA情報で人生をLovely&Hapilyに☆
コードで指定した部分が小さく表示されてる!
でも、PCやiPadでは同じサイズで表示されてるんだよねー
SoReSiA情報で人生をLovely&Hapilyに☆

 

ちなみに、iPhone 13 Pro。

Safariだけでなく、Chromeでもフォントサイズが乱れました。

 

iPadは、iPad自体の設定の「文字サイズを大きくする」的な設定で文字サイズを大きくしても、

サイトで表示される文字サイズには乱れなし

 

結論

WordPressの投稿、コードエディターで文字サイズを指定すると、

ビジュアルエディターのデフォルトの文字サイズと同じサイズでも、

iPhoneでは文字サイズが違って表示される可能性あり。

 

PCとiPadでは、同じ文字サイズ表示でした。

 

。。。。と、いうことは。。。。

当サイトはAffinger6を使って制作してるんですけれども、これってAffingerでのモバイル表示の設定の問題なのかも???

 

引き続き、検証というか試行錯誤してみて、公開したいと思います!

 

Affingerは、機能が多すぎて最初の設定をするのに時間かかってやや大変という悩みはありますが😅(☜ド正直な感想です!)、

設定それ自体はそこまで難しくないですし(根気が入りますけどね)、一度設定してしまえばか〜なり簡単操作で色々なタブを設定してくれるのでオススメです!

こちらから購入できます⭐️AFFINGER6⭐️

 

 

ここまでお付き合いくださり、ありがとうございました!

皆さまの日々が、LovelyでHappilyな時間で満ちますように⭐️

スポンサーリンク

  • この記事を書いた人
SoReSiA

SoReSiA(ソレシア)

ご縁を結んでいただき、ありがとうございます☆
旅と美味しい食事をこよなく愛する、占いセッションフリーク&プチ健康オタクです。
「人生をよりLovelyでHappilyなものにするにはどうすればいいのか?!」という飽くなき探究心と好奇心に突き動かされ、日々アレコレ検証しながら地球ライフを楽しんでいます。

書くことから、写真・動画・サウンド・アート作品の制作、西洋占星術やことだまで使命を読み解くまで、幅広〜く活動しております。

-検証・レビュー, WEB