Studio TA Subsite の案内とお知らせ

<   2016年 06月 ( 21 )   > この月の画像一覧

明石公園 2016.06.30 雨の日の配達人

2016年 06月 30日
雨が続く天気、今朝は曇っているだけと出かけるが、やっぱり少し降って来ました。

池に到着時はベンチに人影が無く、ハト様ポイントで池の上を偵察。 数分後に自転車に乗った客が現れ、近くの樹の下のベンチに座る。 雨を気にしない根性に「デキルナ」と感心。 歳は40代か、スマホらしきを取り出してベンチの主となりました。

なかなかハト達が現れず、ボートデッキを見ると一羽だけが居る様子。 根気よく待つと、ついにデッキからやって来はじめました。 実はもっとデッキに居たらしく、集まったハト達は12羽でした。 今日は彼等だけしか池周囲に居なかった様です。

マーカーは左ユビだけ、食事も充分に行き渡ったでしょう。
b0174191_14464799.jpg

Panasonic DMC-G3 + G14mm F2.5 で撮影、画像はクリックで拡大表示します。




[PR]
by Ataron | 2016-06-30 15:16 | 鳥さんの写真 | Comments(0)

明石公園 2016.06.27 食うべし

2016年 06月 27日
日曜を避け週が明けてから来たのですが、池周囲の半分ほどのベンチに人が居ました。

池岸に近付きながら林の中から偵察すると、先客の周りにハト達が集まってます。 到着は12時半、ゆっくり構えようと思っていたら、ハト達が私に気付いてしまいました。
b0174191_17440660.jpg
先客のオジサンは何もくれなかったのか、林の出口に居る私に向かって何羽も飛んで集まって来るのです。 その一番前にいたのは、やっぱり左ユビ。
b0174191_17484225.jpg

冬の間はよくこんな風に追いかけまわされたが、久しぶりの歓待です。 こうなったら仕方ない。 ハト達をぞろぞろ引き連れて^^; 少し北側の空いたベンチを探し、食事を一斉配布しました。 小出しにするとラッシュが余計に激しくなるのです。 案外と数は少なく、20羽ちょっと、マーカーは左アシとピンクしか判りません。
b0174191_17530746.jpg
今日はスズメ達が沢山、50羽以上がいそうです。 ハト達が食事に集まっている間にパンを配ったのですが、数が多くて行き渡りません。 下は集まったスズメ達の一部です。
b0174191_17562752.jpg
幼そうなのもけなげに争奪に加わってるので、そちらを狙って投げたりします。 パンはすぐに尽きて、私はそそくさと帰って来ました。 来た時はぞろぞろ私に着いて来て、帰る時は静かに見送るだけ、ハト達はなんか私の扱いを学習したかの様です。


Panasonic DMC-G3 + G14mm F2.5 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2016-06-27 18:10 | 鳥さんの写真 | Comments(0)

編集画面をアレンジする(13)/ エキサイトブログ 重箱の隅 番外編

2016年 06月 25日
ユーザースタイルシートでブログ編集画面をアレンジして来ましたが、配色を色々変えていると、ちょっとした「重箱の隅」に気付きました。 編集画面全体や編集アイコンパネルの背景色が白や淡いグレーでは目立たないが、そんな配色に合わせて作られた「ボタン」の隅が目立ってしまう場合があるのです。 下は背景にブルーがかったテクスチャーを設定した例です。

b0174191_12253706.png

400%に拡大していますが、赤矢印の白い点の部分です。 これは黒背景等ではもっと目立ちます。

簡単には、これらのボタンパーツのコーナーを「border-radius」で丸めて、この部分の背景画を隠すことで解決します。 下のCSSがその指定で、上の項は「▼スイッチ」、下の項は「編集アイコン」の指定です。


#entryEditTags span.tags a {
border-radius: 0 3px 3px 0; }

.panelBtn {
border-radius: 3px; }


この設定の結果、各スイッチは以下の様になります。(この改善用CSSは、各ブラッシュアップ版の配色オプションに追加しておきました。)

b0174191_12394433.png

ちなみに、編集アイコンの方の「border-radius: 3px;」を「23px」等に増やすと、ほぼ円のボタンになります。



ここで満足すれば良いが、少し気に入らない点があります。 ボタンはおそらく「border-radius」がHtmlに実装される以前のエキサイト初期からのデザインのままなのでしょう。 ボタンの丸い枠は「グラフィック」で表示され、レンダリングで描画される「border-radius」に鮮明さで劣るのです。

で、ちょっと試しに「Developer Tools」で「編集アイコン」に「border」と「border-radius」を指定し、ボタンの幅と高さを「border」で増えた分を減らし元の大きさにすると、以下の様になりました。

b0174191_12553190.png

上辺と左辺の絵の枠線は消えず「border」と「絵の枠線」が重なって太く見え、右辺と下辺は絵がボタンの範囲を超えて隠れ「border」のみが表示されています。 左上は簡単に思い通りには行かないわけです。

これをマトモにするには、各ボタンの絵を枠線だけ「左上」にずらして描画する指定にすれば良いのですが、これは実はボタンの数だけ指定しなおす必要があります。



編集画面のCSSを調べると、「ボタンの絵」のURLは「http://image.excite.co.jp/jp/exblog/userconf/images/entry/ico_exeditor.gif」です。 そして「ボタンの絵」の実体をダウンロードすると、下の様なGif画像です。

b0174191_13182537.gif

みな一つの画像に集められていて、ユーザーが編集画面を開いた時にこの画像を読み込ませ、後は必要な部分だけを描画させる手法です。 ボタン上にポインターが来たりボタンが押された時に、別のボタンの絵に差替えるというのは良くありますね。 そんな場合、ネット経由で別の絵をいちいち読みに行くと、処理が遅くなってしまいます。 また個別に読み込むよりトラフィック上の効率も良いでしょう。 この理由から、グラフィックを使ったボタンでは、この手法は常とう手段です。(これはCSSスプライトというそうですが、最近はCSSのコードだけで色々とボタンデザインが出来るので、そちらが増えている様です)

中央の幅のあるグレーは「アイコンパネルの背景」です。 下の茶背景のボタンは、右から2番目のが「HTML編集」で「自動改行あり」の時に出て来ます。 しかし、他の茶色いボタンの出番は不明で、多分使われてないのでは。

さて、Toolsで調べると、この画像の各ボタンの絵の呼び出しは、例えば「斜体(イタリック)」のスイッチなら、


#exbtn_italic {
background-position: -25px 0; }


と呼び出して描画しています。
指定は、上の「ボタンの絵」全体を、左へ25pxズラシて背景に描画するものですが、ボタン自身の大きさは小さく、他の部分は隠れて見えない塩梅です。 先の枠線の重複を改善するのに、このボタンなら「-26px -1px」と指定をすれば、上手く行きます。

しかし、この位置指定はボタンごとに異なり、全てを書き換えるのも少し手間です。 別の手として、この「ボタンの絵」の方をズラしたものに書き換えて、「ボタンの絵」のURLをその改造した画像のURLに指定すれば、いちいちCSS側で値を書き換える手間が省けます。

「ボタンの絵」の改造の要領としては、各中央の絵の部分は枠線の幅の「1pixel」ずつ「左方と上方」にズラし、絵の枠線は消します。 「アイコンパネルの背景」は私はもう使っていませんが、そのまま触らず、茶背景のアイコンも同じ要領で(茶背景の枠線は茶で消し)書換えます。

b0174191_14150228.png

描画される起点がアイコンの枠線の左上隅と判っていれば、趣味的に「ボタンの絵」を書き換える事が出来ます。 保存は「gif」「png」等が適していますが、元絵は「gif 256色」です。 厳密に元のサイズである必要はありませんが、左上隅から決まった位置を各アイコンのフェイスとして表示しますから、それに沿った「ボタンの絵」でなければおかしな表示になります。

ぱっと見は違いが判りませんが、下はズラして書換えた「改造したボタンの絵」です。
(下の画像が必要な方は、画像のリンク を押して、開いたブラウザタブの画像をコピペしてご使用ください)

b0174191_16014169.gif


これを、普通に画像アップロードして、そのURLを調べて以下のCSSに登録して使って見ました。


.panelBtn {
width: 21px;
height: 21px;
border: 1px solid #ccc;
border-radius: 3px;
background: url("http://pds.exblog.jp/pds/□□□□□.gif") no-repeat; }


上のCSSで「http://pds.exblog.jp/pds/□□□□□.gif」の部分は、アップロードした「改造したボタンの絵」のURLで、ユーザーごとにアップロードして調べる必要があります。 以前は「スキン編集画面」でアップロードした場合は扱いが異なったのですが、今は扱いが他のアップロード画像と同じになった様です。 私の場合、編集画像に使う背景のテクスチャーや「改造したボタンの絵」などは、今は普通にアップロードしたものを使っています。

下は、上のCSSをStylistに追加登録して、「border-radius」と「改造したボタンの絵」を使った様子です。

b0174191_15104148.png

ほんの僅かですがCoolになりました。 ついでに「Undo」「Redo」ボタンに色を付けたものをセットしてみた所。 こういう事を始めるときりがないですが...

b0174191_00072919.png

6月30日をもって「エキサイトブログマーケット」が終了し、そのアイコンが不要になりました。(ボタンの絵の一番右端のやつですね) エキサイトは単にCSSで表示を無くす対応でしたので、こちらで対応は不要です。



〔追記〕2019.09.30

リンク支援システムのグレードアッブで「リッチリンク機能」が追加されました。 エキサイトはこの機能のアピール目的で赤枠リンクアイコンを新設し、それをスイッチ背景に指定変更しています。 下図の左側は、新しいリンクアイコンで、右側は「ボタンの絵」の書換え更新された部分です。

b0174191_20154369.png

この新ボタンを表示するために、CSS上でリンクアイコンの背景画像の位置指定が、下段の側に更新されました。 CSS上の変更はそれのみですが、その結果、このページ後半で示した「改造したボタンの絵」を使用している場合は、リンクアイコンに下段の空白が表示されてしまいます。(リンクアイコンの機能は失われません)

「改造したボタンの絵」の下段に、リンクアイコンを加えて対応する事も出来ますが、もっと簡単な方法として、更新されたCSSの指定を元に戻せば問題は解決します。 今回は、この方法を採る事にしました。

以下に、「リンクアイコンの表示修復」の項を追記して、「改造したボタンの絵」を使用する場合のCSSをもう一度まとめておきます。


.panelBtn {
width: 21px;
height: 21px;
border: 1px solid #ccc;
border-radius: 3px;
background: url("http://pds.exblog.jp/pds/□□□□□.gif") no-repeat; }

li#exbtn_link {
background-position: -250px 0px; }


http://pds.exblog.jp/pds/□□□□□.gif」の部分は、アップロードした「改造したボタンの絵」のURLです。




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

明石公園 2016.06.24 また降られる

2016年 06月 24日
EU残留か離脱か、漂流し続ける時代。

昼から雨の予報、久しぶりに早く出て9時前に公園に着く。 ポイントから偵察していると、ボートデッキの横で水浴びをするハト達が見えました。 そう距離が無く、彼等は私に気付いてすぐにやって来ました。 池に着いてから5分位です。
b0174191_12335323.jpg
未だ濡れているのもいて、数は10羽ほどです。 早朝はハト達を見たことがなく、彼等は今日の最初の群れでしょう。
彼等と集まって来た20羽以上のスズメ達に、早速パンとハトの食事を。 少しスローペースで配り、他のハト達の現れるのを待ちましたが、結局後から来たのは2~3羽で、マーカーは一羽も居ません。

用意した食事を半分残して配布を止めると、しばらく後に彼等はいっせいに休みの樹の方へ飛んで行きました。 そのまま様子を見ていると、たまに南の方から(城の南からでしょう)小数の群れが池上にやってきて、旋回してから休みの樹あたりに降ります。 旋回は様子見で、きっと餌撒きを見つければ直行するのでしょう。 最後にピンクらしき目立つ姿を見つけたので、池を周って行ってみました。

b0174191_12340077.jpg
やっぱりピンクでした。 休みの樹の下で残った食事を撒いて呼び寄せたのですが、さっきは居なかった左アシも混ざっていました。 遠くからで判らなかったのですが、メンバーは少し入れ替わっていた様です。

時刻は未だ10時半ですが、雲行きが怪しくなって来ました。 少し早めに撤収したつもりが、今日も結局雨に濡れました。 左ユビは昼にならないと来ないのかも知れません。


Panasonic DMC-G3 + G14mm F2.5 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2016-06-24 13:01 | 鳥さんの写真 | Comments(0)

明石公園 2016.06.22 降られても

2016年 06月 22日
梅雨そのものの一日、午後は少しましで曇り空の下を公園に。 最初は殆ど雨が無かったが...

岸に着くと、小雨がみなもを騒がせています。 ハト様ポイント周辺にはさすがに人影がありません。

b0174191_16245609.jpg
ポイントで対岸を見渡していると、1~2分でボートデッキから1羽が飛んで来ました。 単独で警戒心があるのか、木の上から見下ろしてパンを投げても降りて来ません。 そのうち偵察の樹の方向から1羽がやって来て池柵にとまりました。 近付くと左ユビでした。 彼にパンを投げた時には、後から小集団が追いかけて着陸しました。


パンをハト達やチュン達、ムクッチ、アオドン等に分配、左ユビにはひいき目に投げてやります。
b0174191_16490582.jpg
パンが尽きてハトの食事を均等分配。 たまに人が通るだけで、いつもこうなら良いのに。 マーカーは左ユビについで左アシ。 やはり左アシは池岸に居る事が多い様です。 パンクもすぐに現れ、ピンクはずいぶん後になってから少々濡れてやって来ました。 今日は20羽前後の少数で、みなしっかり食べた様です。

帰りは少し降り出していて、久しぶりに濡れました。 梅雨の後には暑い夏が待ってます。


Panasonic DMC-G3 + G14mm F2.5 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2016-06-22 16:55 | 鳥さんの写真 | Comments(0)

エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge

2016年 06月 22日
Chromeでアクセスしたエキサイトの編集枠のペースト時の挙動について、前回と同様の方法で調べて見ました。

ペーストするテキストは以下のものです。
b0174191_21485095.png

〔Chromeの場合〕以下は、Chromeでアクセスしたエキサイトの編集枠に、上のテキストをペーストした様子です。

●「通常編集」にペーストする場合。 これは、自動改行のON/OFFは関係ありません。

①「通常編集」にペーストした直後は、空白行もインデントも表現され元のままです。
b0174191_00590088.png
➁「HTML編集」を開いて見ます。 下の様に各行が分解され「divタグ」でくるんで並べた様です。 IEの時の様な「pタグ」は全く使われず、空白行は「divタグ」で包んだ「brタグ」になってます。「pタグ」より賑やかですが、こちらの方が行の構成が良く判ります。
b0174191_01005037.png
➂再び「通常編集」に戻って見ます。 下の様に、空白行は元のまま表示されますが、インデントは無くなります。 行先頭の半角空白を表示しないのはブラウザのルール通りです。
b0174191_01103867.png
④プレビューして見ると「通常編集」と同じ表示です。 空白行は正しく表示され、インデントはルール通り無視されています。
b0174191_01110232.png
➄下は、インデントを表示させるために「preタグ」と「Meiryo指定」を「HTML編集」で書き込んだ所です。
b0174191_01145830.png

⑥「通常編集」で見ると「preタグ」によりインデントも表示され、元のテキスト通りの表現になっています。
b0174191_01153265.png
➆プレビューも全く同じで、元のテキスト通りに、空白行とインデントが表現されました。
b0174191_01175293.png
IEの場合と異なり、文字列に改行が入るごとに「divタグ」でくくる様です。 その処理は特異に見えますが、こちらの方が扱い易いと思っています。 空白行がしっかり判り、私には文書構成が判断し易いからです。 IEの場合と同じで、ペーストする文の文字列が長いものだと、その間は「div」分けが無くて賑やかさは減ります。 しかし、解釈処理の基準は同じです。 これはペースト時に生じるだけなく、「通常編集」で普通に入力する場合も「div」は良く出て来る様です。

●「HTML編集」にペーストする場合。 ペースト時は必ず「自動改行」をONにしている必要があります。 これを忘れると、実際に空白行が失われます。

⑧ペーストした直後です。 元の行間とインデントはそのままです。
b0174191_01275951.png
➈「通常編集」を開いて見ます。 この瞬間に「自動改行」で「brタグ」が書き込まれ、空白行は維持されますが、インデントが無くなります。 これはブラウザのルール通りです。
b0174191_01282682.png
➉もう一度「HTML編集」に戻ると「brタグ」が書き込まれています。「divタグ」が出ないので、やはりこちらが一番良いHtmlだと思います。
b0174191_01332140.png
⑪プレビューすると、空白行は元のテキスト通りですが、インデントはブラウザのルールに従い無視されています。
b0174191_01373814.png
⑫「HTML編集」で、インデントが表現される「preタグ」と「Meiryo指定」を書き込んだところです。
b0174191_01411986.png
⑬「通常編集」で見てみると、下の様に空白行とインデントが元のテキストの通り表現されています。
b0174191_01424938.png

⑭プレビューでも、空白行とインデントが元の通り表現されています。
b0174191_01443823.png
「HTML編集」にペーストすると「divタグ」が入らないので一番すっきりして良い結果です。 ただ、私は「div包み」に慣れて来た事と、「自動改行OFF」がHTMLを扱い易く、もっぱら「通常編集」にペーストしています。

いずれにせよ、私はChromeで編集する方が扱い易く感じます。 ブラウザによって編集枠が対応を変えるのは興味深い所です。 Edgeで同様のテストを行ったところ、Chromeと全く同じ結果になりました。 EdgeはChromeに近いのでしょうか。


〔纏めとして〕

ブラウザに関係なく、「通常編集」か「HTML編集+自動改行あり」にペーストする限り、ペーストの経過で元テキストの構成が失われ変形された様に見えても、実はその内容は失われていない。 失うとすれば、その後のテキスト部分への誤った加筆によってです。 ペーストした部分をすぐに下手に触らないのがコツ。 半角空白でインデントを表現したテキストは、テキスト部分を「preタグ」で囲む事で、半角空白をブラウザ上に表示させることが可能。

しかし「通常編集」枠上の表示は、ペーストの経過で変形された様に見える場合が多く、それを整形する事を前提にする場合は、一般に「HTML編集+自動改行あり」にペーストするのが無難。 これは「brタグ」解釈が行われ、改行や空白行が一番判り易く表現され、その後の整形がし易いから。

「通常編集」にペーストした場合、IEでは「pタグ」解釈、ChromeやEdgeでは「divタグ」解釈で、Html上に書き込まれる。IEの「pタグ」挿入はテキストのペースト時に限るが、ChromeとEdgeの「divタグ」挿入はあらゆる入力で生じるので、一長一短。

「pタグ」「divタグ」とも、そのタグの範囲内に「通常編集」で後から改行を入れると、再び編集援助機能が働き「タグ終結の補完」が繰り返される。 これは表示上は問題なくても、こちらの意図と異なった文区切りがHtml上で行われる場合が多い。「pタグ」の場合は謎の空白行の元になる事があり、その場合は困ります。

日頃、テキストエディタに入力しているのと同じ様に見えても、ブラウザ経由で表示される編集枠への入力は、かなり異なった環境という事ですね。

  --- 見なければ良いのに覗くハト丸の 昔はものを思わざりけり ---  <* y





[PR]
by Ataron | 2016-06-22 08:28 | PC環境(ハード/ソフト) | Comments(0)

エキサイト編集枠のペースト時の挙動の謎 / IE11

2016年 06月 22日
ブラウザ経由でエキサイト上で文書編集をしていると、テキストエディタ(メモ帳やワード等)では見た事のない事象に出くわして困惑させられる場合があります。 例えば、メモ帳上で作成した文書をエキサイトの編集枠にペーストする際に、妙な事に気付くことが多いのですが、それを少し明らかにしてみます。


元のサンプル文書をメモ帳上で作りました。 下の様に簡単なもので、最初と終りを「******」で区切って明らかにしています。 改行により3箇所の空白行、半角空白を5個使ったインデントした行が3行あります。

b0174191_21485095.png

〔IE11の場合〕 以下は、IE11でアクセスしたエキサイトの編集枠に、上のテキストをペーストした様子です。

●「通常編集」にペーストする場合。 これは、自動改行のON/OFFは関係ありません。

①ペーストした直後。 インデントは表現されていますが、空白行がいきなり無くなった様に見えます。
b0174191_22064328.png
➁「HTML編集」を開けて見ると、「pタグ」で4段落に分けられています。 空白行の前後で段落が変わったと解釈する様です。 ペースト時にこの様な処理をするのが、エキサイト編集枠の持つ特徴です。 これは次ページのChromeの場合と異なり、ブラウザにより処理が変化するのも、興味深い点です。

b0174191_22094302.png
「pタグ」はブラウザ上で空白1行の間隔で段落を表現する約束です。 元の空白行は段落という形で受け取られ、失われたのではないのです。

➂しかし「通常編集」は、この「pタグ」の段落を無視した表現をします。 「通常編集」に戻って見ると、下の様にとんでもない事になった様に見えます。 空白行は無く、インデントもありません。
b0174191_22202712.png
④しかし、下の様にプレビューして見ると「pタグ」の段落がちゃんと表現され、空白行はオリジナルのまま失われていません。但し、インデントは表現されません。 これはブラウザの表示ルールで、これに関しては「通常編集」は正しい表現です。
b0174191_22221425.png
➄本来、ブラウザは行先頭の半角空白を表示しませんが、「preタグ」を使えば半角空白を無視せず表現します。「HTML編集」で「preタグ」と「Meiryo指定」(preでフォントが変わらない様にMeiryoを指定)を書き込んでみます。
b0174191_22303387.png
⑥「通常編集」に戻って見ると、インデントを元のテキストの通り表示しています。 空白行(段落)はやはり表現できない様です。
b0174191_22310475.png
➆プレビューで見てみると、元のテキストのままに空白行もインデントも表現されています。
b0174191_22351341.png
以上の様に、ペーストで失われた様に見えたオリジナルの文書構成は、それが「通常編集」や「プレビュー」や実際の「ブラウザ」上で、表現されない部分があるだけと判ります。 それなりの手段で、ブラウザに表現させる事は出来るのです。

ただ、➂④の段階の様に「通常編集」が「pタグ」段落を正しく表現しないので、勘違いして改行を入れて無茶苦茶になってしまいがちです。 「HTML編集」で見ても「pタグ」が多く、実際の空白行や改行を類推し難いHtmlと思います。 これが、IE11でペーストした時の混乱の元になります。


●「HTML編集」にペーストする場合。 これは、IE11では上の状態に陥りにくい一番良い方法です。 条件として、ペースト時は必ず「自動改行」をONにしている必要があります。 これを忘れると、実際に空白行が失われて散々な事になります。

⑧「HTML編集」にペーストした直後です。 表現は下の様に元のテキストのままの状態です。
b0174191_22514590.png
➈一旦「通常編集」で見てみたのが下です。 この切り替えた瞬間に「自動改行」が働きます。 空白行が「brタグ」で補完され「通常編集」で空白行が失われず表現されます。 但し「通常編集」はインデントの無い(ブラウザと同じ)表示です。
b0174191_22543361.png
➉「HTML編集」に戻って見ると「brタグ」が入り、とても見やすいHtmlになっています。
b0174191_23003479.png
⑪プレビューすると下の様に空白行は元のままで、インデントの無いものとして表示されます。
b0174191_23024466.png
⑫インデントを表示しないのはブラウザとしては正しい扱いですが、元テキストのインデントを「preタグ」を使って意図的に表示させます。下は「HTML編集」で「preタグ」と「Meiryo指定」を書き込んだ所です。
b0174191_23065819.png
⑬「通常編集」で見てみると、下の様にインデントも表現されて元のテキストの通りになりました。
b0174191_23103448.png
⑭プレビューも元のテキストのままで、最初の「通常編集」にペーストした場合とは違って、迷う事のない経過です。
b0174191_23114560.png

IE経由で編集する場合は、「通常編集」へのペースト時に「pタグ」がやたらと追加されます。 これは、エキサイト編集枠のIEとの組み合わせの挙動です。 普通の書き込みの場合や他のブログ記事からのペーストで「pタグ」が追加される気配はなく、空白行のあるテキストをペーストした場合に限る様です。 ここに私が書いている様な「文字列が長い普通の文」では、少ない段落に解釈され「pタグ」の割合は一気に減ります。 しかし、ペーストされた状態を詳しく見ると同じで、空白行は段落に置き換えられ、整形上で間違い易くなります。

これは編集枠の挙動の問題で、ペースト入力された内容に対して、どう解釈して取り込むかという技術的な問題と思われます。

それ自体は性能上の問題ではないにしても、「通常編集」に「pタグ」の段落間隔が表示されず、理解していないと扱い難い場合を生じます。 私の場合、歌詞やCSSソースコード表記で、この問題に何度も悩まされたので、ペースト時の挙動はとても気になるのです。

ChromeやEdgeに関しては、長くなったので次ページに送ります。














[PR]
by Ataron | 2016-06-22 07:48 | PC環境(ハード/ソフト) | Comments(0)

明石公園 2016.06.21 パンクとピンク

2016年 06月 21日
どんどん夏に近付く。 池に着いたのは昼過ぎ、今朝までの雨で池の水位が上がっていました。

ハト達は数分の内にハト様ポイントに居る私を見つけて集まって来ました。 一番多い時で30羽ほど、みんな大いにお腹を減らしている様子。 目立つパンクとピンクは、最初から居ました。
b0174191_20135771.jpg
パンクはベンチで直接に食事を戴こうという考え。 ただ、今日は皆んなどんどんベンチに上がって来ます。ピンクとパンクはよく一緒に居ます。 それでピンクもベンチに上がって来たのか、単独で私の手から食べる勇気はないのですが。 この2羽は面白いコンビです。

食事が尽きて来てボヤボヤしていると、指をやたらと噛むヤツが出て来ました。 あわてて撮ったので近過ぎたみたい。 最近は恐れを知らぬモノが増えた様な気がします。
b0174191_20132718.jpg
後半に左ユビが現れましたが、このところ左アシを見かけない。 まあ、今日は少な目なので、そのうち出て来るのかも。
前回も見かけたのですが、下のハト君は左ユビと同じ所をケガしていて(左足の親ユビ)、それ以外は余り特徴がありません。 マーカーにし難いが、ちょっと気になるヤツです。
b0174191_20125625.jpg
行動も外形も特徴があればマーカーに出来るんですが...


Panasonic DMC-G3 + G14mm F2.5 で撮影、画像はクリックで拡大表示します。




[PR]
by Ataron | 2016-06-21 20:36 | 鳥さんの写真 | Comments(0)

編集画面をアレンジする(12)/ エキサイトブログ IE11版-ブラッシュアップ

2016年 06月 20日
IE11でエキサイト編集画面のアレンジを実現するための基本手順は、以下のページを参考にしてください。



総集版の (11) Chrome版-ブラッシュアップ をIE11の環境に移植しました。

IE版は画像パレットのアレンジが出来ます。「(5)IE11版-1列パレット」の画像パレットの1列化が好結果だったので、画像パレット部はこれを輸入し、他の部分はChrome版を基本にしています。

●画像パレットの高さが低いので「余裕のよっちゃん」スタイルに最初から仕上げています。
●画像パレットは縦スクロールする1行タイプ、コンパクトで選択画像は逆に大きい優れものです。
●「テンプレート枠」は一行目の右端にスイッチのみのコンパクト表示です。
●各種入力枠やスイッチ類の高さを抑えたスペース節約で、編集枠高さは580pxを得ています。
●エキサイトデフォルトから削除したものは、各種のチュートリアルとヘルプ、不要と判断した編集アイコン、「この投稿に対して」の中の「自動リンク(レシピ)」です。

オプション項目
●「small指定」... デフォルトは編集枠等の基本フォントサイズが「medium / 16px」です。「small指定」で、基本フォントサイズが一回り小型の13pxになります。 編集画面のフォントが大き過ぎると感じる事が多い場合に、このオプション追加します。
●「トラックバック枠」「みんなの投稿枠」... 各入力枠の追加。
●「More用パレット」...「More編集」を多用する場合に画像パレットが使い易い。
●「配色オプション」... 編集画面の配色やテクスチャーを指定できます。



下図は、IE11の画面拡大率100%、文字のサイズ「中」での、編集画面のハードコピーです。 クリックで等倍表示されると思います。

b0174191_21525687.png


IE11でアクセスしたエキサイトのデフォルトの編集画面に対して、以下のIE用ユーザースタイルシートを適応して、この様な編集画面にアレンジします。 特別なアプリケーションを必要としませんが、その手順の詳細は「価格.com 掲示板をメイリオで見やすくする」を参照ください。



〔IE11版-ブラッシュアップ〕

基本部CSS


/*〔IE11版-ブラッシュアップ〕*/

body.win input {
box-shadow: none !important; }

#wrapper {
min-width: 970px !important;
min-height: 0 !important;
background: none !important; }

.ad728 {
display: none !important; }

#entry #announceList {
display: none !important; }


/* タイトル部 */

.page_entry #entry > #form {
width: 100% !important;
position: absolute !important;
top: 0px;
left: 0px;
padding: 0 !important;
background: #fbfbfb;
z-index: 1; }

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

.page_entry #entryTemplateList select {
position: absolute !important;
min-width: 10px !important;
width: 38px !important;
height: 28px !important;
padding: 0px 10px !important;
border: none !important;
background: none !important;
box-shadow: none !important; }

.page_entry #entryTemplateList select::-ms-expand {
width: 20px !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
background: aquamarine !important; }

.page_entry #entryTemplateList select:focus {
left: -400px !important;
width: 430px !important;
z-index: 1; }

.page_entry #entryEditHead-new {
position: absolute !important;
top: 0 !important;
left:15px !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
z-index: 2; }

.page_entry #entryEditHead-new th {
display: none !important; }

.page_entry #entryEditTitle {
position: absolute !important;
top: 15px !important;
width: 300px !important;
z-index: 2 !important;
transition: 0.5s !important; }

.page_entry #entryEditTitle:hover {
width: 792px !important; }

.page_entry #entryEditTitle :focus {
position: relative !important;
width: 792px !important; }

.page_entry #entryEditTitle input {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0px !important; }

.page_entry .alert.alert-red {
position: absolute !important;
top: 150px !important;
left: 200px !important;
width: 300px !important;
z-index: 2; }

.page_entry #entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none; }


.page_entry #entryEditCategory {
position: absolute !important;
top: 15px !important;
left: 310px !important; }

.page_entry #entryEditCategory select {
position: absolute !important;
width: 140px !important;
font-size:13px !important;
height: 28px !important;
padding: 4px 5px 0px !important;
text-shadow: none !important; }

.page_entry #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entry #entryEditCategory select:hover {
width: 180px !important;
z-index: 1; }

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

.page_entry #entryBlogCategoryDialog.btn input {
width: 28px !important;
font-size: 13px !important;
font-weight: normal !important;
white-space: nowrap !important;
text-indent: -61px !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0px !important; }

.page_entry #entryEditTags {
position: absolute !important;
top: 15px !important;
left: 490px !important;
width: 445px !important; }

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

.page_entry #entryEditTags span.tags input {
width: 130px !important;
font-size: 13px !important;
height: 28px !important;
line-height: 28px !important; }

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

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

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

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

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


/* 編集部wrap構成 */

.page_entry #entryEditWrap {
overflow: visible !important;
margin: 0px 0px 0px 15px !important; }

.page_entry #entryEditInner {
margin: 0 !important; }

.page_entry #entryEditContents {
margin: 56px 167px 0px 0px !important;
padding: 0 !important;
overflow: visible !important; }

.page_entry #entryEditContents .entryPreview.btn-s {
display: none !important; }

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

.page_entry #editorSwither {
position: absolute !important;
top: 2px !important;
left: -15px !important;
line-height: 23px !important; }

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

.page_entry #editorSwither li {
margin: 2px 4px 0 0 !important; }

.page_entry #editorSwither a {
padding: 2px 0 0 !important; }

.page_entry ul#_panel {
height: 32px !important;
background: #f7f7f7 !important; }

.page_entry #new_icon {
display: none !important; }


/* 編集部 */

#_entryContent, #_moreEntryContent {
background: #fbfbfb !important;
line-height: 150% !important;
margin: 0 !important;
height: 580px !important;
font-size: 1.6rem !important; }

#entryContent, #moreEntryContent {
background: #fbfbfb !important;
line-height: 150% !important;
margin: 0 !important;
height: 580px !important;
font-size: 1.6rem !important; }


/* More部 */

.page_entry #more.w100 {
display: block !important;
width: 74px !important;
height: 28px !important;
margin: 15px 0px -43px !important; }

.page_entry #more span {
padding: 2px 0px 0px !important;
font-size: small !important; }

.page_entry #notmore.w100 {
width: 120px !important;
height: 28px !important;
margin: 15px 0px 10px !important; }

.page_entry #notmore span {
padding: 2px 0px 0px !important;
font-size: small !important; }

.page_entry span#notmore + .btn-s {
display: none !important; }

.page_entry input#moreEntrySubject {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0px !important; }


/* 下部整理 1 */

.page_entry #entryOptions {
position: relative !important;
display: block !important;
left: 110px !important;
margin: 1px 0px 0px !important;
padding: 12px 0px 10px !important;
width: 110px !important;
height: 32px !important;
white-space: nowrap !important;
overflow: hidden !important;
background: #fbfbfb !important;
z-index: 4 !important;
transition: 0.5s !important; }

.page_entry #entryOptions:hover {
width: 100% !important; }

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

.page_entry #entryOptions .optionGroup label {
font-size: 13px !important;
margin: 0px 0px 7px !important;
padding: 0px 5px !important;
height: 28px !important;
line-height: 28px !important; }

.page_entry #entryOptions .optionGroup label:nth-child(3) {
display: none !important; }

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

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


.page_entry #entryTrackback {
display: none !important; }


/* 画像パレット */

.partsWrap#wrapper {
min-width: 0px !important; }

.page_entry #entryEditIframe {
width: 155px !important;
position: absolute !important;
top: 56px;
right: 2px;
z-index: 2; }

#entryEditIframe iframe {
width: 155px !important;
height: 695px !important; }

#partsImage {
padding: 5px 0px 0px !important;
position: static !important; }

#partsImage #droppable {
font-size: 13px !important;
margin: 0px 5px 10px !important;
color: #fff !important;
background: #4096ee !important;
box-shadow: none !important; }

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

#partsImage .fileUploadWrapper {
margin: 0 !important; }

#partsImage .optionGroup {
margin: 5px !important; }

#partsImage .optionGroup span {
display: none !important; }

#partsImage .optionGroup select {
font-size: small !important;
height: 26px !important;
padding: 2px 5px !important; }

#partsImage .optionGroup select::-ms-expand {
border: none !important;
background: none !important; }

#partsImage .optionGroup option {
font-size: 1em !important; }

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

#partsImageContainer li {
margin: 0px 0px 10px !important;
width: 122px !important;
height: 80px !important; }

#partsImageContainer li div input {
position: relative !important;
left: 43px !important; }

#partsImageContainer li a {
background-size: cover !important;
width: 118px !important;
height: 76px !important; }

#partsImage .alert {
margin: 0 !important; }


/* 下部整理2 */

.page_entry #blog2media {
display: none !important; }

.page_entry #entryOptionsPstdate {
position: relative !important;
left: 240px !important;
width: 530px !important;
top: -54px !important;
margin: 0px 0px -58px !important;
padding: 14px 10px 10px !important;
white-space: nowrap !important;
overflow: hidden !important;
border: none !important;
background: #fbfbfb !important;
font-size: 13px !important;
transition: 0.5s !important; }

.page_entry #entryOptionsPstdate:hover {
width: 700% !important;
z-index: 3 !important; }

.page_entry #entryOptionsPstdate span {
line-height: 30px !important;
margin-right: -20px !important; }

.page_entry #entryOptionsPstdate label {
height: 28px !important;
line-height: 28px !important; }

.page_entry #entryPstdateElement select {
font-size: 13px !important;
height: 28px !important;
padding: 3px 5px 0px !important;
min-width: 20px !important;
width: 70px !important; }

.page_entry #entryPstdateElement select::-ms-expand {
border: none !important;
background: none !important; }

.page_entry #entryPstdateElement select:nth-child(n+2) {
width: 53px !important; }

.page_entry #entryOptionsPpenflag {
position: relative !important;
left: 475px !important;
width: 310px !important;
top: -54px !important;
margin: 0px 0px -56px !important;
padding: 14px 0px 10px 30px !important;
white-space: nowrap !important;
overflow: hidden !important;
background: #fbfbfb !important;
font-size: 13px !important;
transition: 0.5s !important; }

.page_entry #entryOptionsPpenflag:hover {
width: 455px !important;
z-index: 2 !important; }

.page_entry #entryOptionsPpenflag span {
line-height: 30px !important;
margin-right: -20px !important; }

.page_entry #entryOptionsPpenflag label {
height: 28px !important;
line-height: 28px !important; }

.page_entry #entrySubmitBtm {
width: 100% !important;
border: none !important;
padding: 0 !important;
margin: 0px 0px 25px !important; }

.page_entry #entrySubmitBtm .btn {
height: 28px !important; }

.page_entry #entrySubmitBtm input {
height: 28px !important;
line-height: 28px !important; }

#menu #sideBanner {
display: none !important; }

#menu #sideRakutenMW {
display: none !important; }

#exFooterWrapper {
display: none !important; }


/* アイコン配置 */

li#exbtn_bold {
top: 5px !important;
left: 260px !important; }

li#exbtn_italic {
top: 5px !important;
left: 338px !important; }

li#exbtn_underline {
top: 5px !important;
left: 286px !important; }

li#exbtn_strikethrough {
top: 5px !important;
left: 312px !important; }

li#exbtn_link {
top: 5px !important;
left: 564px !important; }

li#exbtn_size1 {
top: 5px !important;
left: 364px !important; }

li#exbtn_size2 {
display: none !important; }

li#exbtn_size3 {
top: 5px !important;
left: 390px !important; }

li#exbtn_size4 {
display: none !important; }

li#exbtn_fontcolor {
top: 5px !important;
left: 416px !important; }

li#exbtn_blockquote {
display: none !important; }

li#exbtn_left {
display: none !important; }

li#exbtn_center {
top: 5px !important;
left: 442px !important; }

li#exbtn_right {
display: none !important; }

li#exbtn_ol {
display: none !important; }

li#exbtn_ul {
display: none !important; }

li#exbtn_indent {
display: none !important; }

li#exbtn_outdent {
display: none !important; }

li#exbtn_hr {
top: 5px !important;
left: 468px !important; }

li#exbtn_emoji {
top: 5px !important;
left: 668px !important; }

li#exbtn_youtube {
top: 5px !important;
left: 642px !important; }

li#exbtn_map {
top: 5px !important;
left: 616px !important; }

li#exbtn_genre {
display: none !important; }

li#exbtn_petaguru {
display: none !important; }

li#exbtn_amazon {
top: 5px !important;
left: 590px !important; }

li#exbtn_removeformat {
display: none !important; }

li#exbtn_undo {
top: 5px !important;
left: 503px !important; }

li#exbtn_redo {
top: 5px !important;
left: 529px !important; }

li#exbtn_autoeol {
top: 5px !important;
left: 225px !important; }

.page_entry #exbtn_status {
margin: 8px 6px 0px !important;
width: 100px !important;
font-size: 13px !important;
color: blue !important; }





以下はオプションです。 それぞれのオプションCSSを「基本部CSS」の後に追記すると、各機能を追加することができます。 単独、あるいは複数のオプションを追加できます。

small指定


.page_entry #entryEditTitle input {
font-size: 1.3rem !important; }

#_entryContent, #_moreEntryContent {
font-size: 1.3rem !important; }

#entryContent, #moreEntryContent {
font-size: 1.3rem !important; }

.page_entry input#moreEntrySubject {
font-size: 1.3rem !important; }




トラックバック枠の追加


.page_entry #entryTrackback {
display: block !important;
margin: -15px 0px 60px !important; }

.page_entry #entryTrackback .boxHead {
background: none !important;
margin: 15px 0px 0px !important; }

.page_entry #entryTrackbackTextarea {
min-height: 32px !important;
height: 32px !important;
font-size: medium !important;
background: #fbfbfb !important;
box-shadow: none !important; }




みんなの投稿枠の追加


.page_entry #blog2media {
display: block !important;
background-color: #fbfbfb !important;
margin: 0px 170px 60px 0px !important; }

.entryRadioBtoM#b2m_checked {
border: 2px solid deepskyblue !important; }




More用パレット


.page_entry #entryEditIframe {
position: fixed !important;
top: 56px !important;
right: 2px !important; }





以下に、配色オプションと若干の説明を加えます。

配色オプション1


.page_entry #entry > #form {
background: #ddd !important; }

.page_entry #entryOptions, .page_entry #entryOptionsPstdate, .page_entry #entryOptionsPpenflag {
background: #ddd !important; }

.page_entry ul#_panel {
background: #ddd !important; }

#partsImage {
background: #ddd !important; }

#entryEditTags span.tags a {
border-radius: 0 3px 3px 0 !important; }

#_panel .panelBtn {
border-radius: 3px !important; }

body.win {
background: #ddd !important; }


この例は配色の基本を説明したもので、全てのパーツでグレーの「#ddd」の背景色を指定しています。

第1、第2の項は、全体の背景と下部スイッチのマスクで、これは同色の必要があります。
第3項は編集アイコンパネルの背景色、第4項は画像パレットの背景色です。
第5~6項は、タグとアイコンボタンの隅が背景色と異なって目立つのを隠す設定です。
第7項は、編集画面がウインドウ下辺に達しない場合、白ベースが露出するのを防ぐための指定です。 この指定は他ページの背景にも影響が出る可能性があります。 これを好まない場合は、この項を入れない様にします。


次の例は色値指定の代わりに、テクスチャ画像を背景に指定したものです。

配色オプション2


.page_entry #entry > #form {
background: url("http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif") repeat !important; }

.page_entry #entryOptions, .page_entry #entryOptionsPstdate, .page_entry #entryOptionsPpenflag {
background: url("http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif") repeat !important; }

.page_entry ul#_panel {
background: none !important;
border: none !important; }

#partsImage {
background: url("http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif") repeat !important; }

#entryEditTags span.tags a {
border-radius: 0 3px 3px 0 !important; }

#_panel .panelBtn {
border-radius: 3px !important; }

body.win {
background: url("http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif") repeat !important; }


項目は基本的に同様ですが、第3項の編集アイコンパネルは、それを透過としパネル枠線も取り払う指定に変えています。
ここで使ったテクスチャは、エキサイトブログの各設定画面で実際に使用されているものです。 最後の「body.win」に指定して他の設定画面に反映しても違和感を与えないだろうという事で、もし最後の項を加えるならお勧めです。

下図は、この配色オプションを指定した状態です。

b0174191_11031155.png




IE11版-ブラッシュアップ は、IE11の適応サイトの選択機能の無いユーザースタイルシート機能を利用するもので、若干の問題点があります。

●上記、配色オプションで書いた様に、偶然に全く同じセレクタ名を記述したサイトで、スタイルの適応が発生する可能性があります。 そのため、セレクタ名の記述を綿密にして、誤適応を避ける様に心がけています。 誤適応があっても単に見栄えの問題が生じる程度ですが、その可能性を避けるにはIE11のこの機能のON/OFFをこまめにするしかありません。

●ユーザースタイルシートの利用で、ブラウジング(この場合は編集画面の起動)の速度や、ブラウジング中の速度に影響が出るか試したことがありますが、明らかな影響は判りませんでした。 宣伝画面の読み込みや、画像サーバーの呼出しが、編集画面の起動時間に影響を与えている様です。 ブラウザはサイトから送られて来る想像以上のスタイルシートやスクリプトを処理してウェブの画面を構成表示しているので、たがが数十行のスタイルシートは、たかがなのでしょう。

●「投稿日時の時間指定」の部分をChrome版から移植したところ、IEではマウスだけでは時間指定の設定ができなくなりました。 上記の「基本部CSS」はこれを修正して更新したものです。

〔追記〕2016.06.23
結果として、「投稿日時」の「年指定」を除いた「月・日・時・分指定」の枠の幅を狭めています。 また、「公開設定」はマウスオーバーしない状態で「予約投稿」が表示される様になり、この部分がChrome版と異なります。 上記のハードコピーは修正後のものですが、このページの最初のものはこの修正前のものです。

●編集内容を棄ててマイブログに復帰するスイッチがありません。「画像管理」や「マイブログ」のスイッチを作れないことはないのですが、それで他の「設定」画面のメニュー上の同スイッチも移動してしまいます。 さすがにそれは美しくなく、採用できません。 保存をせず単にウインドウかタブを閉じれば良いが、別に自ブログを開くのが手間です。



〔追記〕2016.06.27
「select」スイッチで表示される「V」のマーク、これはIEが自前で用意するものですが、いまひとつデザインがマッチしません。 また「テンプレート」スイッチの周りも、おざなりになってます。

b0174191_14460390.png

調べるとこれを書換える時に「select::-ms-expand」というセレクタ記述が使える様です。 これを使って「select」スイッチが使われた部分のデザインを修正しました。 CSSは以下の項目で、上記の「基本部CSS」は修正分を更新しています。 太字が修正/追加した部分です。


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

.page_entry #entryTemplateList select {
position: absolute !important;
min-width: 10px !important;
width: 38px !important;
height: 28px !important;
padding: 0px 10px !important;
border: none !important;
background: none !important;
box-shadow: none !important; }

.page_entry #entryTemplateList select::-ms-expand {
width: 20px !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
background: aquamarine !important; }


.page_entry #entryTemplateList select:focus {
left: -400px !important;
width: 430px !important;
z-index: 1; }

.page_entry #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

#partsImage .optionGroup select::-ms-expand {
border: none !important;
background: none !important; }

.page_entry #entryPstdateElement select::-ms-expand {
border: none !important;
background: none !important; }




下図は以上の修正の結果です。

b0174191_14460614.png



〔追記〕2016.07.22
エキサイトのシステム改修で、ここ数日でAD(宣伝)のインポーズの場所やコードの改編が進められています。 このアレンジした編集画面では、編集が出来なくなる場所にインポーズされてしまい、対策を講じました。 上記の「基本部CSS」は対策更新されています。



〔追記〕2016.10.26
同上のタイトル入力枠の隣へのインポーズが id無しで配置され、対策の表記を修正。 上記の「基本部CSS」は対策更新されたものです。



〔追記〕 2017.01.15
画像パレット「×」スイッチが新設され、スイッチ位置を修正する下の項目を追加しました。(参照:(22)画像削除スイッチ新設に対応する) 上記の基本部CSSは修正済みです。


#partsImageContainer li div input {
position: relative !important;
left: 43px !important; }




〔追記〕 2017.01.24
新設「お知らせリスト」の対策として、「基本部CSS」に対策項目を追加しました。
(参照:(23)「お知らせリスト」新設に対応する

〔追記〕 2017.03.04
「お知らせリスト」対策を削除。



〔追記〕2017.03.30
「エモーティコン」仕様変更により、アイコンのコードを書変え修正しました。




[PR]
by Ataron | 2016-06-20 23:26 | ブログスキンのアレンジ | Comments(0)

編集画面をアレンジする(11)/ エキサイトブログ Chrome版-ブラッシュアップ

2016年 06月 18日
エキサイト編集画面のアレンジは、ユーザースタイルシート(CSS)を適応して実現します。 ブラウザに「Chrome」を利用している場合は、この目的のために拡張機能「Stylist」が必要です。 初めて編集画面のアレンジを設定する場合は、最初に以下のリンク先の説明を参照ください。



編集画面のアレンジで、Chrome版はアレンジを積み重ねて何種かのバージョンが出来ました。 現在、アレンジしたい事をしつくしたところまで来て、以前のバージョンを俯瞰した場合、およそ「(8)Chrome版-1行コンパクトタイトル」に「(9)アイコン整理オプション」をセットしたものがオールマイティで完成されたバージョンと私は感じています。

その環境の編集画面の全体を眺めていると、上部の各種入力枠や下部の各種スイッチが、既に高さを狭めているにもかかわらず、未だファットな印象があります。 そこで、多分これがChrome版の最終バージョンとなると思いますが、これらのスイッチや枠の縦幅を「32px」から「28px」に更に低くしたバージョンを編纂しました。

基本は(8)1行コンパクトタイトル と同じです。 ただ細部に修正があり、Chrome のフォント全サイズに対応させ、枠内の文字位置を最大限に均一化、また「画像管理」スイッチのデザインを周囲となじませ、「自動保存」の文字を「blue」に変更しました。

更に、今回のブラッシュアップは、重複設定になる記述を省くために、オプション項目を見直して簡素化しました。 各種枠のフォントを13px固定、タイトル枠や文書編集枠のフォント「medium」を標準に組み込み、「small」指定をオプションとしています。

●各種入力枠や各種スイッチの高さ幅を「28px」にスリム化しています。

●アイコン整理オプションは組み込まれています。

●以上のスペース節約で、編集枠高さは580pxを得ています。

●「テンプレート」はタイトル行右端にボタンのみの表示とし、クリックで選択枠が表示される様にしました。

●エキサイトデフォルトから削除したものは、各種のチュートリアルとヘルプ、不要と判断した編集アイコン、「この投稿に対して」の中の「自動リンク(レシピ)」です。 削除された編集アイコンの一部を復活させる方法は「(9)アイコンパレット改造」を参照ください。

以下はオプション項目です。

●「small指定」... タイトル枠や文書編集枠のフォントが一回り小型になります。 編集画面のフォントが大き過ぎると感じる事が多い場合に、このオプション追加します。

●「トラックバック枠」「みんなの投稿枠」... 各入力枠の追加。

●「More用パレット」...「More編集」を多用する場合に画像パレットが使い易い。

●「配色オプション」... 編集画面の配色やテクスチャーを指定できます。
  これは「(10)配色カスタマイズ」を参照ください。

●「余裕のよっちゃん」... タイトル枠の行を右端まで使う、縦幅に余裕のある環境向きスタイル。




「Chrome版-ブラッシュアップ」の編集画面のハードコピーです。 Chromeの画面拡大率100%、フォント「中」の状態です。 クリックすると、ブラウザ拡大率が100%なら等倍表示すると思います。

b0174191_15562676.png

以下は「Stylist」に登録するメインのCSSです。 これは Chrome専用のユーザースタイルシートです。


〔Chrome版-ブラッシュアップ〕

基本部CSS


/* 〔Chrome版-ブラッシュアップ〕 */

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

body.win select {
height: 28px;
padding: 3px 5px 0px;
font-size: 1.3rem }

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

#wrapper {
min-width: 1024px;
min-height: 0;
background: none;
margin-bottom: 25px; }

header#exHeaderWrapper {
display: none; }

.ad728 {
display: none; }

#wrapperInner {
padding: 0px; }

footer#exFooterWrapper {
display: none; }


/* *** */

#container.hasmenu {
position: relative;
margin: 0px -205px 0px 0px;
float: left;
z-index: 1; }

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

.hasmenu #contents {
margin: 0;
padding: 0px 2px 0px 15px;
background: #fbfbfb;
border: none;
border-radius: 0; }

#announceList {
display: none; }

header.boxHead {
display: none; }


/* タイトル部 */

section#entry > #form {
width: 100%; }

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

#entryTemplateList select {
position: absolute;
min-width: 10px;
width: 21px;
height: 28px;
padding: 4px 10px 0px;
font-size:13px;
box-shadow: none;
z-index: 1; }

#entryTemplateList select:focus {
left: -400px;
width: 421px; }

#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: 200px;
font-size: medium;
z-index: 2;
transition: 0.5s; }

#entryEditTitle:hover {
width: 792px; }

#entryEditTitle :focus {
position: relative;
width: 792px; }

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

.alert.alert-red {
position: absolute;
top: 150px;
left: 200px;
width: 300px;
z-index: 2; }

#entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none; }


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

#entryEditCategory select {
position: absolute;
width: 100px;
padding: 4px 5px 0px;
font-size:13px; }

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

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

#entryBlogCategoryDialog.btn input {
font-weight: normal;
text-indent: -61px;
font-size: 13px;
width: 28px;
padding: 2px 10px 0px; }

#entryEditTags {
position: absolute;
top: 15px;
left: 353px;
width: 480px; }

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

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

.tagCompletionBox {
width: 178px;
font-size: 13px; }

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

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

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

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


/* 編集部wrap構成 */

#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

#entryEditContents {
margin: 56px 215px 0px 0px;
padding: 0; }

#entryEditContents .entryPreview.btn-s {
display: none; }

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

#editorSwither {
position: absolute;
top: 2px;
left: -15px;
line-height: 23px; }

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

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

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

ul#_panel {
height: 32px;
background: #f7f7f7; }

#new_icon {
display: none !important; }


/* 編集部 */

#_entryContent, #_moreEntryContent {
background: #fbfbfb;
line-height: 150%;
margin: 0;
height: 580px;
font-size: medium; }

#entryContent, #moreEntryContent {
background: #fbfbfb;
line-height: 150%;
margin: 0;
height: 580px;
font-size: medium; }


/* More部 */

#more.w100 {
display: block;
width: 74px;
height: 28px;
margin: 15px 0px -43px; }

#more span {
padding: 2px 0px 0px;
font-size: small; }

#notmore.w100 {
width: 120px;
height: 28px;
margin: 15px 0px 10px; }

#notmore span {
padding: 2px 0px 0px;
font-size: small; }

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

input#moreEntrySubject {
font-size: medium; }


/* 下部整理 1 */

#entryOptions {
position: relative;
display: block;
left: 110px;
margin: 1px 0px 0px;
padding: 12px 0px 10px;
width: 110px;
height: 32px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
z-index: 4;
transition: 0.5s; }

#entryOptions:hover {
width: 100%; }

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

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

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

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


#entryTrackback {
display: none; }


/* 画像パレット */

.partsWrap#wrapper {
min-width: 0px; }

#entryEditIframe {
position: absolute;
overflow: hidden;
right: 2px;
z-index: 2; }

#entryEditIframe iframe {
width: 200px;
height: 760px; }


/* 下部整理2 */

#blog2media {
display: none; }

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

#entryOptionsPstdate:hover {
width: 100%; }

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

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

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

#entryOptionsPpenflag {
position: relative;
left: 530px;
width: 200px;
top: -54px;
margin: 0px 0px -56px;
padding: 14px 10px 10px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
font-size: 13px;
z-index: 2;
transition: 0.5s; }

#entryOptionsPpenflag:hover {
width: 100%; }

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

#entrySubmitBtm {
width: 100%;
border: none;
padding: 0;
margin: 0px 0px 5px; }

#entrySubmitBtm .btn {
height: 28px; }

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

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


#menu {
float: right; }

#myblogBtn {
position: absolute;
left: 130px;
height: 28px;
margin: 0;
bottom: 5px;
z-index: 1; }

#myblogBtn a {
line-height: 28px;
background: none;
text-indent: 0px; }

#sideRakutenMW {
display: none; }

#exFooterWrapper {
display: none; }


/* アイコン配置 */

li#exbtn_bold {
top: 5px;
left: 260px; }

li#exbtn_italic {
top: 5px;
left: 338px; }

li#exbtn_underline {
top: 5px;
left: 286px; }

li#exbtn_strikethrough {
top: 5px;
left: 312px; }

li#exbtn_link {
top: 5px;
left: 564px; }

li#exbtn_size1 {
top: 5px;
left: 364px; }

li#exbtn_size2 {
display: none; }

li#exbtn_size3 {
top: 5px;
left: 390px; }

li#exbtn_size4 {
display: none; }

li#exbtn_fontcolor {
top: 5px;
left: 416px; }

li#exbtn_blockquote {
display: none; }

li#exbtn_left {
display: none; }

li#exbtn_center {
top: 5px;
left: 442px; }

li#exbtn_right {
display: none; }

li#exbtn_ol {
display: none; }

li#exbtn_ul {
display: none; }

li#exbtn_indent {
display: none; }

li#exbtn_outdent {
display: none; }

li#exbtn_hr {
top: 5px;
left: 468px; }

li#exbtn_emoji {
top: 5px;
left: 668px; }

li#exbtn_youtube {
top: 5px;
left: 642px; }

li#exbtn_map {
top: 5px;
left: 616px; }

li#exbtn_genre {
display: none; }

li#exbtn_petaguru {
display: none; }

li#exbtn_amazon {
top: 5px;
left: 590px; }

li#exbtn_removeformat {
display: none; }

li#exbtn_undo {
top: 5px;
left: 503px; }

li#exbtn_redo {
top: 5px;
left: 529px; }

li#exbtn_autoeol {
top: 5px;
left: 225px; }

li#exbtn_status {
margin: 5px 0px 0px;
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; }





以下はオプションです。 それぞれの項目を「基本部CSS」の後に追記すると、オプションが実効します。

small指定オプション


#entryEditTitle {
font-size: small; }

#_entryContent, #_moreEntryContent {
font-size: small; }

#entryContent, #moreEntryContent {
font-size: small; }

input#moreEntrySubject {
font-size: small; }



トラックバック枠追加オプション


#entryTrackback {
display: block !important;
margin: -15px 0px 60px; }

#entryTrackback .boxHead {
background: none;
margin: 15px 0px 0px; }

#entryTrackbackTextarea {
height: 32px;
min-height: 32px; }



みんなの投稿枠追加オプション


#blog2media {
display: block !important;
margin: 0px 215px 60px 0px; }



More用パレット


#entryEditIframe {
position: fixed; }




タイトル枠の行を右端まで使う、初期の「(6)Chrome版-1行タイトル」のレイアウトは、ウインドウ全体の縦幅が増しますが、全体に余裕を感じさせるレイアウトです。 縦幅に余裕のある環境では、こちらの方が使い良いと感じる人がいるかもしれません。 以下のオプションはその環境を提供するものです。
 ◦タイトル枠とカテゴリ枠が拡張され、内容の見える範囲が広がっています。
 ◦縦幅を要しますが、文書編集枠の高さが増えて635pxを得ています。
 ◦テンプレートはタイトル行右端にボタンのみ表示。
 ◦下図は「配色オプション」も使用していますが、それは別追加です。

b0174191_17082124.png

余裕のよっちゃん


#entryEditTitle {
width: 320px; }

#entryEditCategory {
left: 330px; }

#entryEditCategory select {
width: 160px; }

#entryBlogCategoryDialog.btn {
left: 162px; }

#entryEditTags {
left: 530px; }

#entryTemplateList {
left: 910px; }

#entryEditIframe {
top: 56px; }

#_entryContent, #_moreEntryContent {
height: 635px; }

#entryContent, #moreEntryContent {
height: 635px; }




〔追記〕2016.07.22
エキサイトのシステム改修で、ここ数日でAD(宣伝)のインポーズの場所やコードの改編が進められています。 このアレンジした編集画面では、編集が出来なくなる場所にインポーズされてしまい、対策を講じました。 上記の「基本部CSS」は対策更新されたものです。



〔追記〕2016.10.26
同上のタイトル入力枠の隣へのインポーズが ID無しで配置され、対策の表記を修正。 上記の「基本部CSS」は対策更新されたものです。



〔追記〕 2016.10.19
「画像管理」画面へのリンクスイッチに注意表示を表示する様に、基本部CSSを加筆修正しました。
(参照:(17)Chrome版-画像管理スイッチの注意表示



〔追記〕 2017.01.15
画像パレット「×」スイッチの新設により、「画像管理」スイッチを廃止しました。
(参照:(22)画像削除スイッチ新設に対応する) 上記の基本部CSSは修正済みです。



〔追記〕 2017.01.24
新設「お知らせリスト」の対策として、基本部CSSに対策項目を追加しました。
(参照:(23)「お知らせリスト」新設に対応する

〔追記〕 2017.03.04
「お知らせリスト」対策を削除。



〔追記〕2017.03.04
自動保存表示をスイッチ型にアレンジしました。 基本部CSSの関係個所を更新しました。
(参照:(25)自動保存表示のマイナーアレンジ



〔追記〕2017.03.05
「この項目に対して」のアコーディオン表示の関連コードを更新しました。
(参照:(26)トラックバック禁止の標準化に対応




〔追記〕2017.03.30
「エモーティコン」仕様変更により、アイコンのコードを書変え修正しました。



[PR]
by Ataron | 2016-06-18 18:19 | ブログスキンのアレンジ | Comments(0)