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

エキサイト編集画面のアレンジ(64) Firefox版 の準備中

2017年 09月 14日
今まで、ChromeとIE11のブラウザを使い、それぞれのブラウザ環境でブログ編集画面をアレンジして来ました。 アレンジを始めたのが 2016年5月で、色々とやったなぁという思い。 しかし最近は、この作業も熟成期を迎えた感があり、新しい進展に飢えて来ました。 そこで、ブラウザ環境を増やす事に。 ChromeとIE11ユーザー以外で、エキサイト編集画面のアレンジを求める人が居るかも知れないですから。

ネットで調べると、PCの最近のブラウザシェアは、Chrome・IE11に続き Firefoxが善戦している様で、世界的には FirefoxがIE11を抜いた様です。

エキサイト編集画面のアレンジ(64) Firefox版 の準備中_a0349576_00001395.png

という事で、Firefoxをインストールしました。 ひと昔前のブラウザ追加では、コンフリクトを避けてテスト環境用のOSをセットアップしたでしょう。 現在のOSは大変に安定していて、ブラウザなんぞ幾つインストールしても全く平気、それもあっと言う間にインストールが終わりました。

早速 Firefoxを使ってみましたが、Chromeと余り変わる所は感じられません。 もちろん、色々な部分に特徴があるのでしょうが。



続いて、ユーザースタイルシート環境を造りました。 これは下調べしていた「Stylus」というFirefox専用の拡張機能(アドオン)をセット。「Stylus」は商用化を強めた「Stylish」を嫌い、有志が新しく派生させた拡張機能のβ版で、問題なく使えました。 多国言語に対応していて、とても立派な編纂チームと思います。

現在、この環境でChrome版のスタイルシートを適用して、Firefox版の編集画面のアレンジを試行したところ、以下の点が環境差として確認され、スタイルシートを Firefox用に修正しました。


●編集アイコンの「::after」指定が配置ズレする。「word-wrap」「word-break」指定が「user agent stylesheet」で指定されていて、Chromeと異なるため。 このリセットができず、アイコンごとの配置指定の変更で対処。 5ヵ所で数は少ない。

/* 基本CSS 編集アイコン */

#exbtn_fontcolor::after {
content: "\f031";
font: 16px /23px FontAwesome;
color: deepskyblue;
position: relative;
z-index: -1;
top: -23px; /* Fox 修正 */
left: 5px; } /* Fox 修正 */

#exbtn_hr::after {
content: "_";
font: 24px /12px Tahoma;
position: relative;
top: -30px; /* Fox 修正 */
left: 4px; } /* Fox 修正 */

#exbtn_map::after {
content: "MAP";
font: 10px /22px Tahoma;
position: relative;
top: -22px; /* Fox 修正 */
left: 1px; /* Fox 修正 */
white-space: nowrap; }

exbtn_undo::after {
content: "U";
font: bold 12px /12px Tahoma;
position: relative;
top: -17px; /* Fox 修正 */
left: 2px; } /* Fox 修正 */

#exbtn_redo::after {
content: "R";
font: bold 12px /12px Tahoma;
position: relative;
top: -17px; /* Fox 修正 */
left: 10px; } /* Fox 修正 */


●input要素のボタンデザインが合わない。

エキサイト編集画面のアレンジ(64) Firefox版 の準備中_a0349576_00533391.png

これはIE11版でも同様で、ブラウザのデフォルトボタンは変に硬く暗い。「-moz-appearance」という指定でボタンを消し、場所によってはWebフォントでマークを作ってアレンジ。

/* 基本CSS */

body.win select {
height: 28px;
padding: 3px 5px 0;
font-size: 1.3rem;
-moz-appearance: none; } /* Fox 追加 */


#entryTemplateList select {
opacity: 0; } /* Fox 追加 */

#entryTemplateList select:focus {
opacity: 1; } /* Fox 追加 */

#entryTemplateList::before { /* Fox 追加項 */
content: "\f0d7";
font-family: FontAwesome;
color: #000;
position: absolute;
padding: 6px 5px;
background: aliceblue;
border: 1px solid #ccc;
border-radius: 3px; }


/* 画像パレットCSS */

#partsImage .optionGroup::before { /* Fox 追加項 */
content: "\f0d7";
font-family: FontAwesome;
position: absolute;
right: 50px;
top: 167px;
height: 0px;
z-index: 1; }

#search .optionGroup select {
position: absolute;
left: 5px;
padding: 0 15px 0 10px; /* Fox 追加 */
height: 28px; /* Fox 追加 */
width: 120px; /* Fox 追加 */
-moz-appearance: none; } /* Fox 追加 */


/* テンプレートCSS */

#editTemplateList select {
opacity: 0; } /* Fox 追加 */

#editTemplateList select:hover {
opacity: 1; } /* Fox 追加 */

#editTemplateList::before { /* Fox 追加項 */
content: "\f0d7";
font-family: FontAwesome;
color: #000;
position: absolute;
padding: 6px 6px;
background: aliceblue;
border: 1px solid #ccc;
border-radius: 3px;
left: 400px; }


●input要素のチェックボックス・ラジオボタンが固定サイズで、画面拡大に応じない。 下部の投稿設定ボタン群で、拡大率大の時にマスキング幅が不足して次のボタンが露出する。 下図は200%拡大時。

エキサイト編集画面のアレンジ(64) Firefox版 の準備中_a0349576_09544239.png

ChromeやIE11はボタンが画面拡大に応じて拡大し、これは Firefox独特の仕様。

エキサイト編集画面のアレンジ(64) Firefox版 の準備中_a0349576_09570996.png

チェックボックス・ラジオボタンの幅を指定して擬似的に対処。

/* 基本CSS */

body.win input[type="radio"], body.win input[type="checkbox"] {
margin: 0 5px 2px 0px;
height: 100%;
width: 13px; } /* Fox 追加 */


●画像パレット部に、編集画面の起動時にCSSが適用されない。
  ▪パレットの月選択の変更で、画像の読込みをさせる
  ▪何かの画像をパレットにドロップして追加する
等の操作を一度行うと、iframeがリロードされるためか、画像パレットCSSが反映して、以降は正常になる。

エキサイト編集画面のアレンジ(64) Firefox版 の準備中_a0349576_10543721.png

編集画面の起動時にCSSをロードさせたいが、現在のところ対策が見つからない。 これが一番の問題です。



他の部分は、Chrome版のコードが Firefox版にそのまま使用出来ました。 ユーザースタイルシートは、今回の移植で判る様に、かなりの汎用性があると思われます。




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



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

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