Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ(46) 自動改行のON/OFFを明瞭に

2017年 08月 03日
HTML編集画面の扱いで, 自動改行がONかOFFかで、編集操作が大きく異なります。 もちろん、慣れた方には自明の事ですが、一時的な切り替えのつもりが戻し忘れ、操作のやり直しをする事があります。 そういう経験から、HTML編集に切り替えた際に、明確にONかOFFかが目に入る様に、「自動改行」の編集アイコンはモード切替スイッチのすぐ傍に置いています。

更に、私はアイコンの絵をアレンジして、ONの時は赤で目立つ様にしていますが、少しスキルを必要とするアレンジで一般的ではありません。 そこで、オプションコードの追加のみで、このアイコンのデザインを変える方法を考えました。



「自動改行」の編集アイコンは、3つのセレクタを使いわけています。 以下がその組み合わせです。

◎「通常編集」モード : #exbtn_autoeol.disabledBtn

a0349576_18514614.png

◎「HTML編集」モード / 自動改行OFF : #exbtn_autoeol

a0349576_18530408.png

◎「HTML編集」モード / 自動改行ON : #exbtn_autoeol.activeBtn

a0349576_18542462.png

最後の「自動改行ON」のアイコンは、いまひとつ目立ちません。 他の2つはそのままですが、この黄色いアイコンのデザインを変えてしまいます。

このアレンジは、擬似要素の「::before」を使いました。 上のアイコンは背景画像でその絵柄を表示していますが、その上に文字を書き込むといった操作です。


〔 アレンジ 1 〕
元の絵を利用して、空白漢字を書き込み、文字の透過背景色を着色フィルターとして利用するという、少しトリッキーな方法です。

#exbtn_autoeol.activeBtn::before {
background: rgba(255,0,0,0.6);
content: " "; /* 漢字の空白 */
font-size: 24px; }

文字は漢字の空白「 」を使いましたが、「24px」の文字サイズでアイコン絵から文字背景がはみだし、フィルターが完全になりました。 下図は文字の背景色「background」で「赤の透過度0.6」を指定した様子です。

a0349576_19163766.png

透過背景を濃くすると絵柄が見えなくなり深紅にはできませんが、一応目的を達しています。


〔 アレンジ 2 〕
背景の絵は無視して非透過の赤でカバーし、白の文字色で文字を嵌め込みました。

#exbtn_autoeol.activeBtn::before {
background: red;
content: ": br :";
font-size: 16px;
font-family: Meiryo;
font-weight: bold;
color: #fff;
margin-left: -11px;
white-space: nowrap; }

#exbtn_autoeol.activeBtn {
border: 1px solid #fff !important; }

背景は「red」で非透過、書き込む文字は「: br :」としていますが、両側に漢字空白を入力しても、半角英数扱いになりスペースが出来ません。 仕方なくコロン「:」と半角空白をスペーサーにしています。「br」は思い着きですが、フォント、サイズ、ボールド、文字色を指定して、デザインを固定しています。「margin-left」は文字の左右位置指定、「white-space」は文字が改行抑止で必須です。

下の様に、鮮やかな赤が使えました。

a0349576_19504254.png

しかし、眼の錯覚で、他より枠線が薄く見えます。 上記のコードの2項目はこのアイコンだけ枠線を白に変える指定で、これを加えると下図の様になります。

a0349576_19534348.png


〔 アレンジ 2 バリエーション〕
今度も目の錯覚で、逆にアイコンが大きく見えます。 これでも良いのですが、枠線の幅を「0.5px」に指定しました。 私は長いこと、ここは整数値と思いこんでいましたが、小数も使えるんですね。
上側の項は先と同じで変わる所は「0.5px」だけですが、これをお勧めのオプションとしておきます。(注:このオプションは Chrome版・IE11版に共用できます)


/* 自動改行ON:赤色アイコン オプション */

#exbtn_autoeol.activeBtn::before {
background: red;
content: ": br :";
font-size: 16px;
font-family: Meiryo;
font-weight: bold;
color: #fff;
margin-left: -11px;
white-space: nowrap; }

#exbtn_autoeol.activeBtn {
border: 0.5px solid #fff !important; }


a0349576_19575116.png

どうでしょう、遠目ではこれ位の方が落ち着く様に思います。

赤よりグリーンがスマートと感じる人が居るかも知れません。 色指定はいくらでも可能です。

a0349576_19591679.png

また、スタイルシートの環境は、自分のPCに有るフォントから、色々と選べるでしょうから、好みの文字でアイコンを工夫出来ます。 フォントを思いきり小さくしてアスキーアートって、まあ暇な人は試して見てください。




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



[PR]
by Ataron | 2017-08-03 20:22 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/27028202
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

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