Studio TA Subsite の案内とお知らせ

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

2017年 08月 24日
IE11版の最下段レイアウトは、Chrome版の「マイブログ」ボタンが無いだけの状態までシンクロさせます。 3種ボタンの間隔は、少しだけ拡げてChrome版と同じとし、「プレビュー」「公開」「下書き保存」のボタンをChrome版のデザインと同様にしました。

これまでのIE11版です。

a0349576_09593072.png

大変に細かな話ですが、Chrome版では「公開」ボタン群は擬似立体的なデザインにしていました。 IE11版もこのデザインに合せました。 下はアレンジ後です。

a0349576_10011908.png

立体的な印象を与えるために、ボタンの背景色に「linear-gradient」というグラデエーションを表示する指定を使っています。 公式スキンのコメントボタンに利用され、エキサイトユーザーには見慣れたものでしょう。 これは、画像を使わずにCSSだけでボタンの立体感を演出する、最近は一般的になった手法です。

下は、青い「送信」ボタンの背景色指定です。(白いボタンも同様の効果を着けています)

.page_entry .btn-blue {
background: linear-gradient(to bottom, #0e9de4 0%,#2679ce 100%) !important; }

.page_entry .btn-blue:hover {
background: #1b83ed !important; }

単純な配色に比べ「値」の記述が長くなりますが、たいしたことはありません。 微妙な指定色の違いで立体感が変わるので、この部分の色指定はChromeのDevToolsが役に立ちます。

2項目は、ボタンにマウスが乗った場合の配色で、これはエキサイトのデフォルト指定です。 IE11版の場合はユーザースタイルシートの働きがChromeと違い、背景色に「!important」を指定するためか、2項目を指定しないとフォバー時に色が変わらなくなります。 これはChrome版には不要な項です。

ちなみにこの公開ボタンは、エキサイトのデフォルトでキャプション文字に彫り込みが指定されています。 これらは、さりげなくクールに見せる努力です。



Chrome版(56)IE11版(57)の修正は、各 More拡張 ver.4 に追加します。




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



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

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