Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ(56) Chrome版の最下段レイアウトをIE11版に近付ける

2017年 08月 24日
Chrome版とIE11版のデザインの差をなくし、なるべく同一コードに揃える作業を進めています。 今回は最下段の修正です。

下図はIE11版です。

a0349576_22504320.png

IE11版は「マイブログ」ボタンが作れず、これはChrome版だけのものです。「キャンペーン」「みんなの投稿」「お知らせリスト」のボタンは、IE11版の左端寄せの方が良い配置と感じているので、Chrome版はそれに合せ、左端の「マイブログ」ボタンを右に寄せて入れ替える事にしました。

下図は、配置変更後のChrome版です。

a0349576_22515818.png

Chrome版の修正作業は簡単で、「3種」ボタンは各左margin値、「マイブログ」ボタンはleft値の調整だけで済みます。

.campaign-container {
margin: 0 0 25px 0px; }

#blog2media {
margin: 0 0 25px 30px; }

#announceList {
margin: 0 0 25px 60px; }

#myblogBtn {
left: 120px;
width: calc(6.8em + 23px); }

#myblogBtn a {
padding: 0 5px; }




下の2項は「マイブログ」ボタンの幅を少しコンパクトにするものです。「マイブログ」ボタンの実際のキャプションは「マイブログを見る」です。 この最後の3文字を隠して、ボタンを短くしています。

Chromeは基本文字サイズ変更を設定メニューの奥に置き、標準(中)サイズでの使用を推奨しています。 これは、許容力のないサイトが、文字サイズ変更で表示崩れを起こすのを減らすためでしょう。 大きく見たい場合は、画面全体のズームを勧めているわけです。 しかし、文字サイズが簡単に変えられるIE11版に対応して、私はフォントサイズの「小」「中」「大」までは最低限崩れないアレンジをしています。

「マイブログ」ボタンのキャプションは、Chromeの設定で文字サイズが変わります。 キャプションの一部を隠して、文字サイズが変更されても、同様なマスキングを維持するためには、ボタン幅をフォントサイズ(em)で比例させる工夫が必要です。

ボタン幅固定や適当な幅設計にすると、文字サイズ変更でキャプションの一部が欠けたり、逆に隠していた文字が露出します。

a0349576_23072580.png

上記コード枠の4項目の「width: calc(6.8em + 23px); 」の指定は、文字サイズに比例した幅を「calc」を使って指定しています。 この計算式は、下図の読み取りから導いたものです。(絵文字幅は1.8rem=1.8emです)

a0349576_23133555.png

これはとても上手く働き、Chromeの文字サイズ「極小~極大」の全てで、同じキャプション表示を実現出来ました。

a0349576_23135636.png

3種ボタンはキャプションのフォントサイズを固定した方が良いですが、一応納まっているので拘っていません。




この記事はカテゴリ「スキン編集」にトラックバックしています。



[PR]
by Ataron | 2017-08-24 07:58 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/27068353
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

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