今まで、ChromeとIE11のブラウザを使い、それぞれのブラウザ環境でブログ編集画面をアレンジして来ました。 アレンジを始めたのが 2016年5月で、色々とやったなぁという思い。 しかし最近は、この作業も熟成期を迎えた感があり、新しい進展に飢えて来ました。 そこで、ブラウザ環境を増やす事に。 ChromeとIE11ユーザー以外で、エキサイト編集画面のアレンジを求める人が居るかも知れないですから。
ネットで調べると、PCの最近のブラウザシェアは、Chrome・IE11に続き Firefoxが善戦している様で、世界的には FirefoxがIE11を抜いた様です。
という事で、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要素のボタンデザインが合わない。
これは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%拡大時。
ChromeやIE11はボタンが画面拡大に応じて拡大し、これは Firefox独特の仕様。
チェックボックス・ラジオボタンの幅を指定して擬似的に対処。
/* 基本CSS */
body.win input[type="radio"], body.win input[type="checkbox"] {
margin: 0 5px 2px 0px;
height: 100%;
width: 13px; } /* Fox 追加 */
●画像パレット部に、編集画面の起動時にCSSが適用されない。
▪パレットの月選択の変更で、画像の読込みをさせる
▪何かの画像をパレットにドロップして追加する
等の操作を一度行うと、iframeがリロードされるためか、画像パレットCSSが反映して、以降は正常になる。
編集画面の起動時にCSSをロードさせたいが、現在のところ対策が見つからない。 これが一番の問題です。
+
他の部分は、Chrome版のコードが Firefox版にそのまま使用出来ました。 ユーザースタイルシートは、今回の移植で判る様に、かなりの汎用性があると思われます。
+
この記事はカテゴリ「
スキン編集」にトラックバックしています。