Studio TA Subsite の案内とお知らせ

カテゴリ:ブログスキンのアレンジ( 263 )

エキサイト編集画面のアレンジ(67)「おすすめブログテーマ」の配置移動

2017年 09月 19日
「おすすめブログテーマ」の配置は最上行の右端で、これは「新規作成」の時にのみ表示されます。 その左の「テンプレート選択」ボタンも、やはり投稿の「新規作成」時のみに表示されます。 この2個の表示で「新規作成」の場合だけ、編集画面のウインドウ幅が広くなります。 これは実際の使用の多くの場合に、余計な幅をかかえる事になります。

a0349576_23391140.png

それ故、この機能を常時OFFに出来るオプションを作っていましたが、幅をとらずに常時表示のままがベストです。 余り複雑な操作を好まないユーザーが、デフォルトでこの環境のコンパクトさを損なうのは、本意ではありません。

で見渡したところ、最下段の「公開」スイッチ群の右端が、候補地になりました。

a0349576_22355392.png

フォバー時は、本文の編集枠内に拡張する案も試しましたが、「公開設定」と「画像パレット」が被さり、これを下に廻す変更をすると、そこらじゅうの「z-index」の収拾がつかなくなりました。 それで、少し表示が狭いですが、下の様な拡張の形にしました。 これは「z-index」を触らずに実現できます。

a0349576_22415712.png

同時に「公開」ボタン群が「おすすめブログテーマ」のボタンの右に行かない様に「max-width」を指定し、他にも細かい部分修正をしています。 以下の太字部が、今回の Chrome-More拡張 ver.5 の修正内容です。 IE版・Firefox版も同様の修正を行います。(いずれも基本CSS)

#wrapper {
margin-bottom: 5px; }

#trb_themeTtl {
position: absolute;
top: 714px;
left: 850px;
margin: 0;
padding: 2px 0px 2px 8px;
width: 69px;
height: 36px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
transition: 0.5s; }

#trb_themeTtl:hover {
top: 670px;
left: 700px;
padding: 5px 10px;
width: 207px;
height: 74px; }

#entrySubmitBtm {
margin: 15px 0 0 25px;
max-width: 1130px; }

#entryEditWrap .alert {
left: 325px; }

#entryMoreText .alert {
left: 310px; }




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


[PR]
by Ataron | 2017-09-19 23:25 | ブログスキンのアレンジ | Comments(0)

ユーザースタイルシート環境の現状

2017年 09月 19日
この1~2週、Firefoxの導入から始まり、Firefox版のユーザースタイルシート環境で「Stylus」に出会いました。 かねがね「Stylish」というのが、IE以外のブラウザでは定番だった様子だったので、その系譜の「Stylus」は大いに興味があり、ようやく私もスタンダードな世界の仲間入りをした気分でした。

また、編集画面のアレンジコードを、他の環境で試すのはChrome以来で、ChromeとIEは同時進行で構築していたので、実際は初めてという感じでした。 スリリングな経過でしたが、予想以上にすんなりとFirefoxでもアレンジが働き、80点の成績といったところ。 ただし、「Firefox + Stylus」の環境では、画像パレットにアレンジ抜きで編集画面が起動してしまう問題が残りました。

a0349576_15372967.jpg



「iframe」は、HTML上で問題を生じ易い機能という印象がありますが、はたしてどうなのでしょう。 私の未熟さで、Chrome版が1年近くも画像パレットのアレンジが出来なかったのだけど、最初にこの問題にぶつかった時に、相当ネット上を調べてまわりました。 その際に、「iframeにCSSが効かない」というキーワードに何度か出会い、良く判らないままに「そう言うものなのか」と半分思ってしまいました。 しかしなんのことはない、呼び込まれるiframeのURL指定でユーザースタイルシートを設定したら、画像パレットにアレンジが適応されました。

自分も深く判っていない状態では、ネット上に同様の問題に出会って解決した事例がないと、なかなか先に進めないものです。



「StylusのChrome版」をテストしましたが、こちらではFirefoxの問題は生じませんでした。 万歳です。 当たり前なのかも知れませんが、Chromeという環境で「Stylist」という拡張機能をベースにして作ったスキンは、完璧に「Stylus」で動作しました。

Chrome + Stylist Chrome版 ◎
Chrome + Stylus Chrome版 ◎

Firefox + Stylus Firefox版(Beta)▲  Stylusは 2017年11月に予定される Firefox 57 に適合。
Firefox + Stylish Firefox版 ○     但し、Stylishは Firefox 57の基準に不適合、11月以降の動作は不明。

問題は「iframe」の画像パレットだけです。 小さな部分でブラウザの差異は出るが、決定的な問題にならないものでした。 4種の組み合わせで、Firefox版「Stylus」だけが問題有りという事で、その解決が期待されます。

そして、長い間お世話になった「Stylist」は今後もフォローする考えですが、Chrome版「Stylus」が全く無問題であった事から、今後は「Stylus」ベースでメンテナンスや開発を継続するつもりです。



「Stylus」を使う事によって、ひとつの新しい展開が可能になった事に気付きました。

「Stylus」は、ネット上にアップロードされたスタイルをワンクリックでインポートできるのです。「Stylus」用のスタイルのアップロード・ダウンロードサイトは「userstyles.org」というサイトです。

ここで「Stylus」で検索すると、以下の様に多数のスタイル(Themes & Skins)が登録されています。 多くは Googleの検索トップ画面や YouTybeのサイト画面のテーマ、あるいは拡張機能 Stylus自身の画面のスキンだったりします。

a0349576_20313456.png

このサイトは、本来は「Stylish」のために作られたサイトの様で、ユーザーが作ったユーザースタイルシートを投稿し、他のユーザーがその一覧からスタイルをダウンロードするといった、ユーザーの作業によって成り立っているサイトです。 本来「スタイルのCSS」はスクリプトを含まず安全性は高いのですが、投稿データにはセキュリティ審査をしている様です。

「Stylus」の管理画面には、この「userstyles.org」を直接開くスイッチがあり、私がここにデータを登録すれば、「Stylus」の管理画面に、エキサイト編集画面のアレンジスタイルを、簡単に直接インポートできる様になります。

a0349576_21101718.png

現在の手作業のCSSコピーより、これは簡単に間違いなくセットアップが可能になるでしょう。 現在、このサイトへのアップロードを用意している所で、審査を通れば、いずれ報告したいと思います。




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



[PR]
by Ataron | 2017-09-19 21:35 | ブログスキンのアレンジ | Comments(0)

エキサイト編集画面のアレンジ / Stylus の導入と設定方法(簡易版): Chrome版

2017年 09月 18日
 拡張機能「Stylus」を Chromeに導入する 

Chromeで以下のリンクをクリックし、Chrome拡張機能の管理サイトの「Stylus」のページを開きます。

下図のページが表示されたら、ページ上の「 CHROMEに追加」を押します。

a0349576_14023058.png

下の様に確認のダイアログが出て「拡張機能を追加」を押すと、Chromeのツールバーの右端に「Stylusアイコン」が出来ます。

a0349576_14030306.png

ページがStylusのサイトに変わりますが、これで導入は完了です。 アイコンが出来たら自分のページに戻ります。
「Stylusアイコン」を左クリックして、メニューの「管理」を押します。 これが「Stylus」の起動方法です。

a0349576_10482222.png

「管理画面」が表示され、操作はここを中心に行います。 下図は初期状態で右側が空白ですが、スタイルを登録すると、登録スタイルのリストが表示されます。

a0349576_11012697.png



 スタイルの編集と登録 


 スタイルの編集 


上図の「新しいスタイルを作成」を押し、「スタイル編集」の画面を開きます。

a0349576_23201835.png

上図の3ヵ所は、スタイル登録の要点です。

スタイル名(任意の名前を付けます)
適応先(スタイルを適応するURLの範囲指定)
CSSコード


 適応先の個別指定 

上図の 「適応先」 は「すべて」と設定しています。 しかし実際は、無関係なサイトへの誤適応を避けるため、範囲を限定するのが普通です。

限定した適応先を設定するには、 の「個別指定」を押します。 これで、2個の枠と「削除」「追加」のボタンが表示されます。

a0349576_00053760.png

「適応先」の範囲は ❹ ❺ の組み合わせで決まります。
はURLの入力枠です。(「半角空白」や「/」「.」が意味を持つので正確な入力が必要です)
をクリックして4種の指定形式から選択します。(判らない時は「次で始まるURL」が無難です)

a0349576_00054276.png

のボタンで「適応先」を削除・追加できます。「追加」を押すと、下の様に新しい適応先の行が追加されます。

a0349576_00054967.png

行ごとに1つの範囲を指定しますが、左側 の指定形式は一致している必要はありません。「削除」ボタンは、行単位で「適応先」を削除するものです。


 スタイルの登録 

「編集画面」での編集が出来たら、下図の「保存」 を押します。 これで編集したスタイルが登録され、その時点で働き始めます。

a0349576_07252409.png

保存で「編集画面」が閉じないのは、このエディタの仕様です。「編集画面」が不要になった場合は、ブラウザのタブを閉じます。 また、「管理画面」に戻りたい場合は「管理画面に戻る」 を押します。



 登録スタイルのリスト操作 

「保存」したスタイルは「管理画面」の登録スタイルのリストに並びます。 このリスト上の操作で、全ての登録スタイルを管理します。

a0349576_22225150.png

「チェックボックス」「スタイル名」「×
 ▪「チェックボックス」は、スタイルの有効・無効化を切り替えます。
 ▪「スタイル名」をクリックすると、そのスタイルを編集する「編集画面」が開きます。
 ▪「×」は、そのスタイルを削除するスイッチです。 バックアップが無い場合は永久に失われます。
 ▪右側のファビコンと適応先URLは、単なるデータ表示です。




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



[PR]
by Ataron | 2017-09-18 13:47 | ブログスキンのアレンジ | Comments(0)

Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境

2017年 09月 18日
Chrome拡張機能「Stylus」の導入や「アイコン機能メニュー」の操作などについては、以下を参照ください。 このページは「Stylus」の使用方法(1)の続きです。


下は「Stylusアイコン」を左クリックして「アイコン機能メニュー」を開いたところです。

a0349576_14285515.png

ここで 「管理」を押すと、下の様な「管理画面」が開きます。

a0349576_05211996.png



 管理画面のメニュー 

「管理画面」はスタイルの登録や管理を行う Stylusのメイン画面です。 赤枠の「新しいスタイルを作成」を押して「編集画面」に入り、スタイルを編集して登録すると、右側のリストに登録スタイルとして追加されます。


 オプション 

「新しい管理UIレイアウト」
右側のリストは新タイプのレイアウトで、多くのスタイルを登録するのに向いています。 チェックを外すと旧タイプになり、登録スタイルの表示が3行になります。

a0349576_21233990.png

「適用先欄のファビコン」
クリックを入れると、新タイプはリストの適応先URLにファビコン(サイトのシンボルアイコン)を表示します。 これは新タイプのみの機能です。 更に「ⓘ」を押すと、ファビコンのカラー/グレーの選択が可能になります。

「オプションUI」は、Stylusのオプション画面を開きます。

「ショートカット」は、拡張機能のショートカット設定画面を開きます。

「テーマ」
このボタンを押すと「userstyles.org」のサイトを開きます。 利用できるStylus自体のスキンデザインが有り、手軽にインストール出来ます。


 バックアップ 

「スタイルをエクスポート」
このボタンを押すと「管理画面」にリストされたスタイルが、纏めて「.json」ファイルとしてバックアップされます。 パックアップ先はWindows10では「ダウンロードフォルダ」です。 バックアップすると「管理画面」のウインドウ下端に「ダウンロード」へのアクセス枠 が表示されます。

「スタイルをインポート」
このボタンは「ダウンロード」フォルダを開きます。 バックアップした「.json」ファイルを開くと、そのファイルに含まれる複数のスタイルがインポートされます。


 登録スタイルのリスト操作 

a0349576_22225150.png

「チェックボックス」「スタイル名」「×
これらは「アイコン機能メニュー」の と同等です。
▪「チェックボックス」は、スタイルの有効・無効化を切り替えます。
▪「スタイル名」をクリックすると、そのスタイルを編集する「編集画面」が開きます。
▪「×」は、そのスタイルを削除するスイッチです。

▪右側のファビコンと適応先URLは、単なるデータ表示です。



 編集画面の操作 


 スタイル編集の要点 

「管理画面」の「新しいスタイルを作成」を押す、リストの「スタイル名」のクリック等で、「編集画面」が開きます。 下はサンプル入力をした状態です。

a0349576_23201835.png

上図の3ヵ所は、スタイルの要点です。

スタイル名(任意の名前を付けます)
適応先(スタイルを適応するURLの範囲指定)
CSSコード


 適応先の個別指定 

上図の 「適応先」 は「すべて」と設定しています。 しかし実際は、無関係なサイトへの誤適応を避けるため、範囲を限定するのが普通です。

限定した適応先を設定するには、 の「個別指定」を押します。 これで、2個の枠と「削除」「追加」のボタンが表示されます。

a0349576_00053760.png

「適応先」の範囲は ❹ ❺ の組み合わせで決まります。
はURLの入力枠です。(「半角空白」や「/」「.」が意味を持つので正確な入力が必要です)
をクリックして4種の指定形式から選択します。(判らない時は「次で始まるURL」が無難です)

a0349576_00054276.png


 指定形式の区別 

URL
これは のURLに完全に一致したページにのみ、スタイルが適応されます。
 ▪ の記述は「http://」「https://」を省略した表記は不適となり、適応されません。

次で始まる URL
前方一致です。 URLの左側からの文字が一致していれば、スタイルが適応されます。
 ▪ の記述は「http://」「https://」を省略すると不適となり、適応されません。
 ▪ の記述の右側は、ドメイン名やサブディレクトリ名の途中で途切れていても構いません。

ドメイン上の URL
の記述がドメイン名(サブドメイン名を含む)として有効なら、そのドメインとサブディレクトリにスタイルが適応されます。
 ▪ の記述に「http://」や、末尾の「/」があるとドメイン名にならず、不適で適応されません。
 ▪サブドメイン名が異なるサブドメインどうしは、別ドメインとして適応されません。
 ▪ドメイン名への指定はそのサブドメインにも適応されますが、その逆は適応されません。

正規表現に一致する URL
これは正規表現検索でフィットするURLに、スタイルを適応します。 一般的でないので、正規表現に関してはネットで調べて下さい。

なお、ドメイン・サブドメイン・サブディレクトリに関しては、以下を参照ください。


 適応先の追加と削除 

のボタンで「適応先」を削除・追加できます。「追加」を押すと、下の様に新しい適応先の行が追加されます。

a0349576_00054967.png

行ごとに1つの範囲を指定しますが、左側 の指定形式は一致している必要はありません。「削除」ボタンは、行単位で「適応先」を削除するものです。


 セクションの追加 

「他のセクションを追加」 を押すと「CSSコード」の編集枠が追加されます。

a0349576_06433230.png

セクション機能は、複数スタイルを1個のスタイル名で登録するもので、それ以上のものではありません。 下図の様にコード1、コード2と幾つでもセクションを増やせます。 また、各セクションは「CSSコード」「適応先」が独立して設定出来ます。 1サイトに対して複数のスタイルを管理する場合など、登録スタイルが増えて来た場合には便利でしょう。

a0349576_07004112.png

ウインドウが縦に長くなり不便な時は、上の様に編集枠の下端をドラッグすると、編集枠の高さを調節できます。 また「セクションを削除」は、追加したセクションをセクション単位で削除するものです。


 スタイルの保存・登録 

「編集画面」で、スタイルの内容に手が加えられると、「保存」 のボタンがグレーから黒に変わります。 新しくスタイルを作った場合は当然ですが、この画面を閉じる場合は、編集内容を保存するか否かを問われます。

「保存」 を押すと、そのスタイルが登録され、その時点で働き始めます。(無効化して保存したい場合は、 の上の「有効」のチェックを外して保存します)

a0349576_07252409.png

保存で「編集画面」が閉じないのは、このエディタの仕様です。「編集画面」が不要になった場合は、ブラウザのタブを閉じます。 また、「管理画面」に戻りたい場合は「管理画面に戻る」 を押します。



 編集画面のオプション・編集環境 

「編集画面」のエディタ本体は高機能なものです。 各種の設定が可能で、本格的な用途に対応できるでしょう。 編集枠の様相は「テーマ」⓳ で選択可能です。 下は黒バックですが、白バックで少し輝度を落としたものもあります。

a0349576_08014190.png

また「管理画面」「編集画面」ともにウインドウ幅を狭めると縦長のレイアウトに変化します。 「オプション」は「▸」で閉じるので、縦長で文字サイズ大は使えそうです。




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



[PR]
by Ataron | 2017-09-18 09:48 | ブログスキンのアレンジ | Comments(0)

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション

2017年 09月 18日
Chrome拡張機能で、ユーザースタイルシート環境の最先鋭となりそうな「Stylus」は、2017年3月に初版が発表された様です。「Stylish」の商用化傾向に抗して、この無垢な拡張機能を編纂したグループに拍手です。 未だ確かな日本語のマニュアルが少ないので、基本的な部分を整理したいと思います。


 「Stylus」をChromeに導入する 

Google Chrome の拡張機能の管理サイトの「Stylus」のページは、以下のリンク先にあります。


Chromeで上記のページを開き、ページ上の「 CHROMEに追加」を押します。

a0349576_14023058.png

下の様に確認のダイアログが出て「拡張機能を追加」を押すと、Chromeのツールバーの右端に「Stylusアイコン」が出来ます。 ページがStylusのサイトに変わりますが、これで導入は完了です。 アイコンが出来たら自分のページに戻ります。

a0349576_14030306.png



 アイコン機能メニュー 

「Stylusアイコン」を左クリックすると、下の様な「アイコン機能メニュー」(ポップアップ)が出ます。 これは「Stylus」のページ上のコントローラーです。 多くの操作はここを起点に行います。

a0349576_14285515.png

「登録スタイルのリスト」
開いたページに適応する登録スタイルのリストが表示されます。 チェックボックスで有効・無効化を切り替える事が出来、その設定は保持されます。 スタイルの編集・削除が右側のスイッチから可能です。 これらは「管理画面」のリストと同等の機能です。

「すべてのスタイルをオフにする」
チェックボックスで、Stylus の ON/OFFを切り替えます。 ON/OFFは、次にこれをチェックするまで保持されます。 他ページに設定したスタイルも働かなくなります。

「次のスタイルを書く」
開いたページに関してスタイルを作成する場合に、自動的に「適応先」のURL設定をする機能です。 アンダーラインの左端は「サブドメイン」、真ん中は「ドメイン」、右端は「URL前方一致」と、クリック位置に応じて「適応先」の指定形式を選べます。

a0349576_15380239.png

「ショートカット」
拡張機能のショートカット設定画面を開きます。 ショートカットの動作は以下です。 最後の Stylus ON/OFFを設定しておくと便利そうです。

a0349576_16070466.png

「管理」
Stylusの「管理画面」を開きます。「管理画面」は、スタイルの編集・登録・管理などを行うメイン画面です。 その操作は下のリンク先を参照ください。



「オプション」ボタンを押すと、次の「Stylusオプション画面」が開きます。



 Stylus のオプション設定 

オプション設定はデフォルトでも困ることはないでしょう。 導入の初期に使い易い設定にすれば、後はそう触る必要はありません。

a0349576_16443564.png

「ツールバーアイコン」
「Stylusアイコン」は2タイプから選べます。 アイコンの表示は Stylusの動作状態を示します。

a0349576_16481463.png

▪「スタイル適応中」は、1個以上のスタイルが適応されている状態です。
▪「スタイル適応なし」は、登録スタイルで適応先に該当するスタイルが無いか、有ってもすべて無効化している状態です。
▪「Stylus OFF」は、「すべてのスタイルをオフにする」をチェックした場合で、Stylusは適応を停止しています。(Chromeの拡張機能の無効ではありません)

「ツールバーアイコンのバッジ」
「Stylusアイコン」の横に、適応中のスタイル数を表示する機能です。 配色の設定は下の様になります。

a0349576_17200706.png

「ポップアップ」 (「アイコン機能メニュー」の事です)
「アイコン機能メニュー」の幅は、370px以上ないとメイリオでキャプションが欠けます。 欠けても操作可能で設定は好みです。

「アイコン機能メニュー」から「編集画面」を開く場合のみの設定です。 別タブ表示か別ウインドウかを選びます。「管理画面」から「編集画面」を開く場合は、別タブや別ウインドウを造りません。

「アイコン機能メニュー」は、 デフォルトでリストが上側です。 オフは下の様になります。

a0349576_17384802.png

「更新」
ユーザー投稿型のスタイルを自動ダウンロードする機能の様で、私は「0」としています。「0」指定はこの機能をオフにします。




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



[PR]
by Ataron | 2017-09-18 09:42 | ブログスキンのアレンジ | Comments(0)

エキサイト編集画面のアレンジ(66) Firefox版「Stylish」での運用方法

2017年 09月 16日
Firefox版のユーザースタイルシート環境は「Stylus」を標準にしていますが、その前身の「Stylish」での運用をテストしました。 結果は問題なく稼働し、起動時のCSS適応ミスも生じません。「Stylish」はFirefox拡張機能としては「旧式」とされますが、現在の所は問題なく働く様です。

a0349576_14163028.png

このページでは Firefox版「Stylish」で、編集画面のアレンジを実現する手順を紹介します。



 Firefoxに「Stylish」を導入する 

Firefoxの拡張機能(アドオン)管理サイトの「Stylish」のページは以下のリンク先にあります。


リンクを押してこのページに行き、下図の「Firefoxへ追加」のボタンを押します。

a0349576_14244207.png

下の様に「インストールの許可」を求められ、「追加」を押すと「Firefoxの再起動」を促されます。

a0349576_14260359.png

これに従うとFirefoxが再起動し、ツールバーの右端に「Stylishアイコン」が出来ます。

a0349576_14313014.png



 スタイルの編集と登録の基本的な説明 

「Stylishアイコン」を右クリックして「カスタマイズ」を押すと Firefoxのカスタマイズページが開きます。 ツールバーのアイコンがドラッグ可能になるので、使い易い場所に移します。(以下は説明の為に左端に寄せています)


 スタイルの編集 

「Stylishアイコン」を左クリックし、「新しいスタイルを書く」→「白紙のスタイル」を押します。

a0349576_14541934.png

空のスタイル編集画面が開きます。 この画面でスタイルの作成・編集をしますが、下図の4ヵ所が要点です。

a0349576_14564578.png

スタイル名(任意の名前を入力します)
適応先指定コード
CSSコード
コード終了のカッコ「 }

❶ ❸ の部分は「Stylus」と同様で、そのまま共用できます。

は「Stylus」の適応先を、適応先指定コードの形に置き換えて記入するものです。 下は一例です。

 〔Stylus〕
   「次で始まる URL」=「http://userconf.exblog.jp/entry/

 〔stylish〕
   @namespace url(http://www.w3.org/1999/xhtml);
   @-moz-document url-prefix("http://userconf.exblog.jp/entry/") {

上の適応先指定コードはCSSコード全体を「 { 」「 } 」で包む形です。 そのため、その終了のカッコ「 } が必要になります。 これは忘れずに記入が必要です。


 スタイルの保存 

下図は「基本CSS」を記入し終えた所です。 最後に編集画面の左上の「保存」を押すと、スタイルの登録が完了します。(スタイルの再編集を行った場合は、「保存」を押さないとスタイルが更新されません)

a0349576_15261023.png

1個のスタイル登録が終われば、再び「Stylishアイコン」を左クリックして別タブに編集画面を開き、登録を続けます。 既に「保存」を押して登録したタブは閉じても構いません。



 Firefox版-More拡張 を「Stylish」に登録する 

Firefox版-More拡張 ver.5 は、最大で6個のスタイルを登録します。 登録するスタイル名は「基本CSS」「画像パレットCSS」「テンプレート編集CSS」「フリーページ編集CSS」「オプションCSS」「編集終了画面CSS」です。

上の説明では、基本的な使用方法を説明しましたが、以下の登録用コードは、手間と間違いを防ぐために ❷❸❹ を纏めています。 従って「Stylish」に登録する作業は、各スタイルごとに以下の2回のコピー作業となります。(「}」の付加は不要です)
  スタイル名
 ❷❸❹ 登録用コード(枠内のテキスト部全てが登録用コードです)


 スタイル名と登録用コード 



基本CSS

❷❸❹ 登録用コード

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://userconf.exblog.jp/entry/") {

/* Firefox版 - More拡張 ver.5 基本CSS 2017.09.14 */

body.win input {
height: 28px;
padding: 3px 10px 0;
line-height: 28px;
box-shadow: none; }

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

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

body.win label {
height: 28px;
line-height: 28px; }


#wrapper {
min-width: 960px;
max-width: 1500px;
min-height: 0;
background: none; }

header#exHeaderWrapper {
display: none; }

.ad728 {
display: none; }

#wrapperInner {
padding: 0px; }

footer#exFooterWrapper {
display: none; }



/* 編集画面ベース */

#container.hasmenu {
margin: 0;
float: none; }

.alert.alert-green.csEnqueteLink {
display: none; }

.hasmenu #contents {
margin: 0;
padding: 0px 15px 0px 15px; /* 編集枠左余裕 画像パレット 右余裕 */
background: #fbfbfb;
border: none;
border-radius: 0; }

header.boxHead {
display: none; }



/* テンプレート選択 */

#entryTemplateList {
position: absolute;
top: 15px;
left: 938px;
padding: 0 !important;
border: none !important; }

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

#entryTemplateList select {
position: absolute;
min-width: 10px;
width: 20px;
height: 28px;
padding: 4px 0 0;
font-size:13px;
box-shadow: none;
opacity: 0; } /* Fox 追加 */

#entryTemplateList select:focus {
left: -400px;
width: 420px;
padding: 4px 15px;
z-index: 3;
opacity: 1; } /* Fox 追加 */



/* 編集アラート */

.alert.alert-red {
position: absolute;
width: 300px;
padding: 2px 14px 0;
font-size: medium; }



/* 本文タイトル */

#entryEditHead-new {
position: absolute;
top: 0;
padding: 0;
margin: 0;
border: none;
z-index: 2; }

#entryEditHead-new th {
display: none; }

#entryEditTitle {
position: absolute;
top: 15px;
width: 300px;
font-size: medium;
transition: 0.5s;
z-index: 2; }

#entryEditTitle:hover {
width: 928px; }

#entryEditTitle :focus {
position: relative;
width: 928px;
background: #fff; }

#entryEditTitle input {
padding: 4px 10px 0; }

#entryEditTitle .alert {
top: 0px;
left: 310px;
z-index: -1; }



/* おすすめブログテーマ */

#trb_themeTtl {
position: absolute;
top: 5px;
left: 972px;
margin: 0;
padding: 5px 0;
height: 40px;
width: 50px;
overflow: hidden;
transition: 0.5s;
z-index: 2; }

#trb_themeTtl:hover {
left: 638px;
width: 342px;
padding: 5px 20px;
background: #fff;
box-shadow: 0px 2px 2px #aaa; }



/* カテゴリ */

#entryEditCategory {
position: absolute;
top: 15px;
left: 310px; }

#entryEditCategory select {
position: absolute;
width: 140px;
font-size:13px;
padding: 3px 5px 0; } /* Fox 修正 */

#entryEditCategory select:hover {
width: 180px;
z-index: 1; }

#entryBlogCategoryDialog.btn {
position: absolute;
left: 142px;
height: 28px; }

#entryBlogCategoryDialog.btn input {
width: 28px;
font-size: 13px;
font-weight: normal;
text-indent: -61px;
padding: 1px 10px 0px; } /* Fox 修正 */



/* タグ */

#entryEditTags {
position: absolute;
top: 15px;
left: 490px; }

#entryEditTags .entryElement {
display: flex; }

#entryEditTags span.tags {
width: 147px; }

#entryEditTags span.tags input {
width: 130px;
font-size: 13px; }

#entryEditTags span.tags a {
font-size: 13px;
border: 1px solid #ccc;
border-left: none;
border-radius: 0 3px 3px 0;
background: linear-gradient(to bottom,#fff 0%,#E3F2FD 100%);
text-decoration: none; }

#entryEditTags span.tags a::before {
content: "\f0d7";
font: 12px FontAwesome;
color: #000;
padding: 0 4px; }

.tagCompletionBox {
top: 42px !important;
width: 178px;
font-size: 13px; }

.tagCompletionBox .tagItem {
padding: 4px 10px 0; }

.ui-autocomplete {
opacity: 1 !important; }

.ui-autocomplete .tagOptions {
font-size: 13px;
padding: 0 10px 4px !important; }

#entryEditTags .btn-s {
display: none; }



/* 編集部wrap構成 */

#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

#entryEditContents {
overflow: visible;
margin: 56px 180px 0px 0px;
padding: 0; }

#entryEditContents .entryPreview.btn-s {
position: relative;
height: 32px;
opacity: 0; } /* 読込み遅延対策 */

.entryTutorial01, .entryTutorial02, .entryTutorial03, .entryTutorial04 {
display: none; }

#editorSwither {
position: absolute;
top: 2px;
line-height: 23px;
padding: 0;
z-index: 3; }

#editorSwither .current {
line-height: 25px;
margin: 0 4px 0 0; }

#editorSwither li {
margin: 2px 4px 0 0; }

#editorSwither a {
padding: 2px 0 0; }

#_panel {
height: 32px;
margin-top: -32px; /* 読込み遅延対策 */
border: none;
background: none;
z-index: 2; }

#new_icon {
display: none !important; }



/* 編集部 */

#_entryContent , #entryContent ,
#_moreEntryContent , #moreEntryContent { /* 文書編集枠基本設定*/
position: relative;
background: #fbfbfb;
line-height: 150%;
margin: 0;
font-size: medium;
border-radius: 3px; }

#_entryContent , #entryContent {
height: 580px !important; }

#_moreEntryContent , #moreEntryContent {
height: 500px !important; }

#_entryContent:focus , #entryContent:focus ,
#_moreEntryContent:focus , #moreEntryContent:focus {
z-index: 2; }

img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

img.IMAGE_MID {
margin: 0.22em 0em 0.38em 0em !important; }

#entryEditWrap .alert {
top: 95px;
left: 450px;
z-index: 1; }

#entryMoreText .alert {
top: 45px;
left: 435px;
z-index: 1; }



/* More部 */

#more.w100 {
display: block;
height: 28px;
width: 74px;
margin: 15px 0 0;
background: linear-gradient(to bottom, #ffffff 0%,#ececec 100%); }

#notmore.w100 {
position: absolute;
bottom: 0;
height: 28px;
width: 86px;
margin: 15px 0 0;
background: linear-gradient(to bottom, #FFF9C4 0%,#FFD54F 100%); }

#more.w100 span , #notmore.w100 span {
padding: 2px 0 0;
line-height: 26px;
font-size: small; }

#notmore+.btn-s {
display: none; }

#entryMoreArea {
position: absolute;
top: 75px;
width: 100%;
margin: 0;
padding-top: 7px; }

input#moreEntrySubject {
font-size: medium;
height: 28px;
padding: 3px 10px 0px;
background: #f1f6f9; }

#entryMoreText {
margin: 2px 0 0; }



/* 下部整理 1 */

#entryOptions {
position: absolute;
bottom: 0;
left: 110px;
width: 110px;
margin: 0;
height: 28px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
transition: 0.5s;
z-index: 4; }

#entryOptions:hover {
width: 820px; }

#entryOptions .head-h3 {
display: none; }

#entryOptions .optionGroup {
line-height: 28px; }

#entryOptions .optionGroup label {
font-size: 13px;
margin: 0 0 7px;
padding: 0 5px; }

#entryOptions .optionGroup label:nth-child(n+2) {
width: 130px;
transition: 0.5s; }

#entryOptions .optionGroup label:nth-child(n+2):hover {
width: 160px; }



/* トラックバック枠 */

#entryTrackback {
position: absolute;
bottom: 0;
margin: 0 0 0 110px;
width: calc(100% - 110px); }

#entryTrackbackTextarea {
position: relative;
width: 80px;
margin: 0 0 0 740px;
min-height: 20px;
height: 28px;
padding: 5px 0 0 7px;
background: #fbfbfb;
box-shadow: none;
border: 1px solid #ccc;
border-radius: 3px;
font-size: medium;
overflow-y: scroll;
transition: 0.5s; }

#entryTrackbackTextarea:hover {
width: 820px;
margin: 0;
padding: 5px 0 0 150px;
z-index: 4; }

#entryTrackbackTextarea:focus {
height: 58px;
width: 820px;
margin: 0;
padding: 5px 0 0 150px;
z-index: 4; }

.notesBoxHead {
position: absolute;
bottom: 45px;
left: -110px;
line-height: 28px;
padding: 5px 20px 0 150px;
width: calc(100% + 110px);
background: rgba(58, 135, 173, 0.2); }

.notesBoxHead h1::before {
content: "トラックバック"; }

.notesInner {
position: absolute;
bottom: 45px;
left: 250px;
padding: 7px 0 5px;
font-weight: bold; }



/* 画像パレット */

#entryEditIframe {
position: absolute;
top: 56px;
right: 16px;
width: 165px; /* 画像パレット右余裕 */
z-index: 2; }

#entryEditIframe iframe {
width: 165px;
height: 612px; }



/* 下部整理2 */

#entryOptionsPstdate {
position: absolute;
top: 683px;
left: 245px;
width: 214px;
margin: 0;
padding: 0 10px 0;
white-space: nowrap;
overflow: hidden;
border: none;
background: #fbfbfb;
font-size: 13px;
transition: 0.5s;
z-index: 3; }

#entryOptionsPstdate:hover {
width: 682px; }

#entryOptionsPstdate span {
line-height: 32px;
margin-right: -20px; }

#entryPstdateElement select {
font-size: 13px;
min-width: 20px;
width: 70px; }

#entryPstdateElement select:nth-child(n+2) {
width: 55px; }

#entryPstdateElement option:nth-child(1) {
display: none; }


#entryOptionsPpenflag {
position: absolute;
top: 683px;
left: 480px;
width: 210px;
margin: 0;
padding: 0 0 0 20px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
font-size: 13px;
transition: 0.5s;
z-index: 2; }

#entryOptionsPpenflag:hover {
width: 446px; }

#entryOptionsPpenflag span {
line-height: 32px;
margin-right: -20px; }



/* サブミットボタン・メニュー */

#entrySubmitBtm {
border: none;
padding: 0;
margin: 15px 0 0 80px; }

#entrySubmitBtm .btn {
height: 30px; }

.btn {
background: linear-gradient(to bottom, #ffffff 0%,#ececec 100%); }

#entrySubmitBtm input {
line-height: 31px;
padding: 0px !important; }

#entrySubmitBtm .btn.w250 {
width: 200px; }

.btn-blue {
background: linear-gradient(to bottom, #0e9de4 0%,#2679ce 100%); }


#menu {
height: 0; }

#myblogBtn {
position: absolute;
left: 120px;
bottom: 0;
width: calc(6.8em + 23px);
height: 30px;
border: 1px solid #ccc;
margin: 0;
background: linear-gradient(to bottom, #c3ffff 0%,#b0eae0 100%); }

#myblogBtn:hover {
background: #8cf3f3; }

#myblogBtn a {
line-height: 27px;
padding: 0 5px;
color: #333;
text-shadow: none; }

#exFooterWrapper {
display: none; }



/* アイコン・ボタンの輪郭線と背景色 */

#_panel .panelBtn { /* 編集アイコンの枠デザイン */
font-size: 16px; /* 枠内文字表示高さ基準 */
line-height: 16px; /* 枠内文字表示高さ基準 */
width: 21px;
height: 21px;
border: 1px solid #ccc; /* 編集アイコンの枠線色 */
border-radius: 3px;
background: #fff; /* アイコン デフォルト背景色 */
z-index: 1; }



/* 編集アイコン配置・デザイン FontAwesome */

#exbtn_bold {
top: initial;
bottom: 5px;
left: 223px; }

#exbtn_bold::before {
content: "\f032";
font: 16px /23px FontAwesome;
padding: 0 4px; }

#exbtn_italic {
top: initial;
bottom: 5px;
left: 301px; }

#exbtn_italic::before {
content: "\f033";
font: 16px /23px FontAwesome;
padding: 0 6px; }

#exbtn_underline {
top: initial;
bottom: 5px;
left: 249px; }

#exbtn_underline::before {
content: "\f0cd";
font: 16px /23px FontAwesome;
padding: 0 4px; }

#exbtn_strikethrough {
top: initial;
bottom: 5px;
left: 275px; }

#exbtn_strikethrough::before {
content: "\f0cc";
font: 16px /23px FontAwesome;
padding: 0 3px; }

#exbtn_link {
top: initial;
bottom: 5px;
left: 523px; }

#exbtn_link::before {
content: "\f0c1";
font: 16px /24px FontAwesome;
color: #1E88E5;
padding: 0 3px; }

#exbtn_size1 {
top: initial;
bottom: 5px;
left: 327px; }

#exbtn_size1::before {
content: "F";
font: bold 12px /22px Tahoma;
padding: 0 7px; }

#exbtn_size2 {
top: initial;
bottom: 32px;
left: 327px; }

#exbtn_size2::before {
content: "F";
font: bold 16px /22px Tahoma;
color: #999;
padding: 0 6px; }

#exbtn_size3 {
top: initial;
bottom: 5px;
left: 353px; }

#exbtn_size3::before {
content: "F";
font: bold 18px /22px Tahoma;
padding: 0 5px; }

#exbtn_size4 {
top: initial;
bottom: 32px;
left: 353px; }

#exbtn_size4::before {
content: "F";
font: bold 22px /22px Tahoma;
padding: 0 4px; }

#exbtn_fontcolor {
top: initial;
bottom: 5px;
left: 379px; }

#exbtn_fontcolor::before {
content: "\f031";
font: 16px /23px FontAwesome;
color: red;
padding: 0 1px; }

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

#exbtn_blockquote {
top: initial;
bottom: 32px;
left: 457px; }

#exbtn_blockquote::before {
content: "\f10d";
font: 13px /24px FontAwesome;
color: #1072c0;
padding: 0 5px; }

#exbtn_left {
top: initial;
bottom: 32px;
left: 392px; }

#exbtn_left::before {
content: "\f036";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_center {
top: initial;
bottom: 5px;
left: 405px; }

#exbtn_center::before {
content: "\f037";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_right {
top: initial;
bottom: 32px;
left: 418px; }

#exbtn_right::before {
content: "\f038";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_ol {
top: initial;
bottom: 32px;
left: 249px; }

#exbtn_ol::before {
content: "\f0cb";
font: 16px /23px FontAwesome;
padding: 0 3px; }

#exbtn_ul {
top: initial;
bottom: 32px;
left: 223px; }

#exbtn_ul::before {
content: "\f0ca";
font: 16px /23px FontAwesome;
padding: 0 3px; }

#exbtn_indent {
top: initial;
bottom: 32px;
left: 275px; }

#exbtn_indent::before {
content: "\f03c";
font: 16px /24px FontAwesome;
color: #1072c0;
padding: 0 3px; }

#exbtn_indent.disabledBtn::before {
opacity: 0.1; }

#exbtn_outdent {
top: initial;
bottom: 32px;
left: 301px; }

#exbtn_outdent::before {
content: "\f03b";
font: 16px /24px FontAwesome;
color: #1072c0;
padding: 0 3px; }

#exbtn_outdent.disabledBtn::before {
opacity: 0.1; }

#exbtn_hr {
top: initial;
bottom: 32px;
left: 483px; }

#exbtn_hr::before {
content: "\f0c8";
font: 16px /23px FontAwesome;
color: #cae0eb;
padding: 0 4px; }

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

#exbtn_emoji {
top: initial;
bottom: 5px;
left: 601px; }

#exbtn_emoji::before {
content: "\f118";
font: 16px /22px FontAwesome;
color: #ff8f00;
padding: 0 4px; }

#exbtn_youtube {
top: initial;
bottom: 5px;
left: 575px; }

#exbtn_youtube::before {
content: "\f167";
font: 16px /22px FontAwesome;
color: #be074a;
padding: 0 4px; }

#exbtn_instagram {
top: initial;
bottom: 5px;
left: 549px; }

#exbtn_instagram::before {
content: "\f16d";
font: 16px /23px FontAwesome;
color: #ff03d6;
padding: 0 4px; }

#exbtn_map {
top: initial;
bottom: 5px;
left: 627px; }

#exbtn_map::before {
content: "\f0f2";
font: 18px /22px FontAwesome;
color: #B2EBF2;
padding: 0 2px; }

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

#exbtn_genre {
top: initial;
bottom: 5px;
left: 653px; }

#exbtn_genre::before {
content: "\f07c";
font: 16px /24px FontAwesome;
color: #e39009;
padding: 0 3px; }

#exbtn_amazon {
top: initial;
bottom: 5px;
left: 679px; }

#exbtn_amazon::before {
content: "\f02d";
font: 16px /23px FontAwesome;
color: #4a8c83;
padding: 0 3px; }

#exbtn_removeformat {
top: initial;
bottom: 5px;
left: 438px; }

#exbtn_removeformat::before {
content: "\f00d";
font: 16px /21px FontAwesome;
color: red;
padding: 0 4px; }

#exbtn_removeformat.disabledBtn::before {
opacity: 0.1; }

#exbtn_undo {
top: initial;
bottom: 5px;
left: 464px; }

#exbtn_undo::before {
content: "\f0e2";
font: 18px /24px FontAwesome;
color: #4dbef7;
padding: 0 4px; }

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

#exbtn_undo.disabledBtn::before,
#exbtn_undo.disabledBtn::after {
opacity: 0.1; }

#exbtn_redo {
top: initial;
bottom: 5px;
left: 490px; }

#exbtn_redo::before {
content: "\f01e";
font: 18px /24px FontAwesome;
color: #4dbef7;
padding: 0 3px; }

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

#exbtn_redo.disabledBtn::before,
#exbtn_redo.disabledBtn::after {
opacity: 0.1; }

#exbtn_autoeol {
top: initial;
bottom: 5px;
left: 190px;
background:#ddd !important; }

#exbtn_autoeol.disabledBtn {
opacity: 0; }

#exbtn_autoeol.activeBtn {
background: red !important; }

#exbtn_autoeol::before {
content: "\f149";
font: 18px /22px FontAwesome;
color: #fff;
padding: 0px 5px;
display: block;
transform: rotate(90deg); }


#exbtn_status {
position: absolute;
bottom: 5px;
right: 0;
margin: 0;
padding: 2px 2px 0px 2px;
height: 19px;
width: auto;
font-size: 13px;
color: blue;
text-align: center;
background: white;
border: 1px solid #ccc;
border-radius: 3px; }



/* キャンペーン枠・みんなの投稿枠・お知らせリスト */

.campaign-container {
position: absolute;
bottom: 0;
margin: 0 0 0 0;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%); }

.campaign-container::before {
content: "C";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold; }

.campaign-container:hover {
margin: 0 0 0 0;
padding: 20px 40px 10px;
width: calc(100% - 292px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


#blog2media {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 0 30px;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%); }

#blog2media .boxHead {
display: block; }

#blog2media::before {
content: "M";
position: absolute;
top: 5px;
left: 3px;
color: #666;
font-weight: bold; }

#blog2media:hover {
margin: 0 0 0 0;
padding: 15px 40px 20px;
width: calc(100% - 210px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


#announceList {
position: absolute;
top: 726px;
margin: 0 0 0 60px;
padding: 0;
max-width: 18px;
max-height: 28px;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#effaff 0%,#bce8f1 100%); }

#announceList ul li {
margin: 10px 30px; }

#announceList ul li::before {
content: "A";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold;
text-shadow: none; }

#announceList:hover {
top: initial;
bottom: 0;
margin: 0 0 0 0;
padding: 30px 0 10px;
max-width: none;
width: calc(100% - 212px);
max-height: 300px;
transition: max-height 1s;
z-index: 5; }



/* 背景色デザイン */

body , .hasmenu #contents , #entryMoreArea ,
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover , #announceList:hover {
background: #a4c1ce; }} /* 編集画面 背景色 */






画像パレットCSS

❷❸❹ 登録用コード

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://userconf.exblog.jp/parts/image/") {

/* Firefox版 ver.5 画像パレットCSS 2017.09.14 */

#partsImage #droppable {
font-size: 13px;
margin: 5px 5px 10px;
color: #fff;
background: #459bc5;
box-shadow: none; }

#partsImage #droppable:hover {
background: #b8e2f7; }

#partsImage .mod-fileUpload {
margin: 0 5px; }

#partsImage .fileUploadWrapper {
border: none;
margin: 0; }

#partsImage .fileUploadWrapper span,
#partsImage .fileUploadWrapper input {
font-size: 13px;
padding: 0 1px !important; }

#partsImage .fileUploadWrapper .fileUploadBtm {
position: absolute;
top: 0;
left: 72px;
width: 83px; }

#partsImage .optionGroup {
margin: 0 0 0 15px;
padding: 0; }

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

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


#partsImageContainer {
overflow-y: scroll;
margin: 0 5px 10px;
height: 356px; }

#partsImageContainer li {
margin: 0;
width: 132px;
height: 90px; }

#partsImageContainer input {
position: relative;
left: 53px; }

#partsImageContainer input[type=submit][value="×"]:hover {
background: red;
color: #fff;
font-weight: bold; }

#partsImageContainer li a {
background-size: cover;
width: 128px;
height: 86px; }

#partsImage .pager {
margin: 0; }

#partsImage .pager li {
margin: 0 2px; }

#partsImage .alert {
margin: 0; }}






テンプレート編集CSS

❷❸❹ 登録用コード

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://userconf.exblog.jp/entry/template/") {

/* Firefox版 ver.5 テンプレート編集CSS 2017.09.14 */

#editTemplateList {
position: absolute;
top: 15px;
left: 575px;
height: 28px;
width: 510px;
padding: 0 !important;
border: none !important;
background: none; }

#editTemplateList select {
position: absolute;
left: 400px;
min-width: 10px;
width: 21px;
height: 28px;
padding: 4px 10px 0px;
font-size:13px;
box-shadow: none;
opacity: 0; } /* Fox 追加 */

#editTemplateList select:hover {
left: 22px;
width: 400px;
z-index: 3;
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; }


#editTemplateList .fR {
width: 80px;
height: 28px;
border-radius: 3px; }

#editTemplateList .fR:hover {
width: 160px;
position: relative;
z-index: 3; }

#editTemplateList .fR a {
padding: 3px 2px; }

#entryEditTmpTitle {
position: absolute;
top: 15px;
left: 938px;
z-index: 1; }

#entryEditTmpTitle :hover {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle :focus {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle .alert {
position: absolute;
right: 0px;
z-index: -1; }

.alert.alert-green {
position: absolute;
top: 10px;
z-index: 5; }



#sidemenu {
display: none; }


#entryTrackback .boxHead.head-h3 {
display: block;
margin: 0 0 -35px;
background: none; }

#entryTrackbackTextarea {
margin: 0 0 0 420px;
width: calc(100% - 420px);
padding: 5px 0 0 20px; }

#entryTrackbackTextarea:hover {
width: 100%;
margin: 0;
padding: 5px 0 0 150px; }

textarea#entryTrackbackTextarea:focus {
height: 80px;
width: 100%;
margin: 0;
padding: 5px 0 0 150px; }}






フリーページ編集CSS

❷❸❹ 登録用コード

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://userconf.exblog.jp/entry/fp/") {

/* Firefox版 ver.5 フリーページ編集CSS 2017.09.14 */

#entryEditHead-new tr:first-child td {
position: absolute;
left: 700px;
top: 10px; }

#entryEditHead-new tr:last-child td:first-child {
position: absolute;
left: 600px;
top: 15px; }

#entryEditHead-new tr:last-child {
position: absolute;
left: 350px;
top: 15px;
background: #fff;
height: 26px;
padding: 0 0 0 15px;
border: 1px solid #ccc;
border-radius: 3px; }

#entryEditCategory {
position: absolute;
left: 247px;
top: -1px;
width: 100px; }

#entryEditCategory input {
font-weight: bold; }

#entryEditCategory .alert {
left: 205px; }


#entryOptionsPpenflag {
position: absolute;
bottom: initial;
top: 683px;
left: 5px;
width: 350px !important; }

#announceList {
display: none; }

#myblogBtn {
display: none; }}






(注意)
「2行編集アイコン」のオプションが不要の場合は、以下の「オプションCSS」を登録する必要はありません。

オプションCSS

❷❸❹ 登録用コード

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://userconf.exblog.jp/entry/") {

/* Firefox版 ver.5 オプションCSS 2017.09.14 */

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

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






編集終了画面CSS

❷❸❹ 登録用コード

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://userconf.exblog.jp/entry/complete/") {

/* Firefox版 ver.5 編集終了画面CSS 2017.09.14 */

.url a {
font-size: medium;
padding: 4px 40px 2px;
border: 1px solid #aaa;
border-radius: 3px;
color: #335c6f;
background: linear-gradient(to bottom, #e2f2f9 0%,#a5c2cf 100%);
text-decoration: none; }

.url a:hover {
background: #a3d7ef; }

#wrapperInner {
padding: 15px; }

.notesInner {
position: static; }

.notesBoxHead {
position: static;
padding: 0 10px;
width: auto;
background: none; }

.notesBoxHead h1::before {
content: none; }

#menu {
display: none; }}






 スタイルの管理画面 

スタイルを全て登録したら、下の様に「Stylishアイコン」を左クリックして「スタイルの管理」を押します。

a0349576_16500975.png

これで以下の様な「ユーザースタイル管理画面」が表示されます。(この管理画面には「アドオンアイコン」からもアクセス出来ます)

a0349576_16562264.png

先に登録したスタイルのリストが表示されています。 右側の「編集」「無効化/有効化」「削除」のスイッチで、各スタイルを管理します。

スタイル編集画面で「保存」=「登録」をした時点で、スタイルは効力を発揮します。 各スタイルのON/OFFは、この画面の「無効化/有効化」で切り替えます。 また、「Stylishアイコン」を左クリックすると、メニューにその時点でONのスタイルがチェック付きで表示されます。 このチェックを操作して、Firefoxの表示を見ながらスタイルのON/OFFが出来ます。

a0349576_18044295.png




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



[PR]
by Ataron | 2017-09-16 18:17 | ブログスキンのアレンジ | Comments(0)

エキサイト編集画面のアレンジ(65) Firefox版 - More拡張 ver.5

2017年 09月 15日
エキサイト編集画面のアレンジ環境が Firefoxでも使える様になりました。 Chrome上でバージョンを重ねて来たMore拡張のスタイルシートは、大きな手を加える事なくFirefoxに移植出来ました。 バージョンは機能がChrome ver.5 と同等なので、初版ですがver.5としています。

ユーザースタイルシートの環境として、Firefox拡張機能の「Stylus」を使用します。 拡張機能は「Stylish」でも全く同様に動作します。(ページの最後を参照ください)



 編集画面のフェイス 

下図はアレンジされたブログの編集画面です。 細かな説明は過去のChrome版のページを参照ください。 元画面の編集に必要な機能を全て、コンパクトな画面に無駄なく収めています。

a0349576_20280593.png

下図は、テンプレート編集画面です。 上と似ていますが、テンプレート編集のために省略されたスイッチと追加されたスイッチがあります。

a0349576_20302911.png

下図は、フリーページ編集画面です。 上段も編集枠下側も通常の編集画面とかなり異なった構成です。

a0349576_20372522.png



 Stylusの導入とスタイルの登録手順 

この編集画面のアレンジは「Firefox」と拡張機能「Stylus」を利用して実現します。「Stylus」の導入は簡単で、設定方法は以下のリンク先で説明しています。



「Firefox版 - More拡張 ver.5」は、最大で6個のスタイルを「Stylus」に登録します。
下図は「Stylus」のスタイル編集画面ですが、各CSSをコピーしてこの編集画面に貼り付けます。

a0349576_12444987.png

CSSによって適用先の指定(上図の)が異なります。 CSSごとに ❶❷❸ の指定を明記していますので、間違わずにスタイル登録を行ってください。

登録するスタイル名は「基本CSS」「画像パレットCSS」「テンプレート編集CSS」「フリーページ編集CSS」「オプションCSS」「編集終了画面CSS」で、全てを登録すると以下の様になります。

a0349576_22435332.png



 スタイルデータ 

「Firefox版 - More拡張 ver.5」のスタイルデータです。 特にURLのコビーは、「」の内側だけをコピーし、余計な半角空白等が混ざらない様に注意してください。

スタイル名 : 基本CSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます



/* Firefox版 - More拡張 ver.5 基本CSS 2017.09.14 */

body.win input {
height: 28px;
padding: 3px 10px 0;
line-height: 28px;
box-shadow: none; }

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

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

body.win label {
height: 28px;
line-height: 28px; }


#wrapper {
min-width: 960px;
max-width: 1500px;
min-height: 0;
background: none; }

header#exHeaderWrapper {
display: none; }

.ad728 {
display: none; }

#wrapperInner {
padding: 0px; }

footer#exFooterWrapper {
display: none; }



/* 編集画面ベース */

#container.hasmenu {
margin: 0;
float: none; }

.alert.alert-green.csEnqueteLink {
display: none; }

.hasmenu #contents {
margin: 0;
padding: 0px 15px 0px 15px; /* 編集枠左余裕 画像パレット 右余裕 */
background: #fbfbfb;
border: none;
border-radius: 0; }

header.boxHead {
display: none; }



/* テンプレート選択 */

#entryTemplateList {
position: absolute;
top: 15px;
left: 938px;
padding: 0 !important;
border: none !important; }

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

#entryTemplateList select {
position: absolute;
min-width: 10px;
width: 20px;
height: 28px;
padding: 4px 0 0;
font-size:13px;
box-shadow: none;
opacity: 0; } /* Fox 追加 */

#entryTemplateList select:focus {
left: -400px;
width: 420px;
padding: 4px 15px;
z-index: 3;
opacity: 1; } /* Fox 追加 */



/* 編集アラート */

.alert.alert-red {
position: absolute;
width: 300px;
padding: 2px 14px 0;
font-size: medium; }



/* 本文タイトル */

#entryEditHead-new {
position: absolute;
top: 0;
padding: 0;
margin: 0;
border: none;
z-index: 2; }

#entryEditHead-new th {
display: none; }

#entryEditTitle {
position: absolute;
top: 15px;
width: 300px;
font-size: medium;
transition: 0.5s;
z-index: 2; }

#entryEditTitle:hover {
width: 928px; }

#entryEditTitle :focus {
position: relative;
width: 928px;
background: #fff; }

#entryEditTitle input {
padding: 4px 10px 0; }

#entryEditTitle .alert {
top: 0px;
left: 310px;
z-index: -1; }



/* おすすめブログテーマ */

#trb_themeTtl {
position: absolute;
top: 5px;
left: 972px;
margin: 0;
padding: 5px 0;
height: 40px;
width: 50px;
overflow: hidden;
transition: 0.5s;
z-index: 2; }

#trb_themeTtl:hover {
left: 638px;
width: 342px;
padding: 5px 20px;
background: #fff;
box-shadow: 0px 2px 2px #aaa; }



/* カテゴリ */

#entryEditCategory {
position: absolute;
top: 15px;
left: 310px; }

#entryEditCategory select {
position: absolute;
width: 140px;
font-size:13px;
padding: 3px 5px 0; } /* Fox 修正 */

#entryEditCategory select:hover {
width: 180px;
z-index: 1; }

#entryBlogCategoryDialog.btn {
position: absolute;
left: 142px;
height: 28px; }

#entryBlogCategoryDialog.btn input {
width: 28px;
font-size: 13px;
font-weight: normal;
text-indent: -61px;
padding: 1px 10px 0px; } /* Fox 修正 */



/* タグ */

#entryEditTags {
position: absolute;
top: 15px;
left: 490px; }

#entryEditTags .entryElement {
display: flex; }

#entryEditTags span.tags {
width: 147px; }

#entryEditTags span.tags input {
width: 130px;
font-size: 13px; }

#entryEditTags span.tags a {
font-size: 13px;
border: 1px solid #ccc;
border-left: none;
border-radius: 0 3px 3px 0;
background: linear-gradient(to bottom,#fff 0%,#E3F2FD 100%);
text-decoration: none; }

#entryEditTags span.tags a::before {
content: "\f0d7";
font: 12px FontAwesome;
color: #000;
padding: 0 4px; }

.tagCompletionBox {
top: 42px !important;
width: 178px;
font-size: 13px; }

.tagCompletionBox .tagItem {
padding: 4px 10px 0; }

.ui-autocomplete {
opacity: 1 !important; }

.ui-autocomplete .tagOptions {
font-size: 13px;
padding: 0 10px 4px !important; }

#entryEditTags .btn-s {
display: none; }



/* 編集部wrap構成 */

#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

#entryEditContents {
overflow: visible;
margin: 56px 180px 0px 0px;
padding: 0; }

#entryEditContents .entryPreview.btn-s {
position: relative;
height: 32px;
opacity: 0; } /* 読込み遅延対策 */

.entryTutorial01, .entryTutorial02, .entryTutorial03, .entryTutorial04 {
display: none; }

#editorSwither {
position: absolute;
top: 2px;
line-height: 23px;
padding: 0;
z-index: 3; }

#editorSwither .current {
line-height: 25px;
margin: 0 4px 0 0; }

#editorSwither li {
margin: 2px 4px 0 0; }

#editorSwither a {
padding: 2px 0 0; }

#_panel {
height: 32px;
margin-top: -32px; /* 読込み遅延対策 */
border: none;
background: none;
z-index: 2; }

#new_icon {
display: none !important; }



/* 編集部 */

#_entryContent , #entryContent ,
#_moreEntryContent , #moreEntryContent { /* 文書編集枠基本設定*/
position: relative;
background: #fbfbfb;
line-height: 150%;
margin: 0;
font-size: medium;
border-radius: 3px; }

#_entryContent , #entryContent {
height: 580px !important; }

#_moreEntryContent , #moreEntryContent {
height: 500px !important; }

#_entryContent:focus , #entryContent:focus ,
#_moreEntryContent:focus , #moreEntryContent:focus {
z-index: 2; }

img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

img.IMAGE_MID {
margin: 0.22em 0em 0.38em 0em !important; }

#entryEditWrap .alert {
top: 95px;
left: 450px;
z-index: 1; }

#entryMoreText .alert {
top: 45px;
left: 435px;
z-index: 1; }



/* More部 */

#more.w100 {
display: block;
height: 28px;
width: 74px;
margin: 15px 0 0;
background: linear-gradient(to bottom, #ffffff 0%,#ececec 100%); }

#notmore.w100 {
position: absolute;
bottom: 0;
height: 28px;
width: 86px;
margin: 15px 0 0;
background: linear-gradient(to bottom, #FFF9C4 0%,#FFD54F 100%); }

#more.w100 span , #notmore.w100 span {
padding: 2px 0 0;
line-height: 26px;
font-size: small; }

#notmore+.btn-s {
display: none; }

#entryMoreArea {
position: absolute;
top: 75px;
width: 100%;
margin: 0;
padding-top: 7px; }

input#moreEntrySubject {
font-size: medium;
height: 28px;
padding: 3px 10px 0px;
background: #f1f6f9; }

#entryMoreText {
margin: 2px 0 0; }



/* 下部整理 1 */

#entryOptions {
position: absolute;
bottom: 0;
left: 110px;
width: 110px;
margin: 0;
height: 28px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
transition: 0.5s;
z-index: 4; }

#entryOptions:hover {
width: 820px; }

#entryOptions .head-h3 {
display: none; }

#entryOptions .optionGroup {
line-height: 28px; }

#entryOptions .optionGroup label {
font-size: 13px;
margin: 0 0 7px;
padding: 0 5px; }

#entryOptions .optionGroup label:nth-child(n+2) {
width: 130px;
transition: 0.5s; }

#entryOptions .optionGroup label:nth-child(n+2):hover {
width: 160px; }



/* トラックバック枠 */

#entryTrackback {
position: absolute;
bottom: 0;
margin: 0 0 0 110px;
width: calc(100% - 110px); }

#entryTrackbackTextarea {
position: relative;
width: 80px;
margin: 0 0 0 740px;
min-height: 20px;
height: 28px;
padding: 5px 0 0 7px;
background: #fbfbfb;
box-shadow: none;
border: 1px solid #ccc;
border-radius: 3px;
font-size: medium;
overflow-y: scroll;
transition: 0.5s; }

#entryTrackbackTextarea:hover {
width: 820px;
margin: 0;
padding: 5px 0 0 150px;
z-index: 4; }

#entryTrackbackTextarea:focus {
height: 58px;
width: 820px;
margin: 0;
padding: 5px 0 0 150px;
z-index: 4; }

.notesBoxHead {
position: absolute;
bottom: 45px;
left: -110px;
line-height: 28px;
padding: 5px 20px 0 150px;
width: calc(100% + 110px);
background: rgba(58, 135, 173, 0.2); }

.notesBoxHead h1::before {
content: "トラックバック"; }

.notesInner {
position: absolute;
bottom: 45px;
left: 250px;
padding: 7px 0 5px;
font-weight: bold; }



/* 画像パレット */

#entryEditIframe {
position: absolute;
top: 56px;
right: 16px;
width: 165px; /* 画像パレット右余裕 */
z-index: 2; }

#entryEditIframe iframe {
width: 165px;
height: 612px; }



/* 下部整理2 */

#entryOptionsPstdate {
position: absolute;
top: 683px;
left: 245px;
width: 214px;
margin: 0;
padding: 0 10px 0;
white-space: nowrap;
overflow: hidden;
border: none;
background: #fbfbfb;
font-size: 13px;
transition: 0.5s;
z-index: 3; }

#entryOptionsPstdate:hover {
width: 682px; }

#entryOptionsPstdate span {
line-height: 32px;
margin-right: -20px; }

#entryPstdateElement select {
font-size: 13px;
min-width: 20px;
width: 70px; }

#entryPstdateElement select:nth-child(n+2) {
width: 55px; }

#entryPstdateElement option:nth-child(1) {
display: none; }


#entryOptionsPpenflag {
position: absolute;
top: 683px;
left: 480px;
width: 210px;
margin: 0;
padding: 0 0 0 20px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
font-size: 13px;
transition: 0.5s;
z-index: 2; }

#entryOptionsPpenflag:hover {
width: 446px; }

#entryOptionsPpenflag span {
line-height: 32px;
margin-right: -20px; }



/* サブミットボタン・メニュー */

#entrySubmitBtm {
border: none;
padding: 0;
margin: 15px 0 0 80px; }

#entrySubmitBtm .btn {
height: 30px; }

.btn {
background: linear-gradient(to bottom, #ffffff 0%,#ececec 100%); }

#entrySubmitBtm input {
line-height: 31px;
padding: 0px !important; }

#entrySubmitBtm .btn.w250 {
width: 200px; }

.btn-blue {
background: linear-gradient(to bottom, #0e9de4 0%,#2679ce 100%); }


#menu {
height: 0; }

#myblogBtn {
position: absolute;
left: 120px;
bottom: 0;
width: calc(6.8em + 23px);
height: 30px;
border: 1px solid #ccc;
margin: 0;
background: linear-gradient(to bottom, #c3ffff 0%,#b0eae0 100%); }

#myblogBtn:hover {
background: #8cf3f3; }

#myblogBtn a {
line-height: 27px;
padding: 0 5px;
color: #333;
text-shadow: none; }

#exFooterWrapper {
display: none; }



/* アイコン・ボタンの輪郭線と背景色 */

#_panel .panelBtn { /* 編集アイコンの枠デザイン */
font-size: 16px; /* 枠内文字表示高さ基準 */
line-height: 16px; /* 枠内文字表示高さ基準 */
width: 21px;
height: 21px;
border: 1px solid #ccc; /* 編集アイコンの枠線色 */
border-radius: 3px;
background: #fff; /* アイコン デフォルト背景色 */
z-index: 1; }



/* 編集アイコン配置・デザイン FontAwesome */

#exbtn_bold {
top: initial;
bottom: 5px;
left: 223px; }

#exbtn_bold::before {
content: "\f032";
font: 16px /23px FontAwesome;
padding: 0 4px; }

#exbtn_italic {
top: initial;
bottom: 5px;
left: 301px; }

#exbtn_italic::before {
content: "\f033";
font: 16px /23px FontAwesome;
padding: 0 6px; }

#exbtn_underline {
top: initial;
bottom: 5px;
left: 249px; }

#exbtn_underline::before {
content: "\f0cd";
font: 16px /23px FontAwesome;
padding: 0 4px; }

#exbtn_strikethrough {
top: initial;
bottom: 5px;
left: 275px; }

#exbtn_strikethrough::before {
content: "\f0cc";
font: 16px /23px FontAwesome;
padding: 0 3px; }

#exbtn_link {
top: initial;
bottom: 5px;
left: 523px; }

#exbtn_link::before {
content: "\f0c1";
font: 16px /24px FontAwesome;
color: #1E88E5;
padding: 0 3px; }

#exbtn_size1 {
top: initial;
bottom: 5px;
left: 327px; }

#exbtn_size1::before {
content: "F";
font: bold 12px /22px Tahoma;
padding: 0 7px; }

#exbtn_size2 {
top: initial;
bottom: 32px;
left: 327px; }

#exbtn_size2::before {
content: "F";
font: bold 16px /22px Tahoma;
color: #999;
padding: 0 6px; }

#exbtn_size3 {
top: initial;
bottom: 5px;
left: 353px; }

#exbtn_size3::before {
content: "F";
font: bold 18px /22px Tahoma;
padding: 0 5px; }

#exbtn_size4 {
top: initial;
bottom: 32px;
left: 353px; }

#exbtn_size4::before {
content: "F";
font: bold 22px /22px Tahoma;
padding: 0 4px; }

#exbtn_fontcolor {
top: initial;
bottom: 5px;
left: 379px; }

#exbtn_fontcolor::before {
content: "\f031";
font: 16px /23px FontAwesome;
color: red;
padding: 0 1px; }

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

#exbtn_blockquote {
top: initial;
bottom: 32px;
left: 457px; }

#exbtn_blockquote::before {
content: "\f10d";
font: 13px /24px FontAwesome;
color: #1072c0;
padding: 0 5px; }

#exbtn_left {
top: initial;
bottom: 32px;
left: 392px; }

#exbtn_left::before {
content: "\f036";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_center {
top: initial;
bottom: 5px;
left: 405px; }

#exbtn_center::before {
content: "\f037";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_right {
top: initial;
bottom: 32px;
left: 418px; }

#exbtn_right::before {
content: "\f038";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_ol {
top: initial;
bottom: 32px;
left: 249px; }

#exbtn_ol::before {
content: "\f0cb";
font: 16px /23px FontAwesome;
padding: 0 3px; }

#exbtn_ul {
top: initial;
bottom: 32px;
left: 223px; }

#exbtn_ul::before {
content: "\f0ca";
font: 16px /23px FontAwesome;
padding: 0 3px; }

#exbtn_indent {
top: initial;
bottom: 32px;
left: 275px; }

#exbtn_indent::before {
content: "\f03c";
font: 16px /24px FontAwesome;
color: #1072c0;
padding: 0 3px; }

#exbtn_indent.disabledBtn::before {
opacity: 0.1; }

#exbtn_outdent {
top: initial;
bottom: 32px;
left: 301px; }

#exbtn_outdent::before {
content: "\f03b";
font: 16px /24px FontAwesome;
color: #1072c0;
padding: 0 3px; }

#exbtn_outdent.disabledBtn::before {
opacity: 0.1; }

#exbtn_hr {
top: initial;
bottom: 32px;
left: 483px; }

#exbtn_hr::before {
content: "\f0c8";
font: 16px /23px FontAwesome;
color: #cae0eb;
padding: 0 4px; }

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

#exbtn_emoji {
top: initial;
bottom: 5px;
left: 601px; }

#exbtn_emoji::before {
content: "\f118";
font: 16px /22px FontAwesome;
color: #ff8f00;
padding: 0 4px; }

#exbtn_youtube {
top: initial;
bottom: 5px;
left: 575px; }

#exbtn_youtube::before {
content: "\f167";
font: 16px /22px FontAwesome;
color: #be074a;
padding: 0 4px; }

#exbtn_instagram {
top: initial;
bottom: 5px;
left: 549px; }

#exbtn_instagram::before {
content: "\f16d";
font: 16px /23px FontAwesome;
color: #ff03d6;
padding: 0 4px; }

#exbtn_map {
top: initial;
bottom: 5px;
left: 627px; }

#exbtn_map::before {
content: "\f0f2";
font: 18px /22px FontAwesome;
color: #B2EBF2;
padding: 0 2px; }

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

#exbtn_genre {
top: initial;
bottom: 5px;
left: 653px; }

#exbtn_genre::before {
content: "\f07c";
font: 16px /24px FontAwesome;
color: #e39009;
padding: 0 3px; }

#exbtn_amazon {
top: initial;
bottom: 5px;
left: 679px; }

#exbtn_amazon::before {
content: "\f02d";
font: 16px /23px FontAwesome;
color: #4a8c83;
padding: 0 3px; }

#exbtn_removeformat {
top: initial;
bottom: 5px;
left: 438px; }

#exbtn_removeformat::before {
content: "\f00d";
font: 16px /21px FontAwesome;
color: red;
padding: 0 4px; }

#exbtn_removeformat.disabledBtn::before {
opacity: 0.1; }

#exbtn_undo {
top: initial;
bottom: 5px;
left: 464px; }

#exbtn_undo::before {
content: "\f0e2";
font: 18px /24px FontAwesome;
color: #4dbef7;
padding: 0 4px; }

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

#exbtn_undo.disabledBtn::before,
#exbtn_undo.disabledBtn::after {
opacity: 0.1; }

#exbtn_redo {
top: initial;
bottom: 5px;
left: 490px; }

#exbtn_redo::before {
content: "\f01e";
font: 18px /24px FontAwesome;
color: #4dbef7;
padding: 0 3px; }

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

#exbtn_redo.disabledBtn::before,
#exbtn_redo.disabledBtn::after {
opacity: 0.1; }

#exbtn_autoeol {
top: initial;
bottom: 5px;
left: 190px;
background:#ddd !important; }

#exbtn_autoeol.disabledBtn {
opacity: 0; }

#exbtn_autoeol.activeBtn {
background: red !important; }

#exbtn_autoeol::before {
content: "\f149";
font: 18px /22px FontAwesome;
color: #fff;
padding: 0px 5px;
display: block;
transform: rotate(90deg); }


#exbtn_status {
position: absolute;
bottom: 5px;
right: 0;
margin: 0;
padding: 2px 2px 0px 2px;
height: 19px;
width: auto;
font-size: 13px;
color: blue;
text-align: center;
background: white;
border: 1px solid #ccc;
border-radius: 3px; }



/* キャンペーン枠・みんなの投稿枠・お知らせリスト */

.campaign-container {
position: absolute;
bottom: 0;
margin: 0 0 0 0;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%); }

.campaign-container::before {
content: "C";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold; }

.campaign-container:hover {
margin: 0 0 0 0;
padding: 20px 40px 10px;
width: calc(100% - 292px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


#blog2media {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 0 30px;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%); }

#blog2media .boxHead {
display: block; }

#blog2media::before {
content: "M";
position: absolute;
top: 5px;
left: 3px;
color: #666;
font-weight: bold; }

#blog2media:hover {
margin: 0 0 0 0;
padding: 15px 40px 20px;
width: calc(100% - 210px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


#announceList {
position: absolute;
top: 726px;
margin: 0 0 0 60px;
padding: 0;
max-width: 18px;
max-height: 28px;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#effaff 0%,#bce8f1 100%); }

#announceList ul li {
margin: 10px 30px; }

#announceList ul li::before {
content: "A";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold;
text-shadow: none; }

#announceList:hover {
top: initial;
bottom: 0;
margin: 0 0 0 0;
padding: 30px 0 10px;
max-width: none;
width: calc(100% - 212px);
max-height: 300px;
transition: max-height 1s;
z-index: 5; }



/* 背景色デザイン */

body , .hasmenu #contents , #entryMoreArea ,
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover , #announceList:hover {
background: #a4c1ce; } /* 編集画面 背景色 */






スタイル名 : 画像パレットCSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/parts/image/
以下の枠内のCSSコードを貼り付けます



/* Firefox版 ver.5 画像パレットCSS 2017.09.14 */

#partsImage #droppable {
font-size: 13px;
margin: 5px 5px 10px;
color: #fff;
background: #459bc5;
box-shadow: none; }

#partsImage #droppable:hover {
background: #b8e2f7; }

#partsImage .mod-fileUpload {
margin: 0 5px; }

#partsImage .fileUploadWrapper {
border: none;
margin: 0; }

#partsImage .fileUploadWrapper span,
#partsImage .fileUploadWrapper input {
font-size: 13px;
padding: 0 1px !important; }

#partsImage .fileUploadWrapper .fileUploadBtm {
position: absolute;
top: 0;
left: 72px;
width: 83px; }

#partsImage .optionGroup {
margin: 0 0 0 15px;
padding: 0; }

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

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


#partsImageContainer {
overflow-y: scroll;
margin: 0 5px 10px;
height: 356px; }

#partsImageContainer li {
margin: 0;
width: 132px;
height: 90px; }

#partsImageContainer input {
position: relative;
left: 53px; }

#partsImageContainer input[type=submit][value="×"]:hover {
background: red;
color: #fff;
font-weight: bold; }

#partsImageContainer li a {
background-size: cover;
width: 128px;
height: 86px; }

#partsImage .pager {
margin: 0; }

#partsImage .pager li {
margin: 0 2px; }

#partsImage .alert {
margin: 0; }





スタイル名 : テンプレート編集CSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/template/
以下の枠内のCSSコードを貼り付けます

「テンプレート作成・編集」を行わない場合は、この「テンプレート編集CSS」を登録する必要はありません。 この登録は「テンプレート作成」画面の一部の表示崩れを修正するものです。



/* Firefox版 ver.5 テンプレート編集CSS 2017.09.14 */

#editTemplateList {
position: absolute;
top: 15px;
left: 575px;
height: 28px;
width: 510px;
padding: 0 !important;
border: none !important;
background: none; }

#editTemplateList select {
position: absolute;
left: 400px;
min-width: 10px;
width: 21px;
height: 28px;
padding: 4px 10px 0px;
font-size:13px;
box-shadow: none;
opacity: 0; } /* Fox 追加 */

#editTemplateList select:hover {
left: 22px;
width: 400px;
z-index: 3;
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; }


#editTemplateList .fR {
width: 80px;
height: 28px;
border-radius: 3px; }

#editTemplateList .fR:hover {
width: 160px;
position: relative;
z-index: 3; }

#editTemplateList .fR a {
padding: 3px 2px; }

#entryEditTmpTitle {
position: absolute;
top: 15px;
left: 938px;
z-index: 1; }

#entryEditTmpTitle :hover {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle :focus {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle .alert {
position: absolute;
right: 0px;
z-index: -1; }

.alert.alert-green {
position: absolute;
top: 10px;
z-index: 5; }



#sidemenu {
display: none; }


#entryTrackback .boxHead.head-h3 {
display: block;
margin: 0 0 -35px;
background: none; }

#entryTrackbackTextarea {
margin: 0 0 0 420px;
width: calc(100% - 420px);
padding: 5px 0 0 20px; }

#entryTrackbackTextarea:hover {
width: 100%;
margin: 0;
padding: 5px 0 0 150px; }

textarea#entryTrackbackTextarea:focus {
height: 80px;
width: 100%;
margin: 0;
padding: 5px 0 0 150px; }






スタイル名 : フリーページ編集CSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/fp/
以下の枠内のCSSコードを貼り付けます

「フリーページの作成・編集」を行わない場合は、この「フリーページ編集CSS」を登録する必要はありません。 この登録は「フリーページ編集画面」の一部の表示崩れを修正するものです。



/* Firefox版 ver.5 フリーページ編集CSS 2017.09.14 */

#entryEditHead-new tr:first-child td {
position: absolute;
left: 700px;
top: 10px; }

#entryEditHead-new tr:last-child td:first-child {
position: absolute;
left: 600px;
top: 15px; }

#entryEditHead-new tr:last-child {
position: absolute;
left: 350px;
top: 15px;
background: #fff;
height: 26px;
padding: 0 0 0 15px;
border: 1px solid #ccc;
border-radius: 3px; }

#entryEditCategory {
position: absolute;
left: 247px;
top: -1px;
width: 100px; }

#entryEditCategory input {
font-weight: bold; }

#entryEditCategory .alert {
left: 205px; }


#entryOptionsPpenflag {
position: absolute;
bottom: initial;
top: 683px;
left: 5px;
width: 350px !important; }

#announceList {
display: none; }

#myblogBtn {
display: none; }






スタイル名 : オプションCSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます

各「表示オプション」「非表示オプション」の必要な項のみを残し、他は行ごと削除します。 また、オプションが不要の場合は、この「オプションCSS」を登録する必要はありません。



/* Firefox版 ver.5 オプションCSS 2017.09.14 */


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

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


/* お勧めブログテーマ 非表示 */

#trb_themeTtl {
display: none; }


/* キャンペーン 非表示 */

.campaign-container {
display: none; }


/* みんなの投稿 非表示 */

#blog2media {
display: none; }


/* お知らせリスト 非表示 */

#announceList {
display: none; }






スタイル名 : 編集終了画面CSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/complete/
以下の枠内のCSSコードを貼り付けます

編集終了時に「マイブログへ」等のスイッチがある「編集終了画面」が表示されます。 この登録は、その画面の表示崩れを修正するものです。 この崩れを気にしない場合は「編集終了画面CSS」を登録する必要はありません。



/* Firefox版 ver.5 編集終了画面CSS 2017.09.14 */

.url a {
font-size: medium;
padding: 4px 40px 2px;
border: 1px solid #aaa;
border-radius: 3px;
color: #335c6f;
background: linear-gradient(to bottom, #e2f2f9 0%,#a5c2cf 100%);
text-decoration: none; }

.url a:hover {
background: #a3d7ef; }

#wrapperInner {
padding: 15px; }

.notesInner {
position: static; }

.notesBoxHead {
position: static;
padding: 0 10px;
width: auto;
background: none; }

.notesBoxHead h1::before {
content: none; }

#menu {
display: none; }






基本CSSの最後の「背景色デザイン」項で、編集画面全体の背景色を指定しています。 ここのカラーコードを変更すれば、簡単に好みの背景色に設定できます。 また、背景色の代わりにテクスチャー画像を使用することが可能です。 手順は以下のページを参考にしてください。

また、編集画面の各部ごとの背景色の詳細については、以下のページを参考にしてください。


配色の設定変更の指定は「基本CSSの末尾」か「オプションCSS」に追記します。 画像パレット部の配色変更の指定は「画像パレットCSS末尾」に追記してください。


 起動時に画像パレットCSSを読込めない問題 

「Stylus」では、編集画面の起動時に、画像パレットのみアレンジされません。「年月の選択」を一度切り替えるか、画像を登録を一度すると、以降はアレンジが適応されます。 これだけが現在解決できない問題点です。 今後、改善を追及したいと思っています。

「Stylish」の現在のバージョンは、Firefox拡張の「旧型」扱いですが、現状は問題なく動作します。 適応先の指定は、手書きで「Mozilla Format」で書き込み登録する形になります。 しかし、こちらは「Stylus」の問題が発生しません。 商用化問題と拡張機能の新しい基準でない事を厭わないなら、良い環境と言えます。

また「Stylish」にはこの問題が無く、「Stylus」が β版なので、今後に問題が改善される可能性は有り得ます。




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



[PR]
by Ataron | 2017-09-15 17:34 | ブログスキンのアレンジ | Comments(0)

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

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

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

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要素のボタンデザインが合わない。

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%拡大時。

a0349576_09544239.png

ChromeやIE11はボタンが画面拡大に応じて拡大し、これは 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が反映して、以降は正常になる。

a0349576_10543721.png

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



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




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



[PR]
by Ataron | 2017-09-14 11:09 | ブログスキンのアレンジ | Comments(0)

Stylus の導入と設定方法(Firefox拡張機能)

2017年 09月 13日
ブラウザFirefoxで使用できるユーザースタイルシート拡張機能を探すと、有名な「Stylish」が目立ちます。 しかしこれは、ユーザーデータの無断利用問題が報告されていて、却下しました。 更に探すと、このStylishを新開発チームがブラシュアップした「Stylus」が発表されていました。 これは先の問題はなく、実際に問題なく使用出来、また今後の開発も期待出来そうです。 操作はStylishを継承していて「Stylish」からの乗り換えして、過去資産の継承も可能な様です。

以下に、このFirefox拡張機能「Stylus」の導入と設定方法について、簡単に説明します。 なお、ここの説明はブラウザにFirefoxを使用している事を前提にしています。


 拡張機能「Stylus」を Firefoxに導入する 

Firefoxで以下のリンクをクリックして「Stylus」のページに行きます。(「Firefoxのアドオン管理サイト」内のStylusのページです)

拡張機能「Stylus」のFirefoxへの導入は、このページで「 Firefoxへ追加」を押すだけです。

a0349576_17283180.png

Firefoxのツールバーで下の様にStylusの追加が表示され、右端に「S」字のアイコンが出来ます。

a0349576_17331862.png

Stylusのアイコンを左クリックすると、下の様に小メニューが出ます。

a0349576_17360748.png



 オプション と 管理画面 

「オプション」を押すと以下のページが開きます。「更新」はユーザーの投稿デザイン収集機能で、余り有用とは思えません。 私は「0」で、自動更新OFFとしました。 アイコン色は好みに設定します。

a0349576_18073458.png

アイコン左クリックから「管理」を押すと、Stylusの「管理画面」が開きます。 スタイル登録や管理など、主要な操作はここを中心に行います。 下は最初の状態で、未だ登録がないので右側は空白です。

a0349576_18162267.png



 スタイルの登録と管理 

 スタイルの登録 

早速、上図の様に「新しいスタイルを作成」を押して、サンプルのスタイルを作ってみます。
このボタンで下の様な「スタイル編集」の画面になります。

a0349576_12111059.png

上図の3ヵ所は、スタイルの主要な3つの要点です。

スタイルの名前(後で判断し易い任意の名前を付けます)
スタイルの適応先(スタイルを適応するURLの範囲指定)
スタイルのCSSコード

上図のサンプルは、「赤くぬれ」 「すべて」 「*{ color: red; }」と記入しています。 編集が出来れば、左上の「保存」を押します。(有効のチェックは外さない様に)

a0349576_18501461.png

これで「赤くぬれ」のスタイルが登録されます。 編集内容に問題がなければ、このスタイルが Firefoxの中で働き始めます。「保存」を押した途端に、下の様にページ内の文字が赤になります。

a0349576_18540726.png

この編集画面もFirefoxの画面なので、登録したコードが適応されたわけです。 色々なサイトを開けば、画面の文字の一部が赤く変化しているはずです。


 スタイルの無効化 

このスタイルを削除するのではなく一時的に「無効化」するには、の下の「□有効」のチェックを外し、再び「保存」を押します。 チェックを入れて「保存」を押すと、再びスタイルが「有効」になります。

a0349576_19024539.png

左メニューの「管理画面に戻る」を押すと、Stylusの「管理画面」に戻ります。

a0349576_19082245.png


 スタイルの管理 

Stylusの「管理画面」の右側には、編集して登録したスタイルが並びます。(下図は先ほどの1個だけですが)

a0349576_19365729.png

この右画面のリストは、スタイル管理の主要ツールです。

a0349576_19553932.png

チェックボックスは「有効」「無効化」を直接に切り替えができます。「保存」は不要です。
スタイル名をクリックすると、そのスタイルの編集画面が開きスタイル編集が出来ます。
「×」ボタンは、スタイルを削除します。 バックアップが無い場合は永久に失われます。


 スタイルの適応先の設定 

「スタイルの登録」で、先ほどは 「すべて」の設定で説明しましたが、実際には細かな指定が必要になる場合が多くあります。 適応先のコントロールが上手く出来るかどうかで、快適さは大きく違います。

適応先の「個別指定」を押します。

a0349576_12193220.png

下の様に、 の枠が出ます。

a0349576_20451914.png

更に をクリックすると4種の指定形式が出ます。

a0349576_20550233.png

は URLの記入枠ですが、不用意な末尾の半角空白も判定対象になり、正確な入力が必要です。 適応先の範囲は、この の組み合わせで決まります。 この設定の区別は大事で、正しく理解しておく事をお勧めします。


 適応先設定の区別 

URL
これは のURLに完全に一致したページにのみ、スタイルが適応されます。
の記述は「http://」「https://」を省略した表記は不適となり、適応されません。

次で始まる URL
前方一致です。 URLの左側からの文字が一致していれば、スタイルが適応されます。
の記述は「http://」「https://」を省略すると不適となり、適応されません。
の記述の右側は、ドメイン名やサブディレクトリ名の途中で途切れていても構いません。

ドメイン上の URL
の記述がドメイン名(サブドメイン名を含む)として有効なら、そのドメインとサブディレクトリにスタイルが適応されます。
の記述に「http://」や、末尾の「/」があるとドメイン名にならず、不適で適応されません。
▪サブドメイン名が異なるサブドメインどうしは、別ドメインとして適応されません。
▪ドメイン名への指定はそのサブドメインにも適応されますが、その逆は適応されません。

正規表現に一致する URL
これは正規表現検索でフィットするURLに、スタイルを適応します。 特殊で一般的でないので、正規表現に関してはネットで調べて下さい。

なお、ドメイン・サブドメイン・サブディレクトリに関しては、以下を参照ください。


 適応先設定の追加と削除 

先の図の 「削除」「追加」 のボタンで、適応先の設定が削除・追加できます。「追加」を押すと、下図の様に新しい ❼ ❽ の枠が出来ます。

a0349576_22101646.png

行ごとに1つの範囲を指定し、範囲が追加されますが、左側 の指定形式は一致している必要はありません。「削除」ボタンによって、指定は行単位で削除されます。




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



[PR]
by Ataron | 2017-09-13 23:25 | ブログスキンのアレンジ | Comments(0)

Chrome DevTools を使ってみよう (25) ページの先頭に戻るスイッチ(スクロールしない表示パーツ)

2017年 09月 09日
エキサイトブログのトップページは、スクロールしない表示パーツが2ヵ所使われています。 DevToolsを使って、これらの機能を調べます。 以下のリンク先をサンプルにしているので、Chrome DevToolsで開きながら読まれると、より判り易いと思います。



 スクロールしない表示パーツ 


トップページを中ほどまでスクロールダウンすると、最上部に横長でユーザーメニューのあるバーと、下部の右側に「↑PAGE TOP」のページの先頭に戻るスイッチが出ます。 ページの上半分を見ているとこれらは表示されず、中ほどから表示される演出は「script」によるもので、これはエキサイトの場合はユーザーアレンジで盛り込めない(有料会員なら別?)機能です。

「script」は別件として、これらの表示要素はスクロールされず、ウインドウの決まった場所に留まり続けます。 その構成は、ブログスキンのHTMLとCSSのアレンジとして利用できるものです。


 メニューバー 

表示された上部のメニューバーをターゲットとして、DevToolsを開いてみます。

a0349576_21264983.png

メニューバーは「.navHeader.is-scroll」という要素です。 Toolsの右ウインドウ(CSS)を見ると「position: fixed;」が、このバーをスクロールさせない配置指定です。「fixed」はウインドウの決まった場所に要素を固定表示させます。 背景画像を固定したり、このページの様に一部のパーツを固定にするデザインは、ほぼこれを利用しています。 最初は少し面白いが、目新しさだけに終わる様に感じて、私は余り使う気になりませんが、成否はセンスの問題と思います。

このページの場合は、本来はユーザーのブログへの入口画面でもあるので、下方向にスクロールした人も直ぐブログに入れる様に計らったデザインと思います。 まあ、途中からバーを出さず、最初から固定でも良いのですけど。


 ページの先頭に戻るスイッチ 

特にこちらは、ブログスキンに導入したい人は多いかも知れません。 こちらもページ途中から表示され(これは煩くなくて良い仕組みと思いますが、その仕組みは「script」で利用出来ません。 しかし、常にウインドウ隅に表示される形であれば、問題なく導入出来ます。 従って、ブログ画面の余白部分に邪魔にならない形で表示させるとか、コンパクトで意味の判るスイッチにするとか、半透過のデザインにするなど、ブログのデザインに合せた工夫の必要があると思います。

DevToolsで、この「↑PAGE TOP」のスイッチを調べてみます。

a0349576_21580803.png

このボタンは「.nav-pagetop」という要素で、やはり「position: fixed;」が指定されていて、「right: 20px; bottom: 20px;」の配置指定です。(上図はChrome画面の縦を狭めていますが、普通に拡げても「右下隅」の配置は変わりません)

このボタンの機能のミソは、Toolsの左ウインドウの「▶」をクリックして「.nav-pagetop」の中身を見ると判ります。

a0349576_22073232.png

中に「<a href="#wrapper">↑PAGE TOP</a>」というリンクが収められていて、「#wrapper」はこのページの全域を包む要素です。 このボタンをクリックすると、ブラウザはリンク先の「#wrapper」に飛びますが、その結果としてページを先頭から表示する事になります。 この様に全体を包む要素をリンク先に指定するのもOKですが、エキサイトヘッダー等の上端の要素をリンク先にしても同様の結果になります。

上図のTools左ウインドウ(HTML)を見ると、先の「メニューバー」も「↑PAGE TOP」スイッチも、このページを構成するHTMLの最後の方に置かれています。 これら「スクロールしない表示パーツ」は、他の要素に割り込んで邪魔になる場所でなければ、HTMLのどこに置いても問題はありません。

この事は、このスイッチを手本にして、自分のブログスキンのHTMLに独自のボタンの要素を書き込む場合の、参考になります。


 スイッチのHTMLとCSS 

このボタンの要素を発生させるHTMLと、それをデザインするCSSをToolsを使ってコピーしました。

HTML
<div class="nav-pagetop">
<a href="#wrapper">↑PAGE TOP</a>
</div>

CSS
.nav-pagetop {
position: fixed;
bottom: 20px;
right: 20px; }

.nav-pagetop a {
font-size: 1.2rem;
background: rgba(0, 0, 0, 0.8);
color: #fff !important;
padding: 10px;
border-radius: 5px;
display: inline-block;
transition: 0.2s; }

.nav-pagetop a:hover {
opacity: 0.6;
text-decoration: none; }

このデザインは、ブログスキンの「HTML全体」の適当な場所にHTMLを貼り付ける事と、「CSS」の最後など(適当な場所で良い)にCSSを貼り付ける事で、そのまま移植できます。

但し、リンク先の「#wrapper」だけは問題になります。 使用スキンでページ全体を包む要素が「#wrapper」なら使えますが、そんな名前の要素が上手い具合にあるとは限りません。 DevToolsで自ブログの構造を調べて、ページ全体を包む様な要素名(ID名やクラス名)を調べ、リンク先の「#wrapper」の部分を、それに書き換える必要があります。

また、ボタンの文字は「↑PAGE TOP」である必要はなく、別の「上へ」でも良く、記号文字「△」でも良いわけです。 これらはアイデア次第で、ページに適したデザインに出来ます。




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



[PR]
by Ataron | 2017-09-09 23:12 | ブログスキンのアレンジ | Comments(0)