人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

どうも気になる「送信」スイッチ

2015年 05月 21日
戻って来た同ウインドウ表示方式のコメント欄。 以前のものはアレンジしてウインドウ幅対応にしていたので、私のは余り変化がないのですが...

このコメント欄の「送信」スイッチは、デフォルトデザインがどうも気になります。 Chrome ではあまり気になりませんが...
どうも気になる「送信」スイッチ_b0174191_13572202.png
ここのフォントは漢字だと判りませんが「Meiryo UI」が選択されています。(これは「input」要素のタイトルだからでしょう) DOMを使用してHtmlで文字を追加すると、ひらがなやカタカナは縦長です。
どうも気になる「送信」スイッチ_b0174191_13574409.png
他ブラウザ等で予期しない結果とならない様に、ここの指定は親要素のフォントを「inherit」し(基本はMeiryoにしています)、サイズも親要素と同じ「1em」とします。
どうも気になる「送信」スイッチ_b0174191_14184719.png
僅か文字が大きくなりましたが、IEでは太字「bold」指定が裏目に出て美しくありません。(横線はまばらで、縦線のみ太っている) 「font-weight」に「normal」指定。 また「letter-spacing」値を「0.2em」として、文字の間隔を少し拡げました。
どうも気になる「送信」スイッチ_b0174191_14312079.png
最後の3行で、文字位置の上方へのズレ修正と、スイッチの縦幅調整(トラバ欄スイッチに合わせてます)と、文字色指定をしています。
どうも気になる「送信」スイッチ_b0174191_14392410.png
以上の調節を纏めたCSSが以下です。

.COMMENT input[type='submit'] {
font-family: inherit;
font-size: 1em !important;
font-weight: normal;
letter-spacing: 0.2em;
height: 2em;
line-height: 2em;
color: #0080c0; }

少しはマシになったでしょうか? 「漢字」はフォントとしては大変に扱い難い種類ですね。 これが「英数字」だと殆ど苦労はないのですが。



by Ataron | 2015-05-21 14:43 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。