Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ(44) 編集画面の読込み時の崩れ対策

2017年 08月 03日
編集画面が読み込まれる際に、一番待たされるのは画像パレットです。 これは、画像サーバーのデータをiframe内に呼び出しているための遅延で、致し方ありません。 またこの遅延は、画像パレット部が空白となるだけで、気にせず編集を始める事も可能です。

一方、編集枠が長い時で1secほど上にズレた状態で、画面の下部が崩れた様に見えるのが気になります。

a0349576_12190215.png

この状態を調べると、下図の様に編集アイコンパネルの読込みが遅れているのが原因の様です。

a0349576_12202480.png

下部の投稿オプションボタン群は、「position: absolute」の絶対位置指定を使う様になったので、よけいに乱れて見える様です。 私のアレンジが原因かと思い元の編集画面を調べると、やはり同じ読込み遅延後にガクッともっと大きく下方にズレます。 デザインがアバウトで気になりにくいのです。



これは表示品位の問題で、改善の方法を考えました。 下は Chromeの Developer Tools(検証メニュー)でこの部分の要素を表示したところです。

a0349576_12322378.png

編集アイコンパネルの2項(▶を単位として)が遅延の元で、赤い範囲が最初にズレます。 遅延要素が後から表示されても、前後の配置が変わらない様に配置指定をすれば、乱れを見せる事がなくなるはずです。

そこで目をつけたのが上の赤印の項、これはパネルに表示される「プレビューボタン」です。 私はとっくに非表示にしていますが、これを非表示の介在物に仕立てて、赤枠以降がアイコンパネルが無くても定位置に配置される様にします。

このボタンの要素「.entryPreview.btn-s」は、元は「position: absolute;」指定で、これでは場所取りにならないので「position: relative;」に指定しなおします。 高さはアイコンパネルと同じに指定し、表示されると邪魔になるので「opacity: 0;」で見えなくします。

#entryEditContents .entryPreview.btn-s {
display: block;
position: relative;
height: 32px;
opacity: 0; }

a0349576_13224615.png

これで実際に読込んでみると、下図の様になります。

a0349576_13360172.png

編集モードのボタンは「position: absolute;」指定で配置されているので、最初から正しい位置に納まりますが、編集アイコンの方は「position: relative;」指定で配置されていました。 見えない「プレビューボタン」の下端(黄緑の線)がこの編集アイコンの配置基準になっています。

問題は、この編集アイコンの表示が無い(読込み遅延)時も、有る時も、周囲の配置に影響が無ければ良いので、編集アイコン自身の高さをマイナスマージンで相殺する配置方法を使います。

これは簡単です。

#_panel {
height: 32px;
margin-top: -32px; }


実は「#_panel」を「absolute」指定に変えて、自らの高さの影響を無くす方法もあります。 しかし、編集アイコンは、この要素の中に「.panelBtn」として「position: absolute;」で配置されていて、親要素の「relative → absolute」の変更が影響して、それをまた修復する手間がかかりそうなので、この簡単な方法を採りました。

以上で実に綺麗な読込み時の状態が得られました。 編集アイコンが右方向にフラッシュ表示され最高です。

ただ、2行アイコンオプションにこの変更の影響がでました。 オプションの変更は困難でなく、ついでにhover時の高さを増して75pxに改めました。 編集アイコンが素早く反応しすぎるとタイトル行やタグ選択などがしづらくなるので、delayをかけています。

/* 2行編集アイコン ワイド 表示オプション */

#_panel:hover {
height: 75px;
margin-top: -75px;
transition-delay: 0.2s; }

下図は、2行編集アイコンを開いた時の様子です。 上側の入力枠をみんな隠したので、こちらの方がすっきりします。

a0349576_14063386.png

これらの改善は、Chrome版 IE11版 のMore拡張 ver.3に組み込み済みです。




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



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

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