Studio TA Subsite の案内とお知らせ

<   2016年 10月 ( 33 )   > この月の画像一覧

明石公園 2016.10.31 幸せのかたち

2016年 10月 31日
深まる秋の公園に到着したのは13時前、ハト様ポイントに先客があり、少し北側のベンチに。

私より北のベンチに弁当の二人と2羽のカラスが見えました。

b0174191_23313231.jpg

案外と早く集まって来たハト達、数は30羽ほどでまずまず。 餌撒きが無かったのか、みんな腹を空かしている感じでした。 マーカーはアサッテ、左アシ、肘フェチ。 アサッテと肘フェチは一番に私の両膝に上がって来ました。

b0174191_23322698.jpg

せがんで手を突かれながらパンと食事をすぐに配布、今日はどんどん無くなります。 以前も間違いそうになった左ユビにとても似たヤツが居ました。 彼も人に慣れていて膝に上がって来ます。 良く来るならマーカーに入れるかも。

食事が尽きて、しばらく待っていたハト達もハシブトの声で逃げ出し、10分位ボーッとしていたら左ユビが現れました。 バックの底をほじって、隠れていた何かの種を探しては与えましたが...

b0174191_23392801.jpg


Panasonic DMC-G3 + G 45-150mm F4.0-5.6 (p1)、G 14mm F2.5 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2016-10-31 23:42 | 鳥さんの写真 | Comments(0)

Windy / The Association(アソシエイション)(和訳)

2016年 10月 31日
シックな曇り空の下を軽やかに歩いていると、風がさっと吹いて来る。 それは絶対に晴れた日ではなく、だから青春なのだ。

「Windy」という曲は、僕たちのそんな季節感を表しています。 作曲したのは、サンフランシスコのヒッピームーブメント中にいたルーサン・フリードマンという女性シンガーソングライターだという。

Songfacts:Windy by The Association に、彼女のコメント記事がありました。

この曲の由来を色々と言われてる様だけど、これが本当の事。 私はベッドに座ってたの - ビバリーグレンのデビッド・クロスビーの家の一階のアパートだったんだけど - で、私を訪ねて来たヤツが居てね、そこに座って私の事を見つめるの、まるで私の命まで飲み込んでしまうみたいにね。 それで、私は一緒に居るならどんな男がいいんだろうって空想し始めた、それがウインディだったの - 一人の男(空想のね)。 この曲を書くのに20分ほどかかったわ。

ビバリーグレンはロサンジェルスのビバリーヒルズから数キロの場所です。 クロスビーの在籍したThe Byrds は1965年に「Mr. Tambourine Man」をヒットさせていますから、クロスビーの家の一階のアパートというのは、どんな様子だったのでしょうね。 元はワルツのリズムだったのを、プロデューサーのボーンズ・ハウがポップに仕上げてヒットに繋がった様です。 曲間のベースとハープシコードの様な単音が4拍打つところが素晴らしい。 旋律に織り込まれた音階は「Downtown / Petula Clark」と私には同じに聞こえます。 この曲を言い伝えずにはおれません。



 
                Windy
                  / The Association 1967
                   Written by Ruthann Friedman
 

Who's peeking out from under a stairway
Calling a name that's lighter than air?
Who's bending down to give me a rainbow?
Everyone knows it's Windy

Who's tripping down the streets of the city
Smiling at everybody she sees?
Who's reaching out to capture a moment?
Everyone knows it's Windy

And Windy has stormy eyes
That flash at the sound of lies
And Windy has wings to fly
Above the clouds (above the clouds)
Above the clouds (above the clouds)

And Windy has stormy eyes
That flash at the sound of lies
And Windy has wings to fly
Above the clouds (above the clouds)
Above the clouds (above the clouds)

Who's tripping down the streets of the city
Smiling at everybody she sees?
Who's reaching out to capture a moment?
Everyone knows it's Windy

Who's tripping down the streets of the city
Smiling at everybody she sees?
Who's reaching out to capture a moment?
Everyone knows it's Windy


 
階段の下から覗いてるのは誰
空気より軽い名前を呼びながら
体を傾けて僕に虹をくれるのは誰
みんな知っているよ それはウインディ

街の舗道をさっそうと行くのは誰
出会った誰にも微笑みかけながら
チャンスを掴もうと手を伸ばしたのは誰
みんな知っているよ それはウインディ

そしてウインディは嵐の瞳で
嘘っぽい響きをちらっと見る
そしてウインディには飛ぶ羽がある
雲の上を 
雲のその上を

そしてウインディは嵐の瞳で
嘘っぽい響きをちらっと見る
そしてウインディには飛ぶ羽がある
雲の上を 
雲のその上を

街の舗道をさっそうと行くのは誰
出会った誰にも微笑みかけながら
チャンスを掴もうと手を伸ばしたのは誰
みんな知っているよ それはウインディ

街の舗道をさっそうと行くのは誰
出会った誰にも微笑みかけながら
チャンスを掴もうと手を伸ばしたのは誰
みんな知っているよ それはウインディ




b0174191_16575941.png




[PR]
by Ataron | 2016-10-31 18:56 | 映画/音楽/本 | Comments(0)

ブログスキンのアレンジの第1歩

2016年 10月 30日
エキサイトは公式ブログスキンを豊富に用意していますが、ちょっとアレンジして自分のセンスを反映したいと思う人は多いと思います。 エキサイトはスキンのアレンジに関しては寛容です。 システムは強固ですから、ユーザーが間違って変なスキンコードを書き込んでも、ブログの投稿データ自体は安全です。 また、アレンジに失敗してデザインが崩れても、公式スキンに戻せば元通りになります。

しかし、ブログ公式スキンは「書き換え不可」なので、アレンジの最初で判り難い部分があります。 アレンジを反映するには、マイスキンに一旦登録してから、それをスキンに設定する遠回りが必要なのです。

ここの説明は、もっとも判り易い手順書をめざしました。 初めて自分の使っている公式スキンをアレンジする場合の手順で、そのスキンに関してアレンジが反映された後は必要ありません。



 公式スキンをアレンジ可能にする最初の操作 

●ブログの設定画面で①の「デザインスキン」を押すと、下の「PCデザインスキン」が表示されます。 この画面で➁の「編集」を押します。

b0174191_13392872.png

●下の様に「PCデザインスキン編集」が表示されます。 この画面で➂の「作成する」を押します。

b0174191_13440548.png

●これで、現在使用中のスキンのコピーがマイスキンに作成されます。 画面は下の様に最初に戻りますが、下側の「スキン選択」が「マイスキン」の選択になっている事に注意してください。

「マイスキン」は、これまでに使用したり作成したスキンの保存場所で、自分で削除しなければ履歴が自動的に残ります。 先ほど「作成」したコピーは➄で、「現在使用中のスキン」は未だ最初のままで、その日付④は公式スキンが製作された日付です。

b0174191_13470518.png

●この画面で、「マイスキン」の➄の赤枠内の「適用」を押します。 これが一番肝心な操作で、これをしないとアレンジが反映しません。

b0174191_14081861.png

スキンの変更に「OK」を押すと、下の様に「現在使用中のスキン」の日付⑥が現在に変わります

b0174191_14084877.png

「マイスキン」のコピー➄(書換え可能なスキン)が適応されたわけです。

「スキン名」「スキンイメージ」などは、公式スキンとマイスキンで同じになり変えられません。 現在使用中のスキンがどちらなのかは、実際のコードと日付⑥が見分ける方法になります。(最後の補足を参照ください)



以上がスキンアレンジの第一歩の操作です。 この後はスキンの編集がブログ画面に反映する様になります。
以下に、実際にスキンを編集する例を簡単に説明します。 アレンジ編集の手順を示しただけで、編集内容は一般的で確かな意味はありません。

 実際にブログスキンを編集する 

元のブログスキンでは、タイトルは下の様に少し小さいのでアレンジして大きくします。

b0174191_14552030.png

●先の「PCデザインスキン」で➆の「編集」を押して、「PCデザインスキン編集」に入ります。 このページの最初と異なるのは「編集可能なマイスキン」を扱っている事です。

「PCデザインスキン編集」の下方のコード編集枠に注目します。 この画面を開いた最初は「全体」が選択されていますが、下図はスキンのCSSを編集するために「CSS」を選択して押そうとしている所です。

b0174191_15083033.png

●CSSのコード編集枠が表示されたら、編集枠にカーソルを入れ、スクロールしてコードを見て行きます。 少し下の方を調べると、「header」に関する記述に、タイトルの文字サイズの指定箇所⑧を見つけました。 元は24pxだったのを48pxに書き換え、「更新する」のスイッチ➈を押すと、エキサイトに「編集したマイスキン」が登録されます。

b0174191_15175541.png

これで更新内容がブログの表示に反映します。 下の様にタイトルが倍の大きさにアレンジされました。

b0174191_15195921.png

以上、ブログスキンのCSSを書換えて、表示をアレンジする手順を簡単に説明しました。



アレンジする箇所を調べる方法は、IEではDOM Explorer、Chromeではデベロッパーツールなどを利用します。 これらを利用しながら、一方でCSSやHTMLの書式の意味をネットで調べて少しずつ簡単なアレンジを試して行けば、門は開かれます。

DOMの使い方は、以下の所で説明していますので参考にしてください。





〔補足〕
手間を惜しまない方は、公式スキンの移植コピーをする事で「スキン名」や「スキンイメージ」を好みのものに変える事が出来ます。 これは、公式スキンとマイスキンの混乱を避ける目的です。

●「マイスキンを作成」でスキン作成を開始し、これに公式スキンのコードや基本設定を移植して、その過程で独自の「スキン名」や「スキンイメージ」を設定します。



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

明石公園 2016.10.29 ヒガモンじゃねーぞ

2016年 10月 29日
公園に14時到着、寒い風が強く晩秋の風情。

ハト様ポイントに立って一羽目が来たのが5分後、15羽位の群れが来たのが更に5分後で、反応が遅く数も少ない。 土曜日で池上のボートも沢山出ていて、人出があって既に餌を撒く人が色々あったのかもしれません。

池上の中央に、ヒガモンではないカモさんが2羽居るのに気付きました。 ホシハジロで、去年の最初にも暮にも撮影していて、つまり毎冬に数羽が来て居る様です。

b0174191_20345219.jpg

今日のマーカーは左ユビとアサッテだけ、この数ならそんなもんでしょう。 食事は余裕があり、みんな沢山食べ、左ユビも途中でいかにも腹いっぱいの仕草をして、水を飲んでから休みの樹の方へ一羽だけで帰って行きました。 全く単独に動くのは彼らしい。

b0174191_20382038.jpg

ヒガモン達はハト達の集まりをかぎつけてやって来ました。 パンも余っていたので、彼等におすそわけ。

b0174191_20440920.jpg

彼等は池のマスコットで、色々と餌をもらっているでしょうが、偏ってないかは気になる所です。 岸に上がって草等をけっこうつついてる様です。


Panasonic DMC-G3 + G 45-150mm F4.0-5.6(p1)、G 14mm F2.5 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2016-10-29 20:51 | 鳥さんの写真 | Comments(0)

編集画面をアレンジする(21)/ エキサイトブログ 投稿オプションスイッチのアコーディオン配置

2016年 10月 28日
「この投稿に対して」「投稿日時」「公開設定」の投稿オプション類のスイッチを1行を納めるのには、かなり苦労しています。 下方に配置されているとはいえ、「この投稿に対して」と他の2種との間に画像パレットが挟まり、置かれた基底の場所が別セクションで、これが困難の原因でした。

これを実現した(8)Chrome版 に、少し詳しい記述があります。 しかし「この投稿に対して」を1行に入れるには幅が足りず、仕方なく6項目から「自動リンク(レシピ)」を省いた5項目にしています。 私には全く使うあてがないのですが、やはり標準の機能を減らすのは気になっていて、また、項目が追加になった場合の対策もあった方が良いのではと、少し頭をひねりました。



対応策は、スイッチの幅を狭めたものを配置し、マウスポインターが上に来たスイッチは幅を拡げて見せるというアコーディオン式の表示とするというものです。

「この投稿に対して」は「More」の右横ですが、下はポインターがどれにも乗っていない時です。
b0174191_23201481.png

ボインターが「この投稿に対して(第1項のコメント不可)」に乗ると、他の2~6項も表示されます。
b0174191_23210482.png

これは従来と同じですが、第2項~第6項の幅は本来より狭く設定されていて、文字は一部読めませんが、置かれたエリアの幅内に収まっています。 ポインターを右に移動すると、それが乗った項目は広がって全て読める様になります。
b0174191_23264385.png
b0174191_23281302.png

以上は6項目全てを表示するタイプです。 これは、エキサイト標準の機能を減らさない(18)(19)の通常アイコン版に設置する事にしました。 追加コードは以下です。

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

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

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

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

セレクタの「:nth-child(n+2)」は「2番目以降」を選択指定するものです。 スムースな幅拡大表示をさせるために「 transition: 0.5s; 」を指定しています。

また、(15)(12)(11)の一行アイコン版には、従来通り「自動リンク(レシピ)」を省いたものとしますが、幅の縮小度合いの少ないアコーディオン式として設置幅内に常に収まる様に改善しました。 こちらの方がやはり表示に余裕があります。
b0174191_23550556.png

追加したコードは以下です。

(11)Chrome版
#entryOptions .optionGroup label:nth-child(3) {
display: none; }

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

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

(12)(15)IE11版
.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; }




以上の変更と同時に、「この投稿に対して」「投稿日時」「公開設定」のスイッチのフォバー時の拡がり方を改めました。

下は「投稿日時」のフォバー前の状態で、赤枠がその実体で同時にフォバーの感知エリアです。
b0174191_11093936.png

今までは、フォバーで左右に全幅に実体を拡大していました。 従って、左の「More」や「この投稿に対して」もマスクされています。
b0174191_11204024.png

これを右側だけに伸ばす様にして、左側のスイッチ類をマスクしない様に変更しています。
b0174191_11222790.png

これで、左側のスイッチにポインターをスライドして押せるようになります。 また、スイッチの拡大縮小に「 transition」を付けてスムーズにしています。 これは「この投稿に対して」のアコーディオン動作になじませたもので、3種のスイッチとも同じ仕様に合わせています。

更に、最上段のタイトル入力枠の拡大縮小も「transition」を付け、操作感を同調させました。 コードを変更したのは以下の部分です。 これは(11)(12)(15)(18)(19)の各版で更新しました。

(11)(18)Chrome版

#entryEditTitle {
width: 200px;
z-index: 2;
transition: 0.5s; }

#entryEditTitle:hover {
width: 792px; }


#entryOptions {
left: 110px;
width: 110px;
z-index: 4;
transition: 0.5s; }

#entryOptions:hover {
width: 100%; }


#entryOptionsPstdate {
left: 260px;
width: 214px;
z-index: 3;
transition: 0.5s; }

#entryOptionsPstdate:hover {
width: 100%; }


#entryOptionsPpenflag {
left: 530px;
width: 200px;
z-index: 2;
transition: 0.5s; }

#entryOptionsPpenflag:hover {
width: 100%; }



IE版は、「時間指定」がフォバーでサイズ拡大する仕様では操作に不具合が生じます。 このため、少しコードが異なりますが、コードを変更したのは以下の部分です。

(12)(15)(19)IE版

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

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

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


.page_entry #entryOptions {
left: 110px !important;
margin: 1px 0px 0px !important;
padding: 12px 0px 10px !important;
width: 110px !important;
z-index: 4 !important;
transition: 0.5s !important; }

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


.page_entry #entryOptionsPstdate {
left: 240px !important;
width: 530px !important;
transition: 0.5s !important; }

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


.page_entry #entryOptionsPpenflag {
left: 475px !important;
width: 310px !important;
padding: 14px 0px 10px 30px !important;
transition: 0.5s !important; }

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




[PR]
by Ataron | 2016-10-28 00:00 | ブログスキンのアレンジ | Comments(0)

明石公園 2016.10.26 食欲のトリコロール

2016年 10月 26日
普通の秋の日、公園に13時前に到着。

ハト様ポイントに近くで携帯越しに怒鳴っているオジサン。 近寄りがたく北の岸に向かう。 ハト達には見え難いはずだけど、案外と早く10羽ほどのハト達がやって来ました。 先頭は左ユビ、なるほど...

今日はこの位の数から殆ど増えないのですが、カラスに脅されて飛び出して、戻って来る度に少しずつ入れ替わっている様に思えました。 左ユビ、アサッテ、後ユビ、肘フェチを確かめましたが、最近は集まる数が少ない傾向があります。

右が後ユビ、人には少し距離を置きます。 最初はもっと馴れている様に見えたのですが。

b0174191_16250756.jpg

何度もいなくなり、また現れたのが左ユビ。 今日はバックの主になってしまい、近付く他のハトを追い払い、バックに首を突っ込んで食べ続けました。

b0174191_16305539.jpg

10羽以下だと左ユビに逆らえるのがおらず、延々と食べ続けます。 最後は、食べ過ぎじゃないかと思い止めさせました。

ヒガモン達はすっかり池になじんだ様子で、ハト達の間に割って入って来ます。

b0174191_16530231.jpg

池の上で2羽のカモメが偵察する様に飛んでいました。 今季は初めてです。 そろそろ冬の季節が始まったという印象です。 食事も終わる頃、シジュウカラとエナッチの混群が通りかかりました。

b0174191_16401652.jpg


Panasonic DMC-G3 + G 14mm F2.5(p1,2)、G 45-150mm F4.0-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2016-10-26 17:00 | 鳥さんの写真 | Comments(0)

編集画面をアレンジした理由 / エキサイトブログ

2016年 10月 25日
ブログ編集画面をアレンジした理由やアレンジ導入後の現状について、少しまとめたいと思います。



既成のブログ編集画面は、左のサイドメニューや上方/下方の編集と無関係の表示で、押し込められています。 余計な表示がちらちらする画面で、狭い幅のスペースに書き込むという状態です。

また、編集枠の文字が小さくて「 ゜゛」の区別で困っている人は多いはずです。 文字を大きくしようとブラウザ画面を拡大すると、サイドメニュー等他のパーツもアンバランスに拡大します。 編集枠を縦スクロールしようとしてウインドウ全体がスクロールして苛立つ事はありませんか。 本当に編集に使う部分は狭いのに、ウインドウの縦スクロールバーが常に出て操作の邪魔をします。

昔はOutlookExpressが簡易なエディターとして使い易かったので、何か書く時には重宝していました。 その時を思い出すと「こんな事はなった、これは何か編集しにくくない?」と思い始めたのです。 そこで、自分仕様にアレンジする方法を探すと、ユーザースタイルシートというテクニックに行き着きました。

編集画面の全構成を調べてみると、実際に編集に使うパーツは全体面積の約1/3です。 この無駄を無くして行くに従って、どんどん使い易くなる事が判ってきたのです。

b0174191_11395616.png



ユーザースタイルシートとは

下は、ブログの原稿データ(ユーザーが書き込み画像等を追加したHTMLデータ)を、ブラウザで閲覧し、それを再編集する様子です。 ブラウザはHTMLデータをスタイルシートで修飾して表示します。 この図は、特に各場面で適応されるスタイルシートを示しています。

b0174191_12185581.png

図中で上側は一般的な形で、閲覧時はスタイルシートとして「ブログスキン」が適応され、編集時は「編集画面スキン」が適応されます。 これらは、エキサイトのシステム側が用意し、原稿データと一緒に送って来ます。

これに対し、下側はユーザースタイルシートを使う場合です。 エキサイトのシステムが行う事は全く同じですが、編集時の「編集画面スキン」を上書きする形で「ユーザースタイルシート」を適応します。 この「ユーザースタイルシート」は、ユーザーがブラウザ側で用意する個人的なフィルターの様なものです。

スタイルシート(CSS)は本来、ブラウザの表示デザインを修飾する機能で、本質的に原稿データやそれを扱うシステム機能に影響を与えません。 TV画面の設定をどう調節しようが、放送データや放送システムに何ら影響がないのと同じで、ユーザースタイルシートは安全で表示デザインのアレンジに有効な機能と言えます。

一般に、ユーザースタイルシートは、ウェブページの文字サイズやフォントの個人的(閲覧側)改善や、過剰なコマーシャルの抑制などに利用されます。 よく利用する特定のページに対しては、ユーザーの好みの表示をかなりのレベルで実現できます。

ユーザースタイルシートを利用する方法はブラウザにより異なります。 ブラウザにChromeを使用している場合は、Stylist等の拡張機能をインストールして設定し、IE11の場合はインターネットオプションから設定します。 他のブラウザはそれぞれStylistと似た拡張機能がある様ですが、Edgeは拡張機能の整備中といった状態で、もう少し時間が必要と思われます。



編集画面のレイアウト仕様

●編集に必要な機能にスイッチを絞り、ユーザーによっては使われない機能はオプションとし、すっきりしたデザインにする。

●編集アイコンは、不要と思えるものを省いた1行タイプ、エキサイト標準のままの2行タイプ、を用意して選択可能とする。

●編集画面全体の高さを抑え、ウインドウの縦スクロールバーを非表示にする。 これにより、縦スクロールを常に編集枠内の移動とし、編集中に編集アイコンや編集枠が移動する事をなくす。

●編集枠や入力枠の文字サイズを、ユーザー環境に適したサイズで選択できるようにする。

●編集枠の背景色(輝度)をコントロールし、眼の疲れを低減する。 また、画面全体の背景を好みに設定可能とする。

●ブログスキンと設定を連動させて、PC表示の画像と文字の高さの並びを、編集時と実表示で精密に調整する。(編集時の画像サイズも実表示と同じに設定し、不完全ながら編集環境をWYSIWYGに近づける事が可能)

●IE環境では特殊に iframe内が修飾可能なので、画像パレットを1列化・サムネイル拡大で改善する。

●Moreを多用する場合を想定して、画像パレットが常にウインドウに表示されるオプションを提供。



私自身の数か月の運用経過では、大きな問題となる様な欠陥はなく、編集画面読み込み時間などにも問題は感じられません。 一度使い始めると手放せない、大変に快適なブログ編集環境だと思っています。

以下に、Chrome と IE11 の2つのブラウザに対応する、完成度の高いバージョンを整理しました。

〔 Chrome版 〕

(11)Chrome版-ブラッシュアップ(1行アイコン)

(18)Chrome版-ブラッシュアップ(通常アイコン)

(14)Chrome版-テンプレート管理画面
    この(14)は(11)(18)のどちらかのStylist登録が前提で、その後に登録します。


〔 IE11版 〕



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

明石公園 2016.10.24 秋晴れ

2016年 10月 24日
外に出るとみごとな秋晴れ、空が気分を晴々とさせるというのを、久しぶりに感じました。

公園に午後1時到着、ハト様ポイントで少し待つとハト達が集まって来ました。 今日は、悪さのハシブトが居て、後ろの林から何度も脅かし、そのたびにハト達は逃げてまた戻って来るのを繰り返しました。 ほんと性悪で、遊びでやっているのかも。 先日のハシボソ君も来てましたが、ハト達は余り彼を恐れません。 ボソ君は4m程まで近付ける様になっています。

しかし、とにかくハト達はしっかり食べました。 数は30羽程、マーカーはアサッテ、左ユビ、肘フェチを確かめただけ。 今日は、極端なツングースカのヤツがやたらバックに突っ込んで来ました。

b0174191_15542086.jpg

しかし出席率の良い肘フェチ、たくましく喧嘩を要領良くかわして生きてます。

b0174191_15542683.jpg

そもそも、肘フェチの様なハトが居ないと、普通のハト達はバックに体ごと入り込むなぞ出来ないのです。 肘フェチは集団の火点け役の一人です。


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



[PR]
by Ataron | 2016-10-24 16:11 | 鳥さんの写真 | Comments(0)

編集画面をアレンジする(19)/ エキサイトブログ IE11版-ブラッシュアップ テンプレート管理画面対応(通常アイコン)

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




●エキサイトの標準の編集アイコンをそのまま配置しています。 1行アイコンで必要なアイコンが無い場合の選択枝ですが、エキサイトがアイコンを変更しても適応できる利点があります。

●テンプレート管理画面にこの編集画面のデザインが部分適応され、そのまま使用可能となります。

●最上部の1行に「タイトル」「カテゴリ」「タグ」「テンプレート」の枠をコンパクトにまとめています。 テンプレート枠はスイッチを押すと拡がります。 画像パレットの高さを低く抑え、入力枠に余裕を持たせたスタイルです。

●画像パレットは縦スクロールする1行タイプ、コンパクトで選択画像は逆に大きく画像順が明らかな優れものです。

●エキサイトの標準編集画面から、各種チュートリアルとヘルプは削除しています。

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

●「small指定」... デフォルトは編集枠等の基本フォントサイズを「medium / 16px」としています。 このオプションで、基本フォントサイズを一回り小型の13pxに出来ます。 編集画面のフォントが大き過ぎると感じる事が多い場合に、このオプション追加してください。

●「トラックバック枠」「みんなの投稿枠」... 編集時の不本意な縦スクロールを防ぐため、画面全体の高さを抑えています。 この目的でこれらの枠を非表示としていますが、必要な場合は追加出来ます。

●「More用パレット」...「More編集」を多用する場合に、画像パレットがMore画面の近くに着いて来るので、使い易くなります。

●「配色アレンジ」... 編集画面の背景テクスチャーをデフォルトから好みに変更する方法を説明します。




下図は、この「ブラッシュアップ テンプレート管理画面対応(通常アイコン)」の編集画面の様子です。(IE11画面拡大率100%、フォント「中」のハードコピーで、クリックで拡大表示されます)

b0174191_17483385.png


以下は、このアレンジを実現するIE11専用のユーザースタイルシートです。


〔 IE11版-ブラッシュアップ テンプレート管理画面対応(通常アイコン)〕

基本部CSS


/*〔 IE11版-ブラッシュアップ テンプレート管理画面対応版(通常アイコン)〕*/

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

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

#entry {
min-width: 900px; }

.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_entryTemplate #editTemplateList select::-ms-expand {
border: none !important;
background: none !important; }

.page_entryTemplate #editTemplateList .fR {
float: left !important;
margin: 8px 0 0 20px !important; }


.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_entryTemplate #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.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; }

#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_entryTemplate #entryEditContents {
margin-right: 170px !important; }

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

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


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

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

#editorSwither li {
margin: 6px 4px 0 0 !important; }

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

ul#_panel {
height: 55px !important;
background: #f7f7f7 !important; }

#new_icon {
display: none !important; }

li[id^="exbtn_"] {
margin-left: 230px !important; }

li#exbtn_status {
margin: 29px 0px 0px !important;
padding: 2px 2px 0px 2px !important;
height: 19px !important;
width: auto !important;
font-size: 13px !important;
color: blue !important;
text-align: center !important;
background: white !important;
border: 1px solid #ccc !important;
border-radius: 3px !important; }


/* 編集部 */

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

.page_entryTemplate #_entryContent, #_moreEntryContent {
height: 530px !important; }

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

.page_entryTemplate #entryContent, #moreEntryContent {
height: 530px !important; }


/* More部 */

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

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

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

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

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

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(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; }

.page_entryTemplate #entryTrackback {
margin: 58px 0 0 !important; }

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


/* 画像パレット */

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

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

.page_entryTemplate #entryEditIframe {
width: 155px !important; }

#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: 700px !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; }

.page_entryTemplate #entrySubmitBtm {
padding: 0 !important; }


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

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

#exFooterWrapper {
display: none !important; }

#sidemenu li a {
white-space: nowrap !important; }


/* 配色 */

body.win, #partsImage, .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 #entry > #form {
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; }

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

#_panel .panelBtn {
border-radius: 3px !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; }





配色アレンジ

上の基本部CSSで使ったテクスチャ画像は、エキサイトブログの各設定画面で使用されているものです。「body.win」にもこのテクスチャを指定しているので、他の設定画面の背景にも反映しますが、違和感を与え難いでしょう。

このテクスチャ画像を差し替えて編集画面の背景を好みの配色とする事が出来ます。
テクスチャ画像は基本部CSSの最後の「配色」で指定しています。 以下はその部分の引用で、着色した文字がテクスチャ画像の実際に置かれたURLです。 自分の好みのテクスチャ画像を入手するか作るかして、エキサイトブログで画像登録し、そのURLを調べて下の着色した文字と置き換えてください。(2ヵ所)


body.win, #partsImage, .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 #entry > #form {
background:
url("http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif")
repeat !important; }





IE版のアレンジは、適応サイトの選択機能の無いIEのユーザースタイルシート機能を利用するもので、若干の問題点があります。

●同じセレクタ名を記述したエキサイトの他の「設定」メニュー等で、スタイルの誤適応が発生する可能性があります。 そのため、セレクタ名の記述を綿密にして、誤適応の回避を心がけています。 誤適応は見栄えの問題が生じる程度ですが、IE11のこの機能を一時的にOFFにすれば誤適応は解消します。

●編集内容を棄ててマイブログに復帰したい場合は、保存をせず単にウインドウかタブを閉じて、別にマイブログを開いて下さい。



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



〔追記〕2016.10.27
テンプレート管理画面の対応に関して追加修正しました。 追加コードの詳細は(15)IE11版ブラシュアップを参照ください。



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



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




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

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

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




編集アイコンを1行にダイエットした編集画面が、私としては好みで、編集枠の高さを圧迫しないので、最も推奨されるデザインだと考えています。
しかし、環境や理由で編集の仕方はユーザーによって違うことを認めなければなりません。 そういう意味では、公式に提供されている編集アイコンを削らずにデフォルトの組み合わせのまま置いたバージョンは、広いユーザーに対しての保障になると考えました。

また、先月に行われたリッチリンクの追加など、編集アイコンのパネルが更新される事は、今後も予想されます。 そういった場合に、編集アイコンがデフォルトの構造だと、アレンジの修正なしで済ませられます。 これらの考えから、今回の「Chrome版-ブラッシュアップ(通常アイコン)」を追加しました。




●「タイトル入力」「カテゴリ選択」「タグ」「テンプレート」の入力は、最上部の1行にコンパクトに収めています。

●編集アイコンはエキサイト標準の2行です。

●エキサイト標準の編集画面から、各種チュートリアルとヘルプボタンは削除しています。

以下はオプションです。

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

●「トラックバック枠」「みんなの投稿枠」... デフォルトは省いていますが、これらの入力枠の追加するオプションです。

●「More用パレット」...「More編集」を多用する場合に、画像パレットが編集ウインドウに固定され、使い易くなります。

●「配色アレンジ」... 編集画面の背景テクスチャーをデフォルトから好みに変更する方法を説明します。




下図は、この「ブラッシュアップ(通常アイコン)」の編集画面の様子です。
(Chrome画面拡大率100%、フォント「中」のハードコピーで、クリックで拡大表示されます)

b0174191_19484092.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: 40px; }

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

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

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

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

#new_icon {
display: none !important; }

li[id^="exbtn_"] {
margin-left: 230px; }

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


/* 編集部 */

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

#entryContent, #moreEntryContent {
background: #fbfbfb;
line-height: 150%;
margin: 0;
height: 565px;
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; }


/* 配色 */

body, .hasmenu #contents, #entryOptions,
#entryOptionsPstdate, #entryOptionsPpenflag {
background:
url("http://pds.exblog.jp/pds/1/201606/23/91/b0174191_11353776.png"); }

ul#_panel {
background: none;
border: none; }

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

.panelBtn {
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;
font-size: medium; }



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


#blog2media {
display: block !important;
margin: 0px 215px 60px 0px;
background-color: #f7f7f7; }

.entryRadioBtoM#b2m_checked {
border: 2px solid blue; }



More用パレット


#entryEditIframe {
position: fixed; }



配色アレンジ

①好みの背景テクスチャーを用意します。 ネット上から適当なものを探すか、画像アプリで作っても良いでしょう。 テクスチャー画像は「20×20px」程度の小型の「.png」画像が適当です。

➁通常の画像と同様にエキサイトにアップロードし、画像パレット上に登録されたテクスチャー画像を右クリックして「リンクのアドレスをコピー」します。(登録したテクスチャー画像のURLを入手する作業です)

➂コピーしたアドレスを以下の場所にペーストして、デフォルトのURLと置き換えます。
(既にStylistに基本部CSSを登録している場合は、Stylistを開いて該当箇所に直接コピーします)

ペースト場所:基本部CSSの最後から4項目の以下の着色した部分です。
body, .hasmenu #contents, #entryOptions,
#entryOptionsPstdate, #entryOptionsPpenflag {
background:
url("http://pds.exblog.jp/pds/1/201606/23/91/b0174191_11353776.png"); }

周囲の(" ")等を消さない様に、青文字の部分だけを書き換えます。

④書き換えた基本部CSSを Stylistに登録「save」して、リロードすると新しいテクスチャーが反映されます。

配色アレンジの詳細は(10)Chrome版-配色カスタマイズ を参照ください。



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



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



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

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



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



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



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