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

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

2018年 11月 03日

「絵文字パレット」を移動可能にしました


「絵文字パレット」は「顔文字」(エモーティコン)を入力するためのパレットです。 編集アイコンの「絵文字」アイコンを押すと表示されます。 下は「Excite Blog Writer」を無効にした素の編集画面で、この「絵文字パレット」を表示させたところです。

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

良く似たパレットに「文字色パレット」があり、それはドラッグして編集の邪魔にならない場所に移動できますが、より邪魔になる「絵文字パレット」の方がドラッグが出来ません。 エキサイトは「絵文字パレット」を後で作り直したので、プログラマが忘れたのでしょう。

このパレットを以前もドラッグ可能にしようと考えましたが、その時は判らず諦めました。「Close」の部分をつまむとドラッグ出来ますが、ボタンに触れるので置くと消え、結局はドラッグできません。 今回、知恵が着いたのか、方法が判りました。

下は DevToolsで「絵文字パレット」の部分を表示した所ですが、「文字色パレット」のドラッグする部分と同じ場所に「drHandler」と言う名前の要素があり、これはつまり「ドラッグハンドル」だと気付いたのです。

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

ただ、この要素の高さは「0」で、表示部分が無いのでドラッグ出来ないらしい。 そこで DevToolsで、この要素「#emojibar」に「height: 20px;」を指定したのが下図です。

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

この指定で、めでたくパレットをドラッグできました。 ただ「ハンドル」が「絵文字のリスト」を押し下げているので、下のコードでこれを補正しました。

#emojibar {
position: relative;
height: 20px;
margin-bottom: -15px; }

「margin」で引き戻すと、引き戻した下の部分(透明で見えません)が「#emojibar」に被さりドラッグ出来なくなります。 そこで「position: relative;」を指定して表に出しています。 これで下の様に「絵文字のリスト」が良い位置になりました。

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

更に、「ハンドル」の部分が正確には見えずドラッグしぞこなうので、淡い背景色を付ける事に。 ついでに「文字色パレット」の「ハンドル」もデザインを合わせて背景色を付けました。 最終的な追加コードは以下です。

/* 文字色パレットのハンドル色 */
#palletbar {
background: #eee; }

/* 絵文字パレットのハンドル色と移動 */
#emojibar {
position: relative;
height: 18px;
margin: 0 5px -15px 0;
padding: 2px 0 0;
background: #eee; }

下は、移動可能になった「絵文字パレット」を「文字色パレット」と並べた所です。

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

このコードを追加して「Excite Blog Writer」を更新しました。



Excite Blog Writer を使用するには


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

❶ 使用しているブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先の「📌」マークの記事を参考にして、使用ブラウザに適合した「Stylus」を導入してください。 既に「Stylus」を導入している場合は、この作業は不要です。


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

  Excite Blog Writer(Chrome) --- More拡張 ver.7.7

  Excite Blog Writer (Firefox) --- More拡張 ver.7.7

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

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




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


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

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