Studio TA Subsite の案内とお知らせ

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

2018年 08月 02日

デザインの定まらない「おすすめブログテーマ」


エキサイト編集画面で「おすすめブログテーマ」は、全く無い時期もあれば、季節に合わせて突然に表示されたりします。 今まで、この表示の割り込みでアレンジデザインが崩れ、何度も対策をして来ました。 さすがに崩れ難くなりましたが...

以下は今期の様子ですが、右下にテーマ投入が開始された事を教えるために、小さな通知枠が表示され、テーマ表示の一部が見えています。 これは、一応設計の通りです。

a0349576_17450007.png

マウスを乗せると、中身が全て表示されるデザインでしたが、実際は以下の様に右が切れてます。

a0349576_17491013.png

今回は2個のテーマを投入して来た上に、サイズも横に大きくなり、従来のデザインではその全てを表示できなくなっているのです。 アレンジをOFFにして、今回の「おすすめブログテーマ」の全体を見ると、下の様に大きなものです。

a0349576_17515185.png

こんな大サイズの表示にも対応できる様に、フォバー時の表示を編集画面上に持って来る事にしました。 また、今回のテーマは「padding-top」を指定されていて、通知枠の隅に追いやられています。 こういう問題にも対応する事に。

下は、新しいアレンジの通知枠の状態で、通知枠いっぱいにテーマが表示されています。

a0349576_18003060.png

マウスを乗せた時は、下の様にハーフトーンの背景がせり上がり、中央に「おすすめブログテーマ」が表示されます。 これだけ余裕があれば、隠れる事はないでしょう。

a0349576_18033960.png

IE11版の再アレンジは比較的簡単でしたが、Chrome版やFirefox版は「z-index」の問題がありました。 従来コードでは拡張するテーマ枠が、画像パレットや下部メニューの下に潜り込みます。 今回は、上部のタイトル編集枠周辺から「z-index」指定を整理しなおし、ようやく上記のせりあがりデザインを実現できました。

スタイルシートは「Chrome版 / Firefox版 - More拡張 ver.7.3」に更新しています。



Excite Blog Writer を使用するには


「Excite Blog Writer」で編集画面をアレンジするには、ユーザースタイルシート拡張機能「Stylus」がブラウザに導入されている必要があります。

❶ 使用しているブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先を参照ください。「Stylus」の導入と基本的な使用方法を纏めているので、まず使用ブラウザに適合した「Stylus」を導入をしてください。 既に「Stylus」を導入している場合は、この作業は不要です。


❷ アレンジスタイルの投稿サイト「userstyles.org」に、「Excite Blog Writer (Chrome)」「Excite Blog Writer (Firefox)」が登録されています。 これらは、このページのアレンジ内容で ver.7.3 に更新済です。
以下のリンク先を選択して、ブラウザに適合するスタイルを入手してください。

Excite Blog Writer(Chrome) --- More拡張 ver.7.3
Excite Blog Writer (Firefox) --- More拡張 ver.7.3
〔注意〕
上記リンクで「userstyles.org」の「Excite Blog Writer」のページが開きます。
「Excite Blog Writer」は、ページ上部のスタイルのサンプル画像の「右下」の Install Style を押すだけで簡単に「Stylus」にインストールされます。

但し、スタイルの「インストールスイッチ」に見える、まぎらわしい「ダウンロードスイッチ」があるので注意してください。 無関係で困ったアプリのインストールは必ず避けてください。




この記事はカテゴリ「ブログ」にトラックバックしています。


[PR]
by Ataron | 2018-08-02 19:41 | ブログスキンのアレンジ | Comments(0)
名前
URL
削除用パスワード

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