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

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する

2017年 08月 01日
「タグ選択枠」は、IE11版で以前より気になっていた部分で、ユーザースタイルシートの導入時の最初に崩れる事があります。 アレンジ機能を導入したばかりの時、編集画面を表示するとこの部分が崩れ、編集画面を一度リロードすると正常になります。 以降はキャッシュ機能が働くのか、何の問題もないが気になります。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_12121757.png

崩れを再現するには、基本CSSをリネームして、ユーザースタイルシートの設定を変更すると、最回の表示だけ躓く様です。 これはChromeでは生じず、ブラウザの微細な機能に関係している様に思えます。



この部分のDOMで調べると、下の様になっています。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_12132055.png

「#entryEditTags」というブロックの中に「#tagCombo(システム要素で非表示で無関係)」と「.entryElement」があり、後者の中にタグ選択枠の本体「.tags」が、仲良く3個並んでいます。 最後の「.btn-s」はヘルプボタンで(私は非表示に設定)これも無関係です。

上図の右枠で「#entryEditTags」の「width: 455px;」となっていますが、この幅は下の様に、「.tags」を並べるために余白を持たせた値です。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_12260624.png

ここで「.tags」を調べると「width:147px;」「float:left;」となっています。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_12264909.png

147×3=441px の幅が最低必要と計算されますが、floatの指定は曲者です。 これは「横整列」に良く使われる指定で、入れ物の幅が不足すると崩れます。 もし「#entryEditTags」に幅指定が無いと3つは縦並びに崩れるし、「width:auto;」を指定しても広がってくれません。 どうしても実際の幅を指定してやる必要があるらしい。

「#entryEditTags」の幅を縮めていくと、計算通り「440px」で崩れるのが判ります。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_12340695.png

理屈では「441px」にすれば崩れないはずですが、導入の最初の崩れは原因が判りません。 タグ選択枠は選択肢表示のシステムが働いたり複雑です。「.tags」の幅はユーザースタイルシートの指定ですが、これでは納まらないと一旦判断される様にも見えます。

「余白」を多めに設定すると崩れが生じない様子で、良く判らないまま「472px」などと設定していました。 しかしここは狭くて、余白の中に他の要素(テンプレート選択ボタン)が入って来ます。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_12481942.png

余白が被ると、このテンプレートボタンが押せなくなり「z-index」を指定して回避するなど、なにかと苦労していました。



そこで、このタグ設定枠を改善。 最近覚えた floatに代わる「display: flex」のテクニックです。 ネットを調べると、要素の横整列は色々な方法がある様ですが、この「flex」はとても使い易く、覚えておいて損のない指定方法です。

ここの例では「.tags」を囲っている単なる纏めブロック「.entryElement」にこれを指定するだけで、綺麗に内部の「.tags」が横整列してくれます。 元の指定の「float: left;」は無視される様で、取り消す必要もありません。
下は、DOMで右枠に「display: flex;」を書き込んで指定したところです。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_13324499.png

この結果、下図の様に「.tags」が横並びになります。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_13400736.png

この時に注意するのは、「#entryEditTags」の幅指定を無くしておくことです。「#entryEditTags」は自動的に内部を納める最小の幅になります。 もし、大きめの幅を指定したままだと以前の通りに余白になり、小さければ floatとはまた異なる崩れ方をします。

これで、右隣のテンプレートボタンは表に出て来ます。 これが無理がない配置なのは言うまでもありません。「float」で困ったら「flex」を思い出してください。



この改善は、ユーザーが編集ウインドウ全体の幅を狭めた場合に、どこでウインドウの横スクロールバーが出て来るかに関わってきます。

下図はウインドウを狭めて行く過程を表していますが、左側は理想的な状態です。
▪「おすすめブログテーマ」が表示されている場合は、①までウインドウを狭めた時に横スクロールバーが出る。
▪その表示が無いか非表示にしている場合、テンプレートボタンの➁まで狭めた時に横スクロールバーが出る。
▪再編集時など、テンプレートボタンも無い場合は、➂のタグ選択枠まで狭めた時に横スクロールバーが出る。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_14570464.png

この様にできれば、ユーザーは横幅が理想的にコンパクトな編集環境を使えます。 しかし右側の様に、タグ選択枠に余白があると、テンプレートボタンが無い時でも、ウインドウを狭めると④の余白の位置で、横スクロールバーが出てしまいます。 小さな事ですが、この余白の幅だけコンパクトさが損なわれるのです。

ユーザーは余り気付かないのですが、一般にウインドウ内の表示物には、幅最小値、幅最大値等を指定して、ウインドウの横スクロールバーの出方をコントロールし、ユーザーが使い易い様に計らいます。 この編集枠は、拡大表示や小型スクリーンでも使い易い様に、なるべく幅を狭められる様にしています。

この編集画面のアレンジでは、編集画面の全体のベースになっている「#wrapper」という要素に、最小横幅を指定しています。 全体のベースの中に各種のパーツが配置され、編集枠を横に拡げればベースは横に拡がります。 エキサイトが「おすすめブログテーマ」をインポーズ配置すると、その分だけベースも拡がります。

このベース「#wrapper」に最小横幅「min-width」を指定すると、ユーザーがそれ以下にウインドウ幅を狭め様とすると、横スクロールバーが表示されます。 最小横幅が大きいと、モニターが小型なら頻繁に横スクロールが必要で、不便になります。 最小横幅を小さく指定すれば、ウインドウを狭めてもスクロールバーは出にくくなりますが、しまいに内容物の大きさに行きあたって横スクロールバーが出ます。 つまり、元がコンパクトな編集ウインドウでなければ、「min-width」を小さく出来ません。

下図は、「#wrapper」で「min-width: 960px;」を指定した様子です。

エキサイト編集画面のアレンジ(42) タグ選択枠の崩れを回避する_a0349576_15521941.png

右上部のタグ選択枠、右下部のトラックバック枠の右端を揃えて配置し、ウインドウを狭めて上図の状態になった位置を、最小横幅としています。



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



by Ataron | 2017-08-01 16:25 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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