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

エキサイト編集画面のアレンジ(48) トラックバック編集画面

2017年 08月 08日
「ドラックバックカテゴリー」のページで「このテーマで記事を書く」のボタンを押すと、自動的に編集画面がポップアップしてトラックバック原稿の編集状態になります。 システムに導かれて編集ウインドウが生成されるのですが、この編集画面は独特です。

エキサイト編集画面のアレンジ(48) トラックバック編集画面_a0349576_08130100.png

編集画面のアレンジのがそのまま効くのですが、遠慮がちに横幅の最小値指定のない狭い状態で起動します。(最小値指定が効いていれば編集アイコンは隠れないので) ブラウザウインドウに違いないのですが、タブがありません。 URLが「http://userconf.exblog.jp/entry/bookmarklet/」で通常の編集画面の「exblog.jp/entry/」のサブディレクトリなので、編集画面のアレンジは効いているのです。(Chromeでアクセスしていますが、IE11でも同様)

生成時のウインドウ幅はCSSでは指定出来ません。 せいぜい失われた「min-width」を、この画面のwrapperを探して追加してやるぐらいで、ウインドウ幅は手作業で拡げるしかありません。

それは良いとして、「どこまでウインドウを拡げても、横スクロールバーが消えない」問題が気になります。 これは、CSSを扱っていると時々遭遇する不具合で、縦バーも横バーの場合もあります。 原因が判らず、あるいは判っても解決出来ず、とても苦労することがあります。

エキサイト編集画面のアレンジ(48) トラックバック編集画面_a0349576_08474750.png

私が慣れて来たのか、今回のは簡単だったのか判りませんが、以下の様に解決出来ました。



「何かが横にはみ出している」のは確かで、先ずこれを探しました。 DevToolsを起動して、その左ウインドウでマウスポインターを動かして、要素の占有範囲を順に表示させて行きます。

エキサイト編集画面のアレンジ(48) トラックバック編集画面_a0349576_08492856.png

各要素の本体とmarginとpaddingがChromeのウインドウに表示されますが、右方向へ飛び出しているものを探すわけです。

今回は簡単に見つかりました。 編集画面の最下段の「公開」ボタンです。

エキサイト編集画面のアレンジ(48) トラックバック編集画面_a0349576_08554220.png

横はみ出しの原因は「width:100%」を指定している場合が多く、今回もそれでした。 この指定は、「公開」ボタンの配置のやりくり中に、「プレビュー・公開・下書き保存」が縦に崩れたので、その場しのぎで指定した記憶があります。

#entrySubmitBtm {
width: 100%;
border: none;
padding: 0;
margin: 0px 0px 25px 35px; }

既に縦崩れの問題はクリアーしていて「width:100%;」を外しても何の問題もありません。 また「margin: 0px 0px 25px 35px;」の左マージン35pxが、右へのはみ出しを作っていて、こちらが原因とも言えます。 これは、この画面には出ていないのですが、「お知らせリスト」のボタンの設置時に指定したものです。 新設のボタン群に「プレビュー」ボタンが被さるので、右に寄せるための指定でした。

「width: 100%;」を外すだけで、下の様にはみ出し問題は無事解決しました。

エキサイト編集画面のアレンジ(48) トラックバック編集画面_a0349576_09155706.png

この時、widthは自動的に少し狭くなり、「公開」ボタン群も左に少し移動しました。「お知らせリスト」のボタンに重ならない様に、「margin: 0px 0px 25px 80px;」とついでに改めることにしました。 この横寄せはChrome版の編集画面だけで、IE11版は問題なしです。




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



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

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