Studio TA Subsite の案内とお知らせ

編集画面をアレンジする(30)/ エキサイトブログ 編集アイコンのグラフィックアレンジ

2017年 04月 23日
新世代「More拡張」に相当する(27)(28)(29)の版は、編集アイコンの輪郭を明瞭にするコードを盛り込んでいます。(このテクニックは(13)重箱の隅 番外編 のアレンジを標準アレンジとしたものです)

「More拡張」以前では、コード行が増えるのを嫌って編集アイコンの「配置」のみ標準アレンジに採り入れていました。 しかし、私自身の使用の実感として、ユーザースタイルシートのコードの増加が編集画面の表示速度や動作に影響を及ぼす印象はありません。 この経験から、編集アイコンの背景画像の「位置指定」も標準アレンジに追加しました。 それが「 編集アイコンの輪郭をくっきりさせる精密なアイコン指定」です。



スタイルシートの後半の「 /* 編集アイコン配置・デザイン */ 」の項目には、ずらりと編集アイコンの修飾項が並んでいます。 例えば最初の項は「 B:強調(太字)」を指定するアイコンの修飾項です。

Chrome版のコードでは、

#exbtn_bold {
top: initial;
bottom: 5px;
left: 223px;
background-position: -1px -1px; }

この部分を例に、どの様なアレンジをしたかを以下に説明します。

①編集アイコンの「配置」のアレンジ

「top: initial;」は、余り使わない指定ですが、ここでは不可欠です。
元のアイコン配置は「top」指定で、これを「bottom」指定に改めたかったのです。 しかし、単に「bottom: 5px;」とすると「top」指定が打ち消されず、bottom指定は無効になります。 では「top: 0;」等とすると、今度は「0」値が優先され、やはりbottom指定が無効なままです。 この場合は「top」指定が無かった事にする=リセットする記述が必要で、「top: initial;」とする以外にないのです。

話が外れましたが、「top: initial;」「bottom: 5px;」「left: 223px;」の3行で、編集アイコンの「配置」を指定しています。 これらの値を操作すれば、外枠の編集パネル内で編集アイコンの位置を自由に変更出来ます。

➁編集アイコンの背景画像の「位置指定」のアレンジ

最後の行「background-position: -1px -1px;」の指定は、編集アイコンの背景画像の「位置指定」で、これは「More拡張」で初めて採り入れました。

編集アイコンの絵は、実は全てのアイコンを網羅した1つの画像の一部です。 その全体は、下図の様に編集パネルの背景まで合体しています。

b0174191_10375232.gif

全てのアイコンはこの画像を背景として共用していて、その「どの部分を見せるか」だけが異なります。 アイコン画像を別個に読ませると通信速度の影響を受けるため、これはそれを節約する手法です。 良く見ると機能が無くなり表示されない旧いアイコンも残っています。 また、赤枠で囲んだ「リンク」の新アイコンは、リッチリンクの導入時に描き加えられました。

B:強調(太字)」のアイコンの絵は「background-position: -1px -1px;」つまり上の背景画像の左上隅から「右へ1px」「下へ1px」の場所を基点として、背景に表示するという指定です。 アイコンの枠線内部は「21×21px」で、背景の他の部分は隠れてしまうという塩梅です。

本来のエキサイトの編集アイコンは、アイコンの輪郭も画像です。 アイコン背景画像は23×23pixのサイズで、枠線分入みです。 編集アイコンの輪郭を明瞭にするアレンジでは、アイコンに「border-radius」の枠線指定を採り入れています。 そして画像の枠線は表示範囲から隠し、アイコン背景画像は21×21pixのみを利用します。

b0174191_11352657.png

細かな話ですが、この際に上の〇で囲んだ隅の1pixは、角丸の枠線に普通は隠れます。(枠線が角丸でないと隠れません)

さて、この「21×21pix」の範囲をアイコン絵に利用するので、全てのアイコンで背景画像の位置指定を縦横1pixずつシフトさせる必要があります。 先の「background-position: -1px -1px;」の指定は、既にアレンジした値で、エキサイトの本来は「background-position: 0px 0px;」です。 この様な位置指定のシフトを、全てのアイコンに関して書き換えています。

「More拡張」版の「編集アイコンの輪郭をくっきりさせる精密なアイコン指定」というのは、以上の様に「アイコン枠の自前の描画」と「アイコン背景画像の位置指定のシフト」で実現しています。



オリジナルの編集アイコンを使う

「More拡張」版は、エキサイトデフォルトの「アイコンの絵」を利用しています。 そのURLは以下です。

http://image.excite.co.jp/jp/exblog/userconf/images/entry/ico_exeditor.gif

これをブラウザのURL枠にペーストすれば、直接表示させて「アイコンの絵」をダウンロード出来ます。
通常、編集アイコンはこのデザインで充分ですが、オリジナルの編集アイコンをデザインするのも、大いにありです。 私は、特に「自動改行」の有無を目立たせたくて「アイコンの絵」を一部改造しています。

a0349576_13111152.png

▪「自動改行」「リンク」「取り消し」「やり直し」「文字サイズ」などのデザインを変えています。
▪ アイコンの枠線を全て消しています。
▪ ファイル形式は元と同じ「.gif」が無難ですが「.png」も可能です。

〔注意〕IE11は、ユーザースタイルシートの動作仕様が「気難しい」傾向があり、アイコンが全て「B」になる不具合に悩まされました。 背景画像を「.png」形式で作成した場合、背景画像を編集するアプリを選び、PhotoShopの「.png」ならOKという事がありました。 セレクタ指定も、この項に関しては下記の「.panelBtn」の形でないと正常に働きません。

オリジナルデザインの「アイコンの絵」を利用手順は、テクスチャー画像を利用するのと同じです。
先ず「オリジナルのアイコンの絵」をブログに投稿する画像と同様にアップロードします。 アップロード後の「アイコンの絵」を右クリックして、Chromeなら「リンクのアドレスをコピー」しメモ帳にペーストすれば、アップロード後のアドレスが判ります。 IE11では「プロパティ」で知ることが出来ます。

b0174191_14180415.png

このアドレスを以下のオプションコードの「URL」の青い文字の部分にペーストした上で、基本のスタイルシートの最後に追記すれば、オリジナルのアイコンが表示される様になります。

●アイコンの絵(オリジナル)の指定オプション

Chrome版
.panelBtn {
background: url("http://pds.exblog.jp/pds/~~~ ~~~.gif") no-repeat; }

IE11版
.panelBtn {
background: url("http://pds.exblog.jp/pds/~~~ ~~~.gif") no-repeat !important; }




[PR]
by Ataron | 2017-04-23 13:54 | ブログスキンのアレンジ | Comments(0)
名前
URL
削除用パスワード

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