りんごが好きなのでぃす

Macを中心に、たま〜にiPhoneやiPadなどの話題も届けていたら今年で26年目を迎えてました

Safariのテキスト入力欄、文字揺れを抑える

 

So-netブログのテキスト入力欄では発生しないようですが、HTMLタグの<textarea>を使って作成されたテキスト入力欄に文字を打ち込んでいると(ローマ字入力)下の画像のように文字が上下に揺れてしまうという症状がMac OS X 標準のSafariに存在します。

気にしない人は全く気にならないようですが、そうでない人にとっては結構鬱陶しいもの。

この症状だけを理由に、やむを得ず他社ブラウザを使っている、あるいは乗り換えを検討されている方は以下の方法を試されてはいかがでしょうか?とても簡単な事で小さくて大きなストレスから開放されますよ♪

  1. Mac OS X 標準の"テキストエディット"で新規書類を開きます
    環境設定で新規書類のフォーマットを[標準テキスト]形式に変更してから新規書類を開いて下さい
  2. 次の1行(スタイルシート:CSS)を記述します(面倒ならコピペ)
    textarea{font-family:HiraKakuPro-W3 !important;}
  3. [任意の名称.css](例:style.css)として任意の場所(書類フォルダを推奨)に保存:ファイル名は全て半角英数
  4. Safariメニュー>環境設定...>詳細 を開き...
    スタイルシートのプルダウンメニューから[その他...]を選び、先の手順で保存した書類(例:style.css)を指示
  5. 一応、Safariを再起動

これで完了です。

この例ではMac OS X標準フォントの"ヒラギノ角ゴシックPro W3"を指示していますが、"ヒラギノ丸ゴシックPro W4"などほかの日本語フォントでも同様の効果が期待できます。

CSSをご存知であればもっと細かなチューニングを施すと、より使い易い状態に出来ると思いますので試してみて下さい。(My Yahoo!の初期画面だけフォントが小さすぎるとか、同Mailの等幅フォントがきれいに並ばないのも同じ要領でチューニングできます:CSSに自信が無い人は勉強してから挑戦しましょう)

# このエントリは旧ブログからインポートしたものです、一部リンク切れしている場合があります

# 2019年4月11日、本文体裁修正