Studio TA Subsite の案内とお知らせ

<   2017年 03月 ( 27 )   > この月の画像一覧

エキサイトブログ / 旧編集画面のアレンジ(6) Chrome版 - ブラシュアップ ver.3

2017年 03月 31日
旧編集画面をどれくらいの方が使っているのでしょう? アレンジをしていると、プレビューをしない限り挿入画像はコードのみの表示で、WISWIG的な直接感から遠いなと感じます。 特にIE版は画像の扱いの旧態感が否めません。 とは言え、旧編集画面のエディタとしての判り易さが好まれるのはうなずけます。 エキサイトが旧編集画面の現代版をリメイクすれば良いのですが、その余力はないのでしょうか? 私のアレンジは単なる表面的なレイアウトで、それ以上の部分に関わり様が無いので残念です。



「旧編集画面 Chrome版」を「新編集画面 Chrome版」のレベルまでブラシュアップしました。 IE版で苦労する部分が、Chrome版は簡単になる場合が多く、Stylist+Chromeの環境は大変に勧められると感じます。

Chrome版 ブラシュアップ ver.3 の特徴や改善点。

●縦/横ともサイズを少しコンパクト化していて、ブラウザの150%拡大も可能です。
●「投稿設定メニュー類」を一行に纏めました。
●カラーパレットのデザインをタイトにアレンジしています。
●文書編集枠は縦/横とも拡張が可能で、多様な編集環境に対応できます。 縦は文書編集枠の右隅のドラッグ、横はウインドウ右辺のドラッグで拡張します。

下は編集画面を最もコンパクトにした状態です。

b0174191_18524930.png

コンパクトにした事で、拡大表示下でもウインドウのスクロールバーが出難く、作業効率が向上します。 上図はブラウザ拡大100%ですが、ウインドウ自体のスクロールバーが出ていない事に注意して下さい。

新規作成時は「テンプレート」選択が可能ですが、使用頻度は少ないと思われ、右の画像パレットの下に置いています。 ウインドウを少し横に拡げると「テンプレート」スイッチが押せるようになります。

b0174191_18530478.png

また、「画像容量表示」も画像パレットの下です。 上図は「投稿日時」を設定している所ですが、ブラウザの影響でChrome版は操作がスムーズです。

「投稿設定メニュー」は、ポインターを乗せるとそれぞれ拡張し、設定操作が可能です。 下図は左端の「コメント不可」以降のメニューを開いた状態で、マウスが乗った項目のみ更に幅拡張するアコーディオン型です。

b0174191_18532165.png



編集画面のアレンジには、Chrome と Stylist という Chrome拡張機能が必要です。 先ず Stylistを Chromeにセットし(簡単です)、それに下のスタイルシートを設定します。 その操作は、以下のリンク先を参照ください。
但し上のページで、エキサイト編集画面のURLを記入する の枠は、新編集画面の説明です。 旧編集画面の場合は、この枠に設定するURLは、
http://www.exblog.jp/myblog/entry/new/
http://www.exblog.jp/myblog/entry/edit/
になります。



旧編集画面用 スタイルシート Chrome版 - ブラシュアップ ver.3


/* 旧編集画面用 スタイルシート Chrome版 ver.3 */


#exHeaderWrapper {
display: none; }

#exFooterWrapper {
display: none; }

#tmpfilelist+div , #filelist+div {
display: none; }

#toUserconf , #csEnquete {
display: none; }


/* *** */

#wrapper {
min-width: 894px; }

/* iframe#tmpfilelist は新規、iframe#filelist はテンプレと更新編集にのみ存在 */
iframe#tmpfilelist~table , iframe#filelist~table {
width: 100% !important;
margin-bottom: -400px; } /* -300px以上を指定して下部端を明瞭化 */

td.drop_invalid:nth-child(1) {
position: absolute; }

td.drop_invalid:nth-child(1)>:not(.capacity) {
display: none; }

td.drop_invalid:nth-child(1)>.capacity {
position: absolute;
top: 60px;
left: 700px;
width: 120px;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 3px; }

td.drop_invalid:nth-child(1)>.capacity>div>font {
color: #eee; }

td.drop_invalid:nth-child(2) { /* 編集画面ベース 中央部 */
width: auto !important;
display: block;
padding-left: 15px !important; }

td.drop_invalid:nth-child(2)>form>table:last-of-type { /* トラバ枠の削除 */
display: none; }


/* *** */

#entry_header {
display: none; }

#template {
position: absolute;
top: 20px;
left: 700px;
height: 24px;
width: 90px;
padding: 4px 4px 0px !important;
overflow: hidden;
transition: 0.5s; }

#template:hover {
left: 170px;
height: auto;
width: 620px;
padding: 8px 10px 0px !important;
background: #fff !important;
box-shadow: 2px 2px 12px rgba(140,140,140,0.5);
z-index: 91; }

#template_names {
overflow: hidden; }

#template_names>span {
display: block;
text-align: left;
margin: 0px 20px 6px;
width: 100%;
white-space: nowrap; }

span.tmp a, span.st {
font-size: medium;
text-decoration: none; }

span:not(.tmp) {
text-align: right !important; }

#template_names input {
width: 90px !important;
height: 23px !important;
margin: 0 6px; }


/* *** */

#subject {
position: absolute;
top: 15px;
padding: 0 !important; }

#subject_title {
display: none; }

#subject_content>input {
width: 639px !important;
height: 23px;
padding: 3px 15px 0px;
font-size: medium;
border: 1px solid #ccc;
border-radius: 3px; }


/* *** */

#category {
position: absolute;
top: 55px;
padding: 0 !important; }

#category_title {
display: none; }

#CateStr>select {
height: 23px;
font-size: inherit;
padding: 1px 0 0 !important;
border: 1px solid #ccc;
border-radius: 3px; }

#CateStr input[value="カテゴリ設定"] {
width: 85px !important;
height: 24px !important;
padding: 2px 0 0 !important;
vertical-align: top; }


/* *** */

#tags {
position: absolute;
top: 55px;
left: 288px;
width: 450px;
padding: 0 !important; }

#tags_title {
width: 32px !important;
padding: 5px 0 0;
display: none; }

#tags_content>.tag {
width: 138px !important; }

#tags_content>.tag>input {
width: 116px !important;
height: 19px;
font-size: inherit;
padding: 2px 0 0 4px !important;
border: 1px solid #ccc;
border-radius: 3px; }

#tags_content>.tag>a {
width: 13px !important;
height: 13px !important;
border-radius: 13px;
background-position: -5px -4px; }

#tags_attention {
display: none; }

/* タグリストの幅拡大 公開設定の上に表示 */
body>#exHeaderWrapper~div[style*="width: 122px"]:last-child {
position: relative;
width:162px !important;
z-index: 90; }

body>#exHeaderWrapper~div[style*="width: 122px"]:last-child>div {
width:150px;
padding: 0 6px 0; }


/* *** */

#entryoption {
position: absolute;
top: 85px;
left: 15px;
width: 110px;
height: 23px;
overflow: hidden;
margin: 0px !important;
padding: 10px 0 10px !important;
transition: 0.5s;
z-index: 2; }

#entryoption:hover {
width: 695px; }

#entryoption_title {
display: none; }

#entryoption>.entryoption_menu {
height: 19px;
padding: 5px 4px 0;
margin: 0px 2px 15px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

#entryoption>.entryoption_menu input {
margin: -3px -3px 0 0 !important; }

#entryoption>.entryoption_menu:nth-child(n+3) {
width: 125px;
overflow: hidden;
transition: 0.5s; }

#entryoption>.entryoption_menu:nth-child(n+3):hover {
width: 150px; }


/* *** */

#cdcdcd {
display: none; }


/* *** */

#entrydate {
position: absolute;
top: 85px;
left: 140px;
height:26px;
width: 200px;
overflow: hidden;
margin: 0;
padding: 10px 0 10px !important;
transition: width 0s 1s;
z-index: 2; }

#entrydate:hover {
width: 550px;
transition: width 0s; }

#entrydate>div {
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

#entrydate>div:nth-child(1) {
float: left;
height: 19px;
padding: 5px 0 0 6px;
margin: 0 0 15px !important;
width: 180px; }

#entrydate_content {
margin: 0 0 0 -20px; }

#entrydate_content>input {
margin: -4px 0 0;
vertical-align: middle; }

#entrydate>div:nth-child(2) {
float: left;
padding: 1px 0 1px 10px;
margin: 0 2px 0 !important;
width: 315px; }

#entrydate_setting>select {
height: 22px !important;
border: 1px solid #ccc !important; }

#entrydate_setting>select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }


/* *** */

#entryopen {
position: absolute;
top: 95px;
left: 345px;
height: 24px;
width: 200px;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6;
transition: width 0.5s;
z-index: 1; }

#entryopen_content>input {
vertical-align: middle;
margin: -4px 0 0 8px; }

#entryopen:hover {
width: 340px; }

#entryopen_title {
display: none; }

#entryopen_content {
text-align: left; }

#entryopen_content>input {
vertical-align: middle;
margin: 6px 0px 9px 8px; }


/* *** */

#ping_form {
position: absolute;
top: 95px;
left: 558px;
height: 21px;
width: 106px;
overflow: hidden;
margin: 0;
padding: 3px 0 0 20px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

#ping_form>label {
line-height: 22px; }

#ping_form>input {
position: absolute;
top: 3px;
left: 2px; }


/* 文書編集部 */

#entrymenu {
position: absolute;
top: 135px; /* 編集アイコンの高さ位置 */
width: 660px; }

#entrymenu_title {
display: none; }

#entrymenu_content {
width: auto !important; }

#usehtml>a {
border-radius: 3px; }

#usehtml>br {
display: none; }


/* *** */

#entry_menu6 {
position: relative;
left: 164px; }

#entry_menu7 {
position: relative;
left: 220px; }

#smallPallet {
position: relative;
left: 60px;
height: 20px !important;
z-index: 88; }

#skype {
position: relative;
left: 195px; }

#entry_menu11 {
position: relative;
left: -80px; }

#entry_menu12 {
position: relative;
left: -80px; }

#entry_menu13 {
position: relative;
left: -80px; }

#entry_menu14 {
position: relative;
left: -80px; }


/* *** */

/* 新パレットが下に表示されるバグ回避 */
#colorPallet , #skypeEmoticon {
z-index: 101 !important; }

#colorPallet>.curve-head , #colorPallet>.curve-head>div ,
#colorPallet>.curve-body , #colorPallet>.curve-body>.curve-body_left ,
#colorPallet>.curve-bottom , #colorPallet>.curve-bottom>div {
background: none !important; }

#colorPallet {
border: 1px solid #777;
border-radius: 6px;
background: #fff;
box-shadow: 2px 2px 12px rgba(140,140,140,0.5); }


/* *** */

#no_html {
padding: 2px 6px 0px 2px;
border: 1px solid #fff;
border-radius: 3px;
height: 20px; }

#no_html>label {
vertical-align: 1px; }

#no_html>input[value="プレビュー"] {
display: none; }


/* *** */

#entrymenu+table>tbody>tr>td.mid { /* 編集枠のtableを指定 */
padding-right: 20px; /* 画像パレットとの間隔 */
padding-bottom: 0 !important; } /* 新規編集枠のみ以降の高さ調整をOFF */

#entrymenu+table { /* 編集枠のtableを指定 */
width: 100%;
margin-top: 150px !important; } /* 編集枠の高さ位置 */

textarea#content {
position: relative;
width: 100% !important;
min-height: 440px !important; /* ★編集枠縦幅の指定 */
font-size: medium;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }

#content~.mt5 {
position: relative;
top: 0px; /* Moreスイッチ高さ位置 */
height: 24px;
width: 80px;
padding: 3px 0 0 !important; }

#content~.mt5>label {
vertical-align: 2px !important; }

#content~.mt5>span.HELP {
display: none; }

#morehtml>table {
width: 100%;
position: relative;
top: 0px; } /* More タイトル枠 高さ位置 */

#morehtml input {
padding: 3px 8px 0px;
height: 23px;
font-size: medium;
border: 1px solid #ccc;
border-radius: 3px; }

#morehtml span.HELP {
display: none; }

textarea#morecontent {
width: 100% !important;
font-size: medium;
padding: 5px 10px;
margin-bottom: 29px; /* More時の文書編集枠以下の高さ調整 */
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }


/* *** */

#upload {
display: none; }

#imageframe {
display: none !important; }

#upfile_list {
display: none; }

#upload_notes {
display: none; }


/* *** */

td.drop_invalid:nth-child(2)>form>div:last-of-type { /* プレビュー・送信枠 */
margin: -20px 0 20px 150px !important; } /* table 最下ライン */

input[value="プレビュー"] {
width: 100px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#eee 100%) !important; }

input[value="送信"] {
width: 150px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#B3E5FC 100%) !important; }


/* *** */

td.drop_invalid:nth-child(2)+td>div { /* 画像パレットベース */
margin: -5px 10px 0 10px !important; }

#file_drop {
width: 162px !important;
height: 120px !important;
border: solid 4px #eee !important;
border-radius: 3px !important;
z-index: 3; }

#drop_form>.wrap_input>.drop_msg {
line-height: 100px; }

#preview {
margin-top: 6px !important;
height: 466px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
border-radius: 3px !important; }

.image_info {
float: left;
width: 154px;
height: 126px;
padding: 0 !important;
margin: 10px 4px 0;
background: #fff;
border: 3px solid #fff !important;
overflow: hidden; }

.preview_img_top {
padding: 0 !important;
margin: 0 !important;
background: none !important;
width: 100% !important; }

.preview_img {
float: none !important;
opacity: 1 !important;
width: auto !important;
height: 104px;
border: none !important; }

.preview_img:hover {
box-sizing: border-box;
border: 3px solid #000 !important; }


/* *** */

.pos_select {
margin-top: -4px;
white-space: nowrap; }

.pos_select td:nth-child(1):before {
content: "<";
display: block;
margin: 0px 0px -18px -8px; }

.pos_select td:nth-child(3):after {
content: ">";
display: block;
margin: -15px 0px -2px 21px; }

.pos_select td:nth-child(4):after {
content: "×";
font-size: 18px;
font-weight: bold; }

.delete_icon {
float: none !important;
height: 12px;
margin: 8px -18px 0 30px !important;
opacity: 0; }

.pos_select tr:last-child {
display: none; }


/* *** */

#template , input[value="カテゴリ設定"] , .mt5 ,
input[value="プレビュー"] , input[value="送信"] {
border: solid 1px #aaa !important;
border-radius: 3px !important;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff inset;
box-sizing: border-box;
background: linear-gradient(to bottom, #fff 0%,#ddd 100%); }


/* フォント指定 */

*{ font-family: "メイリオ","Meiryo" !important; }


/* 背景色指定 */

#entryoption , #entrydate , body {
background-color: #98c1dc !important; }






背景色のオプション
編集画面の枠部分の背景色指定は一番最後の項です。 好みの配色やテクスチャーを指定する方法は、以下の最後を参照ください。
  旧編集画面のアレンジ(1)Chrome版 - プロトタイプ



この版以前は、文書編集枠の縦幅は固定としていました。 しかし、これは「More機能」を使う場合は、ウインドウ縦幅が大変長く不便になります。 アレンジの方針は、
 ◎文書編集枠の縦幅の最小値を大きく設定し、編集画面を開くたびに縦に拡げる必要をなくす。
 ◎文書編集枠の縦幅の最小値を小さく設定し、必要に合わせて毎回調節する。
のどちらかを選択するしかありません。

このブラシュアップ版を含め私の方針は前者で、この版は「440px」で「440px以下」には設定出来ないため、「More機能」を毎回使用する場合は不適当な編集環境です。 一方、エキサイトの元設定は後者で、高さ初期値「250px」と小さめです。

そこでスタイルシートを書換えて「More機能」に特化するオプションが考えられます。

「More機能」を多用する場合のオプション
上記スタイルシートのコードを検索して「 /* ★編集枠縦幅の指定 */ 」の行を探し、この1行のみを削除すると、文書編集枠の縦幅初期値はエキサイトのデフォルト「250px」に戻ります。

これ以下で可変となる初期値を設定する事は出来ません。 これ以下の固定値を設定する事は可能です。 上側の編集枠をもっと小さくしたい場合は固定値指定しかなく、今度は「More」を使わない時に不便になります。 Stylistで設定の異なるスタイルシートを切り替える手もありますが...




[PR]
by Ataron | 2017-03-31 20:52 | ブログスキンのアレンジ | Comments(0)

明石公園 2017.03.30 春休みの公園

2017年 03月 30日
遡った記録になりますが、月末の晴れたフランシーヌの日。 公園到着は12時半、天気が良くてピクニックの人達が各所に。 なるほど春休みなのだなと思う。

人出が多いと、やはりハト達の集まり方は何時もと違う様子。 50羽ほどが集まって来ましたが、マーカーはチャメしか判りません。 いつものメンバー達は各所に散ってしまったのか...
まあ、チャメは屈託なく私に近付きます。

b0174191_09521089.jpg

濃い緑のいでたちのハトは、それで見分ける手段になり、全体の10~20%程度かと思います。 しかし、マーカーに出来たのはカゲとコウだけで、顔や頭に出た小さな白羽は長くはアテにならず、カゲは見失ったきりです。 そういえば長く見分けられたヒジなども、たぶん判断出来なくなったのでしょう。

最近目立つカゲに似た全身が濃い緑のコイツ。 左頬の小さな白羽で判別できるのですが、これが消えたらもう判らなくなります。

b0174191_10044002.jpg

やたらアピール度が強く、多分♂でおっとりしてます。

左ユビととても似た足のハトは、マギ以外にも最近は2~3羽を見かけます。 下のハト君も、どうやらマギではなさそうです。

b0174191_10061165.jpg


人が髪型が変わっても同じ人と判る様に、鳥さんを区別できるといいのですが。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。






[PR]
by Ataron | 2017-03-30 12:30 | 鳥さんの写真 | Comments(0)

エキサイトブログ / 旧編集画面のアレンジ(5) IE11版 - ブラシュアップ ver.2

2017年 03月 29日
IE11環境用の旧編集画面のブラシュアップ版を点検している間に、エキサイト側で編集アイコンの改編がありました。 「エモーティコン」(Skypeの絵文字)が旧編集画面で一時的に使用可能となっていたのが、3/29にアイコンごと機能削除されました。 基本コードは登録されたままなので再有効化されるのか...

ただ、編集アイコンの「カラーパレット」は「エモーティコン」と同時に、リニューアルされています。 サポート終了と言いながらも、エキサイトは地道に最低限の機能を継続させていて、一部のユーザーに大人の対応が続く様に見えます。 「エモーティコン」の取り下げは何か問題があったのでしょうか?

IE11版 ブラシュアップの3月28日版の点検で、改善した点は以下です。

●「投稿日時」部を修正しました。(説明は後述)
●「カラーパレット」のデザインをタイトにアレンジしました。
●「エモーティコン」アイコン削除にともなう編集アイコンの乱れを再整理しました。
● セレクタの再点検で、セレクタ記述を統一し整理しました。 その他、無駄指定の削除など。



下は「ブラッシュアップ ver.2」の編集画面全体のハードコピーです。

b0174191_22534109.png

表面上は、修正前とほぼ同様ですが、3行目の投稿メニュ-の内容はかなり異なります。「投稿日時」が操作しようとするとフォバー解消でセレクトの操作が困難となる問題を、なんとか解決しました。

修正前はフォバー解消を遅延させてこれの対策としていました。 しかし「overflow:hidden」で非フォバー時に操作部を隠す設定をせず、非フォバー時はその右側の「公開設定」でマスクする方式にすると、操作中のセレクト枠だけが残って変更操作が出来ます。

下図は日時設定の様子で、「日時設定」のスイッチはフォバーが閉じていますが、変更ボタンで出たセレクト枠だけが残った状態になっていて、この状態で変更操作が出来ます。

b0174191_23090996.png

また、カラーパレット(ドラッグ可能)は、デザインをタイトなものに変えています。



「IE11版 - ブラシュアップ ver.2」を利用する設定方法は、以下のリンク先を参照ください。
ユーザースタイルシートとして以下のスタイルシートをコピーして登録します。

「旧編集画面用 スタイルシート IE11版 - ブラシュアップ ver.2」


/* 旧編集画面用 スタイルシート IE11版 - ブラシュアップ ver.2 */

#exHeaderWrapper {
display: none; }

#exFooterWrapper {
display: none; }

/* 新管理画面バー幅補正 */
#toUserconf {
overflow: hidden; }


/* *** */

/* iframe#tmpfilelist は新規編集画面にのみ存在 背景色指定 */
/* iframe#filelist はテンプレ編集画面と更新編集画面にのみ存在 背景色指定 */

iframe#tmpfilelist~table , iframe#filelist~table {
position: absolute;
top: 0;
width: 100% !important;
height: 100%; }

iframe#tmpfilelist~table , iframe#filelist~table {
background-color: #98c1dc; } /* 背景色 */


/* 編集画面べース 左側部 / 登録データ表示 */

td.drop_invalid:nth-child(1) {
position: absolute; }

td.drop_invalid:nth-child(1)>:not(.capacity) {
display: none; }

td.drop_invalid:nth-child(1)>.capacity {
position: absolute;
top: 626px;
left: 340px;
height: 28px;
width: 200px;
margin: 0 !important;
padding: 5px 0 0 12px !important;
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box; }

td.drop_invalid:nth-child(1)>.capacity>div:nth-child(2) {
position: relative;
top: -17px;
left: 80px;
font-weight: normal !important; }

td.drop_invalid:nth-child(1)>.capacity>div:nth-child(2) b {
color: #777; }


/* 編集画面ベース 中央部 */
td.drop_invalid:nth-child(2) {
position: relative;
left: 0;
width: auto !important;
padding-left: 15px !important; }

/* 編集画面べース 右側部 */
td.drop_invalid:nth-child(2)+td {
display: none; }


/* *** */

td.drop_invalid #entry_header {
display: none; }

td.drop_invalid #template {
position: absolute;
top: 15px;
left: 660px;
height: 24px;
width: 90px;
padding: 4px 4px 0 !important;
overflow: hidden;
transition: 0.5s; }

td.drop_invalid #template:hover {
left: 150px;
height: auto;
width: 600px;
padding: 8px 10px 0 !important;
background: #fff !important;
z-index: 6; }

td.drop_invalid #template_names {
overflow: hidden; }

td.drop_invalid #template_names>span {
display: block;
text-align: left;
margin: 0 20px 6px;
width: 100%;
white-space: nowrap; }

td.drop_invalid #template_names>span.tmp>a ,
td.drop_invalid #template_names>span.st {
font-size: 16px !important;
line-height: 130% !important;
text-decoration: none; }

td.drop_invalid #template_names>span:not(.tmp) {
text-align: right !important; }

td.drop_invalid #template_names>span:not(.tmp)>input {
width: 90px !important;
height: 21px !important;
padding: 1px 10px 0 !important;
border: solid 1px #aaa !important;
border-radius: 3px !important;
margin: 0 6px; }


/* *** */

td.drop_invalid #subject {
position: absolute;
top: 15px;
padding: 0 !important; }

td.drop_invalid #subject_title {
display: none; }

td.drop_invalid #subject_content>input {
width: 590px !important;
height: 23px;
padding: 3px 15px 0;
font-size: medium !important;
border: 1px solid #aaa !important;
border-radius: 3px;
transition: 0.5s; }

td.drop_invalid #subject_content>input:hover {
width: 703px !important; }

td.drop_invalid #subject_content>input:focus {
width: 703px !important; }


/* *** */

td.drop_invalid #category {
position: absolute;
top: 55px;
padding: 0 !important; }

td.drop_invalid #category_title {
display: none; }

td.drop_invalid #CateStr>select {
width: 180px;
height: 23px !important;
font-size: inherit !important;
padding: 2px 0 0 4px !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

td.drop_invalid #CateStr>select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }

td.drop_invalid #CateStr>input[value="カテゴリ設定"] {
height: 24px !important;
padding: 2px 0 0 !important;
vertical-align: top; }


/* *** */

td.drop_invalid #tags {
position: absolute;
top: 55px;
left: 305px;
width: 448px;
padding: 0 !important; }

td.drop_invalid #tags_title {
width: 32px !important;
padding: 5px 0 0; }

td.drop_invalid #tags_content>.tag {
width: 138px !important; }

td.drop_invalid #tags_content>.tag>input {
width: 116px !important;
height: 19px !important;
font-size: inherit !important;
padding: 2px 0 0 4px !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

td.drop_invalid #tags_content>.tag>a {
width: 13px !important;
height: 13px !important;
border-radius: 13px;
background-position: -5px -4px; }

td.drop_invalid #tags_attention {
display: none; }

/* タグリストの幅拡大 公開設定の上に表示 */
body>#exHeaderWrapper~div[style*="width: 122px"]:last-child {
position: relative;
width:162px !important;
z-index: 5; }

body>#exHeaderWrapper~div[style*="width: 122px"]:last-child>div {
width:150px;
padding: 0 6px 0; }


/* *** */

td.drop_invalid #entryoption {
position: absolute;
top: 85px;
left: 15px;
width: 110px;
height: 23px;
overflow: hidden;
margin: 0px !important;
padding: 10px 0 10px !important;
background-color: #98c1dc !important; /* 背景色 */
transition: 0.5s;
z-index: 3; }

td.drop_invalid #entryoption:hover {
width: 745px; }

td.drop_invalid #entryoption_title {
display: none; }

td.drop_invalid #entryoption>.entryoption_menu {
padding: 4px 4px 2px;
margin: 0px 2px 15px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #entryoption>.entryoption_menu input {
margin: -3px -2px 0 0 !important; }


/* *** */

td.drop_invalid #cdcdcd {
display: none; }


/* *** */

td.drop_invalid #entrydate {
position: absolute;
top: 85px;
left: 140px;
height: 23px;
width: 435px;
margin: 0;
padding: 10px 0 10px !important;
background-color: #98c1dc; /* 背景色 */
transition: width 0.5s;
z-index: 0; }

td.drop_invalid #entrydate:hover {
width: 612px;
z-index: 3; }

td.drop_invalid #entrydate>div {
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #entrydate>div:nth-child(1) {
position: absolute;
padding: 4px 0 2px 6px;
width: 190px; }

td.drop_invalid #entrydate_content {
margin: -2px 0 0 -22px; }

td.drop_invalid #entrydate_setting {
position: absolute;
top: 10px;
left: 202px;
margin: 0 !important;
padding: 1px 10px 1px 15px !important;
width: 300px; }
td.drop_invalid #entrydate_setting>select {
height: 21px !important;
padding: 2px 0 0 !important;
border: 1px solid #ccc !important; }

td.drop_invalid #entrydate_setting>select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }


/* *** */

td.drop_invalid #entryopen {
position: absolute;
top: 85px;
left: 340px;
height: 23px;
width: 396px;
overflow: hidden;
margin: 0;
padding: 10px 0px 10px 16px !important;
background-color: #98c1dc; /* 背景色 */
transition: width 0.5s;
z-index: 1; }

td.drop_invalid #entryopen:hover {
z-index: 3; }

td.drop_invalid #entryopen_title {
float: none !important;
position: absolute;
width: 170px !important;
margin: 0;
padding: 4px 6px 2px;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #entryopen_title>a {
display: none; }

td.drop_invalid #entryopen_content {
float: none !important;
position: absolute;
left: 204px;
margin: 0 -210px 0 0;
padding: 2px 6px 2px 0px;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #openflag_public {
position: absolute;
top: 2px;
left: -124px; }

td.drop_invalid label[for="openflag_public"] {
position: absolute;
top: 4px;
left: -104px; }

td.drop_invalid #openflag_private {
position: absolute;
top: 2px;
left: -74px; }

td.drop_invalid label[for="openflag_private"] {
position: absolute;
top: 4px;
left: -54px; }

td.drop_invalid #fan_only {
position: relative;
top: 0px;
left: -24px; }

td.drop_invalid #entryopen_content>label[for="fan_only"] {
margin-left: -25px !important; }


/* *** */

td.drop_invalid #ping_form {
position: absolute;
top: 85px;
left: 541px;
height: 23px;
width: 158px;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 10px 0px 10px 50px !important;
background-color: #98c1dc; /* 背景色 */
transition: 0.5s;
z-index: 2; }

td.drop_invalid #ping_form:hover {
left: 351px;
width: 348px;
z-index: 4; }

td.drop_invalid #ping_form>label:nth-child(1) {
display: inline-block;
position: relative;
top: 0px;
right: 12px;
text-align: right;
width: 100% !important;
height: 19px;
padding: 4px 10px 0 0px;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #ping_form>input {
position: absolute;
top: 13px;
right: 140px; }

td.drop_invalid #ping_form>label:nth-child(3) {
position: absolute;
top: 15px;
right: 170px;

margin-right: 40px;
font-size: 12px; }

td.drop_invalid #ping_form>label:nth-child(3):after {
content: "    ※非公開記事はPING不能"; }


/* 文書編集部 */

td.drop_invalid #entrymenu {
position: absolute;
top: 130px;
width: 700px; }

td.drop_invalid #entrymenu_title {
display: none; }

td.drop_invalid #entrymenu_content {
width: auto !important; }

td.drop_invalid #usehtml>a {
border-radius: 3px; }

td.drop_invalid #usehtml>br {
display: none; }


/* *** */

td.drop_invalid #entry_menu6 {
position: relative;
left: 164px; }

td.drop_invalid #entry_menu7 {
position: relative;
left: 220px; }

td.drop_invalid #smallPallet {
position: relative;
left: 60px;
height: 20px !important; }

td.drop_invalid #skype {
position: relative;
left: 195px; }

td.drop_invalid #entry_menu11 {
position: relative;
left: -80px; }

td.drop_invalid #entry_menu12 {
position: relative;
left: -80px; }

td.drop_invalid #entry_menu13 {
position: relative;
left: -80px; }

td.drop_invalid #entry_menu14 {
position: relative;
left: -80px; }


/* *** */

/* 新パレットが下に表示されるバグ回避 */
#colorPallet , #skypeEmoticon {
z-index: 101 !important; }

#colorPallet>.curve-head , #colorPallet>.curve-head>div ,
#colorPallet>.curve-body , #colorPallet>.curve-body>.curve-body_left ,
#colorPallet>.curve-bottom , #colorPallet>.curve-bottom>div {
background: none !important; }

#colorPallet {
border: 1px solid #777;
border-radius: 6px;
background: #fff;
box-shadow: 2px 2px 12px rgba(140,140,140,0.5); }

#skypeEmoticon>.curve-head , #skypeEmoticon>.curve-head>div ,
#skypeEmoticon>.curve-body , #skypeEmoticon>.curve-body>.curve-body_left ,
#skypeEmoticon>.curve-bottom , #skypeEmoticon>.curve-bottom>div {
background: none !important; }

#skypeEmoticon {
border: 1px solid #777;
border-radius: 6px;
background: #fff;
box-shadow: 2px 2px 12px rgba(140,140,140,0.5); }


/* *** */

td.drop_invalid #no_html {
padding: 2px 6px 1px 2px;
border: 1px solid #fff;
border-radius: 3px;
height: 20px; }

td.drop_invalid #no_html>label {
vertical-align: 1px; }

td.drop_invalid #no_html>input[value="プレビュー"] {
display: none; }


/* *** */

td.drop_invalid:nth-child(2)>form>table:first-of-type>tbody>tr>td.mid {
padding-bottom: 0 !important; } /* 新規編集枠の以降の高さ調整をOFF */

td.drop_invalid:nth-child(2)>form>table:first-of-type {
width: 100% !important;
margin-top: 160px !important; } /* 編集枠高さ位置 */

textarea#content {
width: 713px !important;
height: 440px !important;
font-size: medium !important;
padding: 5px 10px !important;
border: 1px solid #aaa !important;
border-radius: 3px !important;
background: #fbfbfb !important; }


/* *** */

textarea#content~.mt5 {
height: 24px;
width: 80px;
margin-top: 8px !important;
padding: 2px 0 0 !important; }

textarea#content~.mt5>label {
vertical-align: 2px !important; }

textarea#content~.mt5>span.HELP {
display: none; }

#morehtml>table {
width: 100%; }

#morehtml>table>tbody>tr:nth-child(2)>td>input {
height: 23px;
font-size: medium !important;
padding: 3px 8px 0;
margin: 3px 0 3px;
border: 1px solid #aaa !important;
border-radius: 3px; }

#morehtml>table>tbody>tr:nth-child(2)>td>span.HELP {
display: none; }

textarea#morecontent {
width: 713px !important;
height: 440px !important;
font-size: medium !important;
padding: 5px 10px !important;
margin-bottom: 32px !important; /* Moreの下幅調整 */
border: 1px solid #aaa !important;
border-radius: 3px !important;
background: #fbfbfb !important; }


/* *** */

td.drop_invalid #upload {
height: 28px;
width: 200px;
margin: -23px auto 60px 533px; /* 60px 全体の縦幅指定 背景切れに関係 */
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box; }

td.drop_invalid #upload_title {
margin: 0 2px; }

td.drop_invalid #upload_content>input[value="参照"] {
height: 24px !important;
margin: -4px 0 0;
padding: 3px 10px 0 !important; }

td.drop_invalid #upload_attention {
display: none; }


/* *** */

td.drop_invalid #imageframe {
position: absolute; /* 新規/更新で最下端位置に影響させない */
margin: -88px auto 0px 110px;
height: 28px !important;
width: 550px !important;
border-radius: 3px;
box-sizing: border-box; }


/* *** */

form[name="fileform"]>table:nth-child(1)>tbody>tr:nth-child(-n+4) ,
form[name="fileform"]>table:nth-child(1)>tbody>tr:nth-child(7) {
display: none; }

form[name="fileform"]>table:nth-child(1)>tbody>tr:nth-child(5) {
position: absolute;
top: 5px;
left: 6px; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX>table:nth-child(7) {
position: absolute;
width: 128px !important;
top: -7px;
left: 166px; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX>table:nth-child(7) input[name="filename"] {
width: 125px !important;
padding: 1px 0 0;
height: 22px;
border: 0 !important;
opacity: 0.8; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX>table:nth-child(8) {
position: absolute;
top: 5px;
left: 268px;
width: 200px !important; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX img {
display: none; }

form[name="fileform"]>table:nth-child(1) input[value="アップロード"] {
position: absolute;
top: 3px;
left: 440px;
width: 100px !important;
height: 23px !important;
padding: 2px 0px 0 !important; }


/* *** */

form[name="tagurl"]~tbody:nth-child(3)>tr:nth-child(-n+4) {
display: none !important; }

form[name="tagurl"]~tbody:nth-child(3)>tr:nth-child(5) {
position: absolute;
top: 5px;
left: 6px; }

form[name="tagurl"]~tbody:nth-child(3) #POPUPBOX>table:nth-child(1) td {
position: absolute;
white-space: nowrap;
width: 130px !important;
overflow: hidden;
top: 3px;
left: 165px; }

form[name="tagurl"]~tbody:nth-child(3) #POPUPBOX>table:nth-child(1) input[name="tagURL"] {
width: 120px !important;
height: 19px !important;
font-size: inherit !important;
padding: 2px 0 0 4px;
margin-left: -42px;
border: 1px solid #aaa !important;
border-radius: 3px; }

form[name="tagurl"]~tbody:nth-child(3) #POPUPBOX>table:nth-child(2) {
position: absolute;
top: 5px;
left: 268px;
width: 200px !important; }

form[name="tagurl"]~tbody:nth-child(3)>tr:nth-child(7) td {
display: none; }

form[name="tagurl"]~tbody:nth-child(3) #POPUPBOX img {
display: none; }

form[name="tagurl"]~tbody:nth-child(3) input[value="アップロード"] {
position: absolute;
top: 3px;
left: 440px;
width: 100px !important;
height: 23px !important;
padding: 2px 0px 0 !important; }


/* *** */

td.drop_invalid #upfile_list {
position: absolute;
bottom: 340px;
right: 15px;
overflow: hidden;
min-height: 126px;
min-width: 6px;
background: #fff;
border: 1px solid #777 !important;
border-radius: 3px;
box-sizing: border-box; }

td.drop_invalid #upfile_list>table:nth-child(1) {
display: none; }

td.drop_invalid #upfile_list>table:nth-child(2) {
display: block;
height: 106px; /* 画像リスト縦幅 */
width: 370px !important;
overflow-x: hidden;
overflow-y: scroll;
margin: 4px 4px 4px -230px;
padding: 0 340px 0 0;
transition: margin 0.5s; }

td.drop_invalid #upfile_list>table:nth-child(2):hover {
margin: 4px 4px 4px 4px;
padding: 0; }

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(1) {
display: none !important; }

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(3)>font {
font-size: 9px !important; }

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(3) a {
font-size: 16px;
display: inline-block;
width: 230px; } /* 画像リスト ファイル名幅 */

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(3)>table {
padding: 5px 0 0 10px;
margin: 0 0 4px;
background: #f4f4f4; }

td.drop_invalid #upfile_list select {
height: 23px !important;
font-size: inherit !important;
padding: 2px 0 0 !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

td.drop_invalid #upfile_list select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }

td.drop_invalid #upfile_list input[value="削除"] {
height: 23px !important;
padding: 2px 10px 0 !important;
margin-left: -22px; }

td.drop_invalid #upload_notes {
display: none; }


/* *** */

/* トラックバック枠の削除 */
td.drop_invalid:nth-child(2)>form>table:last-of-type {
display: none; }


/* *** */

td.drop_invalid input[value="プレビュー"] {
position: absolute;
left: 250px;
margin: -60px 0 0 !important;
width: 100px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#eee 100%) !important; }

td.drop_invalid input[value="送信"] {
position: absolute;
left: 370px;
margin: -60px 0 0 !important;
width: 150px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#B3E5FC 100%) !important; }


/* *** */

/* カテゴリ設定ウインドウ */

input[name="cgname"] {
width: 150px !important;
height: 19px !important;
padding: 2px 4px 0 !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

input[value="削除"] , input[value="変更"] ,
input[value="カテゴリの追加"] , input[value="閉じる"] {
height: 23px !important;
padding: 2px 10px 0 !important; }

input[value="カテゴリの追加"] {
width: auto !important; }


/* *** */

#template , input[value="カテゴリ設定"] , .mt5 ,
input[value="参照"] ,
input[value="削除"] , input[value="変更"] ,
input[value="カテゴリの追加"] , input[value="閉じる"] ,
input[value="アップロード"] ,
input[value="プレビュー"] , input[value="送信"] {
border: solid 1px #aaa !important;
border-radius: 3px !important;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff inset;
box-sizing: border-box;
background: linear-gradient(to bottom, #fff 0%,#ddd 100%); }

input[type="radio"] {
vertical-align: bottom; }

input[type="checkbox"] {
vertical-align: bottom; }

*{ font-family: "メイリオ","Meiryo" !important; }






このバージョンでは、背景色の指定は5ヵ所で指定しています。 それらを探して変更する事も出来ますが、以下のオプションのカラーコード(青文字の部分)を書き換えて、上記のスタイルシートの最後尾に追加記入するだけで、背景色を変更出来ます。

ブラシュアップ ver.2 背景色オプション

iframe#tmpfilelist~table , iframe#filelist~table ,
td.drop_invalid #entryoption , td.drop_invalid #entrydate ,
td.drop_invalid #entryopen , td.drop_invalid #ping_form {
background-color: #98c1dc !important; }



[PR]
by Ataron | 2017-03-29 23:34 | ブログスキンのアレンジ | Comments(0)

明石公園 2017.03.28 桜のつぼみも膨らむ

2017年 03月 28日
編集画面のアレンジに何日もとりこんで運動不足。 ハト達への配達も滞っているなぁと、天気が良いので外に出ると、もう春の空気です。

公園に到着したのは14時前、ハト達を待つと数分位でぼちぼち集まり始めました。 今日の一番の甘えっ子はチャメで、最初からずっと私の腕やバッグにぶら下がって、リクエストをし続けました。 こういう時は、パンを少しだけ渡して、一応苦労を無視しないのを示します。

他のマーカーを探すと、マギ3、ツメ白しか見つかりません。 もっと来ないかとずいぶん皆を待たせ、最後は50羽以上が集まったのに、加わって来るマーカーは居ませんでした。 さすがに来るのが少し遅すぎたか。

シロロン達は少し数が減って来た様で、顔だけ黒い夏羽に変わり出したのも居ます。

b0174191_22120342.jpg

ツメ白は、一度だけ腕に乗って来て存在をアピールしました。

b0174191_22120963.jpg

マギ3は愛嬌があり、だれか確かめようとしたら、反対に覗き込んで来ました。

b0174191_22193009.jpg

他の写真で、右の指に糸を巻いていてマギ3と判ったのですが...


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2017-03-28 22:00 | 鳥さんの写真 | Comments(0)

エキサイトブログ / 旧編集画面のアレンジ(4) IE11版 - ブラシュアップ

2017年 03月 28日
IE11版を一気に完成度の高いものに改善しました。

〔追記〕2017.03.29
基本的な構成は同様ですが、3/29にエモーティコンパレット削除と編集アイコンの配置変更があり、対策版として「ブラッシュアップⅡ」を発行し、同時に細かな改善をしています。 推奨版は以下のリンク先にあります。



●エキサイト管理ページなどへの影響を徹底してチェックして、セレクタの高度化で抑止しました。 スタイルシートONのままでも、全ての新旧管理画面が影響なく使える様です。
●投稿設定メニュー類を一列にまとめてコンパクト化しました。
●画像アップロード部を一行のコンパクトなものとして文字編集枠の直下に配置しました。
●アップロード済の画像ファイルリストを、編集枠右側の小型のパレット枠に配置し、編集時の画像削除や移動時に、リストと文書内の照合をし易くしています。
●編集画面のウインドウはコンパクトで、150%拡大でも使用可能な位です。 編集時に、全体のウインドウには縦横のスクロールバーがほぼ出ない(More仕様時を除く)ので、スクロール操作は常に編集枠の操作になります。 これは、とても快適な編集環境です。
●編集に必要なツールのみを合理的に配置していて、編集枠面は淡いスモークをかけ、目に優しく編集に集中出来ます。 編集に関わる文字は16px(Medium)で見易く、好みの背景色/テクスチャー画僧やフォントを利用できます。
●CSSの知識がある方は、目的に合せて独自にアレンジを追加したり改造できます。



ブラシュアップ版のブラウザ拡大率100%時のハードコピーです。 デスクトップモニターでは125%前後が適当と思われます。

b0174191_00194569.png

編集枠右下の「参照」スイッチで画像アップロードを起動します。 横に一列の表示が出て、その「参照」を押すとファイル指定の別ウインドウが開きます。 後の操作は元と同様で、ファイルを指定すると、下図の様に小枠にセットされ「アップロード」ボタンで文書上に画像コードが書き込まれます。

b0174191_00214387.png

アップロードしたファイルは、編集枠右横の画像ファイルパレット枠に登録されます。

b0174191_00292643.png

このパレットは、画像ファイルのリストが増えると縦スクロールで一覧出来ます。 全体のウインドウを拡げて文書編集に全く邪魔にならない様にも出来、またマウスを乗せると左に伸びてファイル名が読み易く表示されます。 これは、下図の様に文書上とリスト上の画像ファイル名の照合をし易い様に配置したものです。

b0174191_00331121.png

下図は一列にまとめた(編集画面の3段目)投稿設定メニュ類の様子です。 全部で4種の項目に別れていて、それぞれマウスを乗せるとバーが拡張して、隠れていたメニューが表示されます。

b0174191_00422779.png

「投稿日時」のみ少し癖があります。 ホバーを勝手に閉じさせず日時変更するには、キーボード↑↓とマウスを併用するしかありません。 これでは不便なので一旦開くと数秒閉じない様に遅延動作させて、マウスのみで操作可能としています。

右上の「テンプレート」ボタンを押すと、下図の様にテンプレートの一覧がスライドアウトして表示され、ここで選択が可能です。

b0174191_00533816.png

テンプレート編集画面は従来の旧編集画面のままで、背景色のみこの編集画面の背景色/テクスチャーが反映します。 多用する機能ではないのでアレンジ対象としませんでした。



ブラウザはIE11を前提として調整していますが、このアレンジを実現するには、IE11内蔵のユーザースタイルシートの機能を利用します。 その設定方法は以下のリンクを参照ください。


IE11に設定するユーザースタイルシート(CSS)は以下です。 今回のバージョンは他ページへの誤適応を極力抑止した改善版ですが、完璧ではありません。 問題が生じた場合も、一般に表示上の問題が生じるだけですが、これを嫌う場合は編集利用時外は、IEの設定をOFFにします。


旧編集画面用 スタイルシート IE11版 - ブラシュアップ



/* 旧編集画面用 スタイルシート IE11版 - ブラシュアップ */


#exHeaderWrapper {
display: none; }

#exFooterWrapper {
display: none; }


/* *** */

/* 新管理画面バー幅補正 */
#toUserconf {
overflow: hidden; }

/* iframe#tmpfilelist は新規編集画面にのみ存在 背景色指定 */

iframe#tmpfilelist~table {
position: absolute;
top: 0;
width: 100% !important;
height: 100%; }

iframe#tmpfilelist~table {
background-color: #98c1dc; } /* 背景色 */

/* iframe#filelist はテンプレ編集画面と更新編集画面にのみ存在 背景色指定 */
iframe#filelist~table {
position: absolute;
top: 0;
width: 100% !important;
height: 100%; }

iframe#filelist~table {
background-color: #98c1dc; } /* 背景色 */


/* 編集画面べース 左側部 / 登録データ表示 */

td.drop_invalid:nth-child(1) {
position: absolute; }

td.drop_invalid:nth-child(1)>:not(.capacity) {
display: none; }

td.drop_invalid:nth-child(1)>.capacity {
position: absolute;
top: 626px;
left: 340px;
height: 28px;
width: 200px;
margin: 0 !important;
padding: 5px 0 0 12px !important;
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box; }

td.drop_invalid:nth-child(1)>.capacity>div:nth-child(2) {
position: relative;
top: -17px;
left: 80px;
font-weight: normal !important; }

td.drop_invalid:nth-child(1)>.capacity>div:nth-child(2) b {
color: #777; }



/* 編集画面ベース 中央部 */
td.drop_invalid:nth-child(2) {
position: relative;
left: 0;
width: auto !important;
padding-left: 15px !important; }

/* 編集画面べース 右側部 */
td.drop_invalid:nth-child(2)+td {
display: none; }


/* *** */

td.drop_invalid #entry_header {
display: none; }

td.drop_invalid #template {
position: absolute;
top: 15px;
left: 660px;
height: 24px;
width: 90px;
padding: 4px 4px 0 !important;
overflow: hidden;
transition: 0.5s; }

td.drop_invalid #template:hover {
left: 150px;
height: auto;
width: 600px;
padding: 8px 10px 0 !important;
background: #fff !important;
z-index: 6; }

td.drop_invalid #template_names {
overflow: hidden; }

td.drop_invalid #template_names span {
display: block;
text-align: left;
margin: 0 20px 6px;
width: 100%;
white-space: nowrap; }

td.drop_invalid #template_names span.tmp a ,
td.drop_invalid #template_names span.st {
font-size: 16px !important;
line-height: 130% !important;
text-decoration: none; }

td.drop_invalid #template_names span:not(.tmp) {
text-align: right !important; }

td.drop_invalid #template_names input {
width: 90px !important;
height: 21px !important;
padding: 1px 10px 0 !important;
border: solid 1px #aaa !important;
border-radius: 3px !important;
margin: 0 6px; }


/* *** */

td.drop_invalid #subject {
position: absolute;
top: 15px;
padding: 0 !important; }

td.drop_invalid #subject_title {
display: none; }

td.drop_invalid #subject input {
width: 590px !important;
height: 23px;
padding: 3px 15px 0;
font-size: medium !important;
border: 1px solid #aaa !important;
border-radius: 3px;
transition: 0.5s; }

td.drop_invalid #subject input:hover {
width: 703px !important; }

td.drop_invalid #subject input:focus {
width: 703px !important; }


/* *** */

td.drop_invalid #category {
position: absolute;
top: 55px;
padding: 0 !important; }

td.drop_invalid #category_title {
display: none; }

td.drop_invalid #CateStr select {
width: 180px;
height: 23px !important;
font-size: inherit !important;
padding: 2px 0 0 4px !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

td.drop_invalid #CateStr select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }

td.drop_invalid #CateStr input[value="カテゴリ設定"] {
height: 24px !important;
padding: 2px 0 0 !important;
vertical-align: top; }


/* *** */

td.drop_invalid #tags {
position: absolute;
top: 55px;
left: 305px;
width: 448px;
padding: 0 !important; }

td.drop_invalid #tags_title {
width: 32px !important;
padding: 5px 0 0; }

td.drop_invalid #tags .tag {
width: 138px !important; }

td.drop_invalid #tags input {
width: 116px !important;
height: 19px !important;
font-size: inherit !important;
padding: 2px 0 0 4px !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

td.drop_invalid #tags .tag a {
width: 13px !important;
height: 13px !important;
border-radius: 13px;
background-position: -5px -4px; }

td.drop_invalid #tags_attention {
display: none; }

/* タグリストの幅拡大 公開設定の上に表示 */
body>#exHeaderWrapper ~ div[style*="width: 122px"]:last-child {
position: relative;
width:162px !important;
z-index: 5; }

body>#exHeaderWrapper ~ div[style*="width: 122px"]:last-child>div {
width:150px;
padding: 0 6px 0; }


/* *** */

td.drop_invalid #entryoption {
position: absolute;
top: 85px;
left: 15px;
width: 110px;
height: 23px;
overflow: hidden;
white-space: nowrap;
margin: 0px !important;
padding: 10px 0 10px !important;
background-color: #98c1dc !important; /* 背景色 */
transition: 0.5s;
z-index: 3; }

td.drop_invalid #entryoption:hover {
width: 745px; }

td.drop_invalid #entryoption_title {
display: none; }

td.drop_invalid #entryoption>.entryoption_menu {
padding: 4px 4px 2px;
margin: 0px 2px 15px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #entryoption>.entryoption_menu input {
margin: -3px -2px 0 0 !important; }


/* *** */

td.drop_invalid #cdcdcd {
display: none; }


/* *** */

td.drop_invalid #entrydate {
position: absolute;
top: 85px;
left: 140px;
height: 23px;
width: 210px;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 10px 0 10px !important;
background-color: #98c1dc !important; /* 背景色 */
transition: width 0.5s 4s;
z-index: 2; }

td.drop_invalid #entrydate:hover {
width: 612px;
transition: width 0.5s 0s; }

td.drop_invalid #entrydate>div {
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #entrydate>div:nth-child(1) {
float: left;
padding: 4px 0 2px 6px;
margin: 0 0 15px !important;
width: 195px; }

td.drop_invalid #entrydate #entrydate_content {
margin: -2px 0 0 -20px; }

td.drop_invalid #entrydate>div:nth-child(2) {
float: left;
padding: 1px 0 1px 8px;
margin: 0 4px 0 !important;
width: 315px; }
td.drop_invalid #entrydate_setting select {
height: 21px !important;
padding: 2px 0 0 !important;
border: 1px solid #ccc !important; }

td.drop_invalid #entrydate_setting select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }


/* *** */

td.drop_invalid #entryopen {
position: absolute;
top: 95px;
left: 361px;
height: 23px;
width: 176px;
overflow: hidden;
white-space: nowrap;
margin: 0 !important;
padding: 0 0 0 8px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6;
transition: width 0.5s;
z-index: 1; }

td.drop_invalid #entryopen:hover {
width: 378px; }

td.drop_invalid #entryopen #entryopen_title {
margin: 4px 0 0; }

td.drop_invalid #entryopen #entryopen_content {
margin: 2px -300px 0 -10px; }

td.drop_invalid #entryopen_title {
width: 65px !important; }

td.drop_invalid #entryopen_title >a {
display: none; }

td.drop_invalid #entryopen #fan_only {
position: relative;
top: 0px;
left: -24px; }

td.drop_invalid #entryopen label[for="fan_only"] {
margin-left: -25px !important; }


/* *** */

td.drop_invalid #ping_form {
position: absolute;
display: flex;
flex-direction: row-reverse;
top: 95px;
left: 588px;
height: 19px;
width: 145px;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 4px 7px 0px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6;
transition: 0.5s; }

td.drop_invalid #ping_form:hover {
left: 358px;
width: 375px;
z-index: 4; }

td.drop_invalid #ping_form> input {
position: relative;
top: -2px; }


/* 文書編集部 */

td.drop_invalid #entrymenu {
position: absolute;
top: 130px;
width: 700px; }

td.drop_invalid #entrymenu_title {
display: none; }

td.drop_invalid #entrymenu_content {
width: auto !important; }

td.drop_invalid #usehtml a {
border-radius: 3px; }

td.drop_invalid #usehtml br {
display: none; }


/* *** */

td.drop_invalid #entry_menu6 {
position: relative;
left: 164px; }

td.drop_invalid #entry_menu7 {
position: relative;
left: 220px; }

td.drop_invalid #smallPallet {
position: relative;
left: 60px;
height: 20px !important; }

td.drop_invalid #skype {
position: relative;
left: 195px; }

td.drop_invalid #entry_menu11 {
position: relative;
left: -80px; }

td.drop_invalid #entry_menu12 {
position: relative;
left: -80px; }

td.drop_invalid #entry_menu13 {
position: relative;
left: -80px; }

td.drop_invalid #entry_menu14 {
position: relative;
left: -80px; }

/* 新パレットが下に表示されるバグ回避 */
#colorPallet , #skypeEmoticon {
z-index: 101 !important; }


/* *** */

td.drop_invalid #entrymenu #no_html {
padding: 2px 6px 1px 2px;
border: 1px solid #fff;
border-radius: 3px;
height: 20px; }

td.drop_invalid #entrymenu #no_html label {
vertical-align: 1px; }

td.drop_invalid #entrymenu #no_html input[value="プレビュー"] {
display: none; }


/* *** */

/* 全作業幅指定 送信ボタン横位置に関係 */
form[name="insertform"] {
margin: 0 auto 0 0 !important;
width: 740px; }

form[name="insertform"] #entrymenu +table>tbody>tr>td.mid {
padding-bottom: 0 !important; }

form[name="insertform"]>table:first-of-type {
width: 100% !important;
margin-top: 160px !important; } /* 編集枠高さ位置 */

form[name="updateform"]>table:first-of-type {
width: 100% !important;
margin-top: 160px !important; } /* 編集枠高さ位置 */

textarea#content {
width: 713px !important;
height: 440px !important;
font-size: medium !important;
padding: 5px 10px !important;
border: 1px solid #aaa !important;
border-radius: 3px !important;
background: #fbfbfb !important; }


/* *** */

textarea#content~.mt5 {
height: 24px;
width: 80px;
margin-top: 8px !important;
padding: 2px 0 0 !important; }

textarea#content~.mt5 label {
vertical-align: 2px !important; }

textarea#content~.mt5 span.HELP {
display: none; }

#morehtml table {
width: 100%; }

#morehtml input {
height: 23px;
font-size: medium !important;
padding: 3px 8px 0;
margin: 3px 0 3px;
border: 1px solid #aaa !important;
border-radius: 3px; }

#morehtml input+span.HELP {
display: none; }

textarea#morecontent {
width: 713px !important;
height: 440px !important;
font-size: medium !important;
padding: 5px 10px !important;
margin-bottom: 32px !important; /* Moreの下幅調整 */
border: 1px solid #aaa !important;
border-radius: 3px !important;
background: #fbfbfb !important; }


/* *** */

td.drop_invalid #upload {
height: 28px;
width: 200px;
margin: -23px auto 0px 533px;
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box; }

td.drop_invalid #upload_title {
margin: 0 2px; }

td.drop_invalid input[value="参照"] {
height: 24px !important;
margin: -4px 0 0;
padding: 3px 10px 0 !important; }

td.drop_invalid #upload_attention {
display: none; }


/* *** */

td.drop_invalid #imageframe {
position: relative;
top: -28px;
left: 10px;
margin-bottom: -10px; /* 送信ボタン高さ位置 */
height: 28px !important;
width: 550px !important;
border-radius: 3px;
box-sizing: border-box; }


/* *** */

form[name="fileform"]>table:nth-child(1)>tbody>tr:nth-child(-n+4) ,
form[name="fileform"]>table:nth-child(1)>tbody>tr:nth-child(7) {
display: none; }

form[name="fileform"]>table:nth-child(1)>tbody>tr:nth-child(5) {
position: absolute;
top: 5px;
left: 6px; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX>table:nth-child(7) {
position: absolute;
width: 128px !important;
top: -7px;
left: 166px; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX>table:nth-child(7) input[name="filename"] {
width: 125px !important;
padding: 1px 0 0;
height: 22px;
border: 0 !important;
opacity: 0.8; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX>table:nth-child(8) {
position: absolute;
top: 5px;
left: 268px;
width: 200px !important; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX img {
display: none; }

form[name="fileform"]>table:nth-child(1) input[value="アップロード"] {
position: absolute;
top: 3px;
left: 440px;
width: 100px !important;
height: 23px !important;
padding: 2px 0px 0 !important; }


/* *** */

form[name="tagurl"]~tbody:nth-child(3)>tr:nth-child(-n+4) {
display: none !important; }

form[name="tagurl"]~tbody:nth-child(3)>tr:nth-child(5) {
position: absolute;
top: 5px;
left: 6px; }

tbody:nth-child(3) #POPUPBOX>table:nth-child(1) td {
position: absolute;
white-space: nowrap;
width: 130px !important;
overflow: hidden;
top: 3px;
left: 165px; }

tbody:nth-child(3) #POPUPBOX>table:nth-child(1) input[name="tagURL"] {
width: 120px !important;
height: 19px !important;
font-size: inherit !important;
padding: 2px 0 0 4px;
margin-left: -42px;
border: 1px solid #aaa !important;
border-radius: 3px; }

tbody:nth-child(3) #POPUPBOX>table:nth-child(2) {
position: absolute;
top: 5px;
left: 268px;
width: 200px !important; }

form[name="tagurl"]~tbody:nth-child(3)>tr:nth-child(7) td {
display: none; }

tbody:nth-child(3) #POPUPBOX img {
display: none; }

form[name="tagurl"]~tbody:nth-child(3) input[value="アップロード"] {
position: absolute;
top: 3px;
left: 440px;
width: 100px !important;
height: 23px !important;
padding: 2px 0px 0 !important; }


/* *** */

td.drop_invalid #upfile_list {
position: absolute;
bottom: 360px;
right: 15px;
overflow: hidden;
background-color: #fff;
border: 1px solid #aaa !important;
border-radius: 3px;
box-sizing: border-box; }

td.drop_invalid #upfile_list>table:nth-child(1) {
display: none; }

td.drop_invalid #upfile_list>table:nth-child(2) {
display: block;
height: 106px; /* 画像リスト縦幅 */
width: 370px !important;
overflow-x: hidden;
overflow-y: scroll;

margin: 4px 4px 4px -230px;
padding: 0 340px 0 0; }

td.drop_invalid #upfile_list>table:nth-child(2):hover {
margin: 4px 4px 4px 4px;
padding: 0; }

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(1) {
display: none !important; }

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(3)>font {
font-size: 9px !important; }

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(3) a {
font-size: 16px;
display: inline-block;
width: 230px; } /* 画像リスト ファイル名幅 */

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(3)>table {
padding: 5px 0 0 10px;
margin: 0 0 4px;
background: #f4f4f4; }

td.drop_invalid #upfile_list select {
height: 23px !important;
font-size: inherit !important;
padding: 2px 0 0 !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

td.drop_invalid #upfile_list select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }

td.drop_invalid #upfile_list input[value="削除"] {
height: 23px !important;
padding: 2px 10px 0 !important;
margin-left: -22px; }

td.drop_invalid #upload_notes {
display: none; }


/* *** */

form[name="insertform"]>table:last-of-type {
display: none; }

form[name="updateform"]>table:last-of-type {
display: none; }


/* *** */

td.drop_invalid input[value="プレビュー"] {
width: 100px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#eee 100%) !important; }

td.drop_invalid input[value="送信"] {
width: 150px;
margin-bottom: 30px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#B3E5FC 100%) !important; }


/* *** */

/* カテゴリ設定ウインドウ */

input[name="cgname"] {
width: 150px !important;
height: 19px !important;
padding: 2px 4px 0 !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

input[value="削除"] , input[value="変更"] ,
input[value="カテゴリの追加"] , input[value="閉じる"] {
height: 23px !important;
padding: 2px 10px 0 !important; }

input[value="カテゴリの追加"] {
width: auto !important; }


/* *** */

#template , input[value="カテゴリ設定"] , .mt5 ,
input[value="参照"] ,
input[value="削除"] , input[value="変更"] ,
input[value="カテゴリの追加"] , input[value="閉じる"] ,
input[value="アップロード"] ,
input[value="プレビュー"] , input[value="送信"] {
border: solid 1px #aaa !important;
border-radius: 3px !important;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff inset;
box-sizing: border-box;
background: linear-gradient(to bottom, #fff 0%,#ddd 100%); }

input[type="radio"] {
vertical-align: bottom; }

input[type="checkbox"] {
vertical-align: bottom; }

*{ font-family: "メイリオ","Meiryo" !important; }



このスタイルシート中の前半部で /* 背景色 */ で指定した4ヵ所の行は、編集画面の「背景色」を指定している部分です。
好みの背景色や、テクスチャー画像を利用したい場合は、これらの4ヵ所を同時に書換えてください。 この書換えについては、以下のリンク先の末尾に書いていますので、参考にしてください。


〔追記〕2017.03.29
「エモーティコン」アイコン削除にともなう編集アイコンの乱れを修正済みです。 ただし、アレンジ仕様を改善した「ブラッシュアップⅡ」が推奨です。




[PR]
by Ataron | 2017-03-28 02:04 | ブログスキンのアレンジ | Comments(0)

エキサイトブログ / Exヘッダーのシステム変更に対処

2017年 03月 23日
エキサイトのヘッダー仕様が変更になり、ページの上部(これは個人固有のヘッダー)が下にもぐった表示になってしまいました。 ウチの変更は3月23日の夕方、ちょうど編集画面のスキンを調整中だったので、最初は自分のミスかと思って混乱しました。 告示は以下。


こんなの、予告なしに施行してはいけませんね。 ヘッダー部はページデザインの重要な所ですから、きっと沢山の人がむっとしたでしょう。 有料会員でヘッダーを無しにしている場合は影響がないでしょうが、上が潜らないスキンデザインがあったら教えて欲しいもんです。 エキサイトは「スキンをアレンジしている場合」などと言ってますが、皆んな上が減っていて、ただデザインがおうよそで気付き難いスキンもあるだけでしょう。

私のところのは、

#W_HEADER {
margin-top: 28px; }

を追加、つまりヘッダーのブロック「W_HEADER」の 上マージン を28px 増やしただけで解決しました。 青文字の内容は多くのヘッダーで有効でしょうが、ブロックのID名はスキンにより異なり、また、特殊なヘッダー構造のスキンでは、もう少し細かな調整が要るかもしれません。

b0174191_21221523.png


〔追記〕2017.03.24
iframeの扱いが難しいのか、上記対処をしたのちにチェックすると、何度かリロードすると以前の様になったり、上部が潜り入ったりと、表示が不安定でした。 他の方のページを幾つか調べると、エキサイトヘッダー無し以外のスキンは全く同じ現象で、素人が作ったスキンみたいです。

で、一日経過後に、どうやら以前のシステムに差し戻しがあり、私のスキンは現在は上が開いてしまいました。 今後、iframe化を諦めるのか、再び調整後に施行されるのか様子見です。

エキサイト側で配布した全体のスキンを調整するのは大変なので、再施行されるとしても上部デザインを浸食しないものとなると思われ、私の方も修正を戻しました。





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

明石公園 2017.03.22 俺達はマスコミ向きじゃない

2017年 03月 22日
晴れたり曇ったりだが、少し暖か。 公園到着は13時過ぎです。

ポイントに最初は1~2羽でしたが、少しずつ集まって来ました。 マーカーを数え始めた時には、余りかんばしくなかったものの、次第にいつものメンバーがやって来て40羽ほどになりました。

エルト、ピンク、マギ、アサッテ、左アシ、そしてツメ白、左ユビ。 マギ2はやはり来ないが、主要な面子が遅い時刻に集まり始めたか?

b0174191_20594700.jpg
b0174191_20054893.jpg
b0174191_20055442.jpg
b0174191_20060587.jpg

もうそろそろ桜の季節が近い、瀬戸内の公園からです。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。

[PR]
by Ataron | 2017-03-22 20:08 | 鳥さんの写真 | Comments(0)

エキサイトブログ / 旧編集画面のアレンジ(3) IE11版 - プロトタイプ

2017年 03月 21日
IE11環境で仕様される旧編集画面をアレンジをしました。 IE11でユーザースタイルシートを利用するには、IEの内蔵機能の設定だけで行えます。

但し、この機能はアレンジ対象サイトの選択が出来ません。 そのためアレンジが、想定外のページに適応される事が有り得ます。 トラブルはページの見え方に影響するだけで、それ以上の問題はありませんが、これを避けたければ、編集時以外はユーザースタイルシート機能をOFFにする必要があります。

IE11版は固有セレクタを饒舌に使い、誤適応の可能性を減らしていますが、これは限界があります。 エキサイト以外のサイトの表示には問題が少ないとしても、エキサイトの「設定画面」は全面的に使えません。 そこは同じセレクタが多く使われていて、もろに影響が出るからです。 従って「設定」を利用する場合はアレンジ機能をOFFとするしかありません。(CSSファイルを一時移動する事でもOFFに出来ます)

ブログ編集自体は問題が生じなくても、上記の問題を考慮する必要があります。 Chrome版は上記の問題はありません。



IE11でユーザースタイルシートを利用する方法は、以下のリンク先で説明しています。


上記機能を使い、下に掲載したユーザースタイルシート(CSS)を適応すると、旧編集画面は下図の様になります。

b0174191_19064996.png

今回のバージョンの特徴は以下です。
●文書編集枠は固定サイズです。 また、横幅が余りコンパクトではありません。
●文書編集枠の背景は純白ではなく、少し輝度を落として目に優しくしています。
●これは、画像ファイル関係の機能を右サイドに纏めた結果です。
●「トラックバックURL枠」と「みんなの投稿枠」の機能のみを省略しています。
●全体の背景色は好みにアレンジ可能ですが、ウインドウ最下部端に少し白地が露出します。



以下が、IEに登録するユーザースタイルシートです。 これはIE11専用です。


/* 旧編集画面用 スタイルシート IE11版 画像部右 */

#exHeaderWrapper {
display: none; }

#exFooterWrapper {
display: none; }


/* *** */

#wrapper {
min-width: 1070px; }

#wrapper>div>div {
display: none; }

#wrapper>div>table {
width: 100% !important;
padding-right: 190px; }

#wrapper>div>table>tbody>tr>td:nth-child(1) {
position: absolute;
top: 15px;
left: 916px;
width: 20px !important;
background: none !important; }

#wrapper>div>table>tbody>tr>td:nth-child(1) > :not(.capacity) {
display: none; }

#wrapper>div>table>tbody>tr>td:nth-child(1) > .capacity {
width: 133px;
margin: 0 !important;
padding: 8px 0 14px 15px !important;
border: 1px solid #ddd; }

#wrapper>div>table>tbody>tr>td:nth-child(2) {
width: 100% !important;
padding-left: 15px !important; }

#wrapper>div>table>tbody>tr>td:nth-child(3) {
display: none; }


/* *** */

#entry_header {
display: none; }

#template {
position: absolute;
top: 15px;
left: 660px;
height: 24px;
width: 90px;
padding: 4px 4px 0 !important;
overflow: hidden;
transition: 0.5s; }

#template:hover {
left: 150px;
height: auto;
width: 600px;
padding: 8px 10px 0 !important;
background: #fff !important;
z-index: 2; }

#template_names {
overflow: hidden; }

#template_names span {
display: block;
text-align: left;
margin: 0 20px 6px;
width: 100%;
white-space: nowrap; }

#template_names span.tmp a , #template_names span.st {
font-size: 16px !important;
line-height: 130% !important;
text-decoration: none; }

#template_names span:not(.tmp) {
text-align: right !important; }

#template_names input {
width: 90px !important;
height: 21px !important;
padding: 1px 10px 0 !important;
border: solid 1px #aaa !important;
border-radius: 3px !important;
margin: 0 6px; }


/* *** */

#subject {
position: absolute;
top: 15px;
padding: 0 !important; }

#subject_title {
display: none; }

#subject input {
width: 590px !important;
height: 23px;
padding: 3px 15px 0;
font-size: medium !important;
border: 1px solid #aaa !important;
border-radius: 3px;
transition: 0.5s; }

#subject input:hover {
width: 703px !important; }

#subject input:focus {
width: 703px !important; }


/* *** */

#category {
position: absolute;
top: 55px;
padding: 0 !important; }

#category_title {
display: none; }

#CateStr select {
width: 180px;
height: 23px !important;
font-size: inherit !important;
padding: 2px 0 0 4px !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

#CateStr select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }

#CateStr input[value="カテゴリ設定"] {
height: 24px !important;
padding: 2px 0 0 !important;
vertical-align: top; }


/* *** */

#tags {
position: absolute;
top: 55px;
left: 305px;
width: 448px;
padding: 0 !important; }

#tags_title {
width: 32px !important;
padding: 5px 0 0; }

#tags .tag {
width: 138px !important; }

#tags input {
width: 116px !important;
height: 19px !important;
font-size: inherit !important;
padding: 2px 0 0 4px !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

#tags .tag a {
width: 13px !important;
height: 13px !important;
border-radius: 13px;
background-position: -5px -4px; }

#tags_attention {
display: none; }


/* *** */

#entrydate {
position: absolute;
top: 90px;
width: 310px;
border: 1px solid #ddd;
padding: 4px 6px !important; }

#entrydate_setting select {
height: 21px !important;
padding: 2px 0 0 !important;
border: 1px solid #aaa !important;
background-color: #eee; }

#entrydate_setting select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }

#entryopen {
position: absolute;
top: 90px;
left: 342px;
width: 400px;
padding: 5px 0 29px 6px!important;
border: 1px solid #ddd; }

#entryopen_title {
width: 65px !important; }

#entryopen_title >a {
display: none;}

#entryopen #fan_only {
margin-left: 18px !important; }

#entrydate_setting {
margin-left: 0 !important; }

#ping_form {
position: absolute;
top: 120px;
left: 342px;
white-space: nowrap; }


/* *** */

#entrymenu {
position: absolute;
top: 180px;
width: 700px; }

#entrymenu_title {
display: none; }

#entrymenu_content {
width: auto !important; }

#usehtml a {
border-radius: 3px; }

#usehtml br {
display: none; }


/* *** */

#entry_menu6 {
position: relative;
left: 159px; }

#entry_menu7 {
position: relative;
left: 159px; }

#smallPallet {
position: relative;
left: 215px; }

#skype {
position: relative;
left: 33px; }

#entry_menu11 {
position: relative;
left: -103px; }

#entry_menu12 {
position: relative;
left: -103px; }

#entry_menu13 {
position: relative;
left: -103px; }

#entry_menu14 {
position: relative;
left: -103px; }


/* *** */

#entrymenu #no_html {
padding: 2px 6px 1px 2px;
border: 1px solid #fff;
border-radius: 3px;
height: 20px; }

#entrymenu #no_html label {
vertical-align: 1px; }

#entrymenu #no_html input[value="プレビュー"] {
display: none; }


/* *** */

#entrymenu +table>tbody>tr>td.mid {
padding-right: 20px !important; }

form[name="insertform"] #entrymenu +table>tbody>tr>td.mid {
padding-bottom: 0 !important; }

form[name="insertform"]>table:first-of-type {
width: 100% !important;
margin-top: 210px !important; }

form[name="updateform"]>table:first-of-type {
width: 100% !important;
margin-top: 210px !important; }

textarea#content {
width: 713px !important;
height: 440px !important;
font-size: medium !important;
padding: 5px 10px !important;
border: 1px solid #aaa !important;
border-radius: 3px !important;
background: #fbfbfb !important; }


/* *** */

textarea#content ~ .mt5 {
height: 24px;
width: 80px;
padding: 3px 0 0 !important; }

textarea#content ~ .mt5 label {
vertical-align: 2px !important; }

textarea#content ~ .mt5 span.HELP {
display: none; }

#morehtml table {
width: 100%; }

#morehtml input {
padding: 3px 8px 0;
height: 23px;
font-size: medium !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

textarea#morecontent {
width: 713px !important;
height: 440px !important;
font-size: medium !important;
padding: 5px 10px !important;
margin-bottom: 24px !important;
border: 1px solid #aaa !important;
border-radius: 3px !important;
background: #fbfbfb !important; }


/* *** */

#entryoption {
position: absolute !important;
top: 150px;
width: 733px;
height: 23px;
overflow: hidden;
margin: 0 !important;
background: none !important;
border: 1px solid #ddd; }

#entryoption_title {
display: none; }

#entryoption .entryoption_menu {
margin: 3px 8px 3px 5px !important; }

#entryoption .entryoption_menu input {
margin: 0 -2px 0 0 !important; }

#cdcdcd {
display: none; }


/* *** */

#upload {
position: absolute;
padding: 0 !important;
top: 15px;
left: 766px;
border: 1px solid #ddd; }

#upload_title {
float: none !important;
width: 130px !important;
padding: 5px 0 0 15px; }

#imageup {
height: 23px !important;
padding: 2px 10px 0 !important;
margin: 5px 15px 6px; }

#upload_attention {
display: none; }


/* *** */

#imageframe {
position: absolute;
display: block;
top: 77px;
left: 766px;
border: 1px solid #ddd !important;
width: 300px !important;
box-sizing: border-box; }


/* *** */

form[name="fileform"] >table {
height: 133px; }

form[name="fileform"] >table>tbody>tr:nth-child(-n+4) ,
form[name="fileform"] >table>tbody>tr:nth-child(7) {
display: none; }

form[name="fileform"] >table>tbody>tr:nth-child(5) {
position: absolute;
top: 10px;
left: 10px; }

#POPUPBOX >table:nth-child(7) {
position: absolute;
top: 30px;
left: -15px; }

#POPUPBOX >table:nth-child(7) input[name="filename"] {
width: 260px !important;
border: 0 !important;
opacity: 0.8; }

#POPUPBOX >table:nth-child(8) {
position: absolute;
top: 75px;
left: -35px;
width: 270px !important; }

#POPUPBOX img {
display: none; }

input[value="アップロード"] {
position: absolute;
top: 105px;
left: 15px;
height: 23px !important;
padding: 2px 10px 0 !important; }


/* *** */

form[name="tagurl"] ~ tbody>tr:nth-child(-n+4) {
display: none !important; }

form[name="tagurl"] ~ tbody>tr:nth-child(5) {
position: absolute;
top: 10px;
left: 10px; }

#POPUPBOX >table:nth-child(1) {
position: absolute;
top: 32px;
left: -15px; }

#POPUPBOX >table:nth-child(1) input[name="tagURL"] {
width: 205px !important;
height: 19px !important;
font-size: inherit !important;
padding: 2px 0 0 4px !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

#POPUPBOX >table:nth-child(2) {
position: absolute;
top: 75px;
left: -35px;
width: 270px !important; }

form[name="tagurl"] ~ tbody>tr:nth-child(7) td {
height: 104px !important; }


/* *** */

#upfile_list {
position: absolute;
overflow: hidden;
top: 226px;
left: 766px;
width: 300px;
background-color: rgba(255,255,255,0.9); }

#upfile_list>table:nth-child(2)>tbody>tr:nth-child(1)>td {
display: none !important; }

#upfile_list>table:nth-child(2)>tbody>tr:nth-child(2)>td:nth-child(1) {
display: none !important; }

#upfile_list>table:nth-child(2)>tbody>tr:nth-child(2)>td:nth-child(2) {
width: 6px !important; }

#upfile_list select {
height: 23px !important;
font-size: inherit !important;
padding: 2px 0 0 !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

#upfile_list select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }

#upfile_list input[value="削除"] {
height: 23px !important;
padding: 2px 10px 0 !important;
margin-left: -25px; }
#upload_notes {
display: none; }


/* *** */

form[name="insertform"]>table:last-of-type {
display: none; }

form[name="updateform"]>table:last-of-type {
display: none; }


/* *** */

input[value="プレビュー"] {
width: 100px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#eee 100%) !important; }

input[value="送信"] {
width: 150px;
margin-bottom: 30px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#B3E5FC 100%) !important; }


/* *** */

#wrapper>div:nth-child(2)>center:nth-child(2)>table>tbody:nth-child(1) {
position: absolute;
left: 30px;
padding-bottom: 20px; }

input[name="cgname"] {
width: 150px !important;
height: 19px !important;
padding: 2px 4px 0 !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

input[value="変更"] , input[value="カテゴリの追加"] ,
input[value="閉じる"] {
height: 23px !important;
padding: 2px 10px 0 !important; }

input[value="削除"] {
height: 23px !important;
padding: 2px 10px 0 !important; }

input[value="カテゴリの追加"] {
width: auto !important; }


/* *** */

#template , input[value="カテゴリ設定"] , .mt5 , #imageup ,
input[value="アップロード"] , input[value="削除"] ,
input[value="プレビュー"] , input[value="送信"] ,
input[value="変更"] , input[value="カテゴリの追加"] ,
input[value="閉じる"] {
border: solid 1px #aaa !important;
border-radius: 3px !important;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff inset;
box-sizing: border-box;
background: linear-gradient(to bottom, #fff 0%,#ddd 100%); }

*{ font-family: "メイリオ","Meiryo" !important; }

#wrapper {
background-color: #98c1dc; }





[PR]
by Ataron | 2017-03-21 20:53 | ブログスキンのアレンジ | Comments(0)

明石公園 2017.03.18 気楽な遅組、よかねぇかい

2017年 03月 18日
連休の人が増えない内にと公園に出かける。 しかし到着は14時前、こんな時間が普通になりかけてます。

最初に少し北岸で待つと20羽ほど集まるがマーカーがいません。 いやきっともう少し居るはずとハト様ポイントに移動すると、着いて来た彼等に加わる様に集まり始め、最後は40羽ほどになりました。 後から集まった中に、左ユビとツメ白が居ました。 後の方でピンクが来ましたが、マーカーはこの3羽だけでした。

現れるなり膝に乗って来た左ユビ。

b0174191_00273813.jpg

少し数が少ないので、左ユビやツメ白に手渡しサービスしました。

b0174191_00284082.jpg

しかし、だんだん皆んな勢いがついて、手渡しに殺到したあげく乱闘が始まりました。

b0174191_00304349.jpg

まあ、この位の数なら楽しく一緒に騒いだという気分になれます。 マギ2を見ていないので、それが気になります。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。





[PR]
by Ataron | 2017-03-18 23:55 | 鳥さんの写真 | Comments(0)

エキサイトブログ / 旧編集画面のアレンジ(2) Chrome版 - 新画像パレット

2017年 03月 18日
前回のアレンジの細部を更新しました。

◎「タイトル枠」「テンプレート選択枠」は操作時に拡大する仕様ですが、スムーズに拡大する表示に改めました。
◎本姓の左メニューの「画像容量の表示部」のみを、画像パレットの背面に配置しました。 ドロップ枠の下で、画像を投稿するとドロップ枠が着色して隠れますが、ウインドウを拡げればいつでも見る事が可能です。
◎他のメニューも設置可能ですが、誤って編集内容を霧散させるのを避けるため、あえて設置を控えています。 編集を破棄する場合は、編集しているウインドウ(タブ)自体を消します。
◎画像パレットのアップロードした画像の大きさを拡大し、その下部のコントロールは小型にアレンジしました。 画像を確認し易く、かつ体裁を良くしました。

下図の青で囲ったのが「画像容量の表示部」です。

b0174191_14292155.png

下図は編集ウインドウの全体ですが、画像パレットのデザインを更新しています。

b0174191_14294973.png



編集画面のアレンジには、Chrome と Stylist という Chrome拡張機能が必要です。 先ず Stylistを Chromeにセットし(簡単です)、それに下のスタイルシートを設定します。 その操作は、以下のリンク先を参照ください。

但し上のページで、エキサイト編集画面のURLを記入する の枠は、新編集画面の説明です。 旧編集画面の場合は、この枠に設定するURLは、
http://www.exblog.jp/myblog/entry/new/
http://www.exblog.jp/myblog/entry/edit/
になります。



以下がユーザースタイルシートです。 Stylist に以下のCSSをコピー・ペーストしてスタイル登録をします。 以下のCSSは、Chrome専用です。


/* 旧編集画面用 スタイルシート Chrome版 ver.2 */

#exHeaderWrapper {
display: none; }

#wrapper {
min-width: 940px; }

#tmpfilelist+div , #filelist+div {
display: none; }

#toUserconf , #csEnquete {
display: none; }

#wrapper>div>table {
width: 100% !important; }

#exFooterWrapper {
display: none; }

#wrapper>div>table>tbody>tr>td:first-child {
position: absolute;
left: 750px;
background: none !important; }

#wrapper>div>table>tbody>tr>td:first-child > :not(.capacity) {
display: none; }

.capacity {
margin: 80px 0px 0px 30px !important;
padding: 8px 10px;
border: 1px solid #ddd; }

#wrapper>div>table>tbody>tr>td:nth-child(2) {
width: auto !important;
display: block;
padding-left: 15px !important; }


/* *** */

#entry_header {
display: none; }

#template {
position: absolute;
top: 15px;
left: 660px;
height: 24px;
width: 90px;
padding: 4px 4px 0px !important;
overflow: hidden;
transition: 0.5s; }

#template:hover {
left: 150px;
height: auto;
width: 600px;
padding: 8px 10px 0px !important;
background: #fff !important;
z-index: 2; }

#template_names {
overflow: hidden; }

#template_names span {
display: block;
text-align: left;
margin: 0px 20px 6px;
width: 100%;
white-space: nowrap; }

span.tmp a, span.st {
font-size: medium;
text-decoration: none; }

span:not(.tmp) {
text-align: right !important; }

#template_names input {
width: 90px !important;
height: 23px !important;
margin: 0 6px; }


/* *** */

#subject {
position: absolute;
top: 15px;
padding: 0 !important; }

#subject_title {
display: none; }

#subject input {
width: 590px !important;
height: 23px;
padding: 3px 15px 0px;
font-size: medium;
border: 1px solid #ccc;
border-radius: 3px;
transition: 0.5s; }

#subject input:hover {
width: 703px !important; }

#subject input:focus {
width: 703px !important; }


/* *** */

#category {
position: absolute;
top: 55px;
padding: 0 !important; }

#category_title {
display: none; }

#CateStr select {
height: 23px;
font-size: inherit;
padding: 1px 0 0 !important;
border: 1px solid #ccc;
border-radius: 3px; }

#CateStr input[value="カテゴリ設定"] {
height: 24px !important;
padding: 2px 0 0 !important;
vertical-align: top; }

/* *** */

#tags {
position: absolute;
top: 55px;
left: 305px;
width: 448px;
padding: 0 !important; }

#tags_title {
width: 32px !important;
padding: 5px 0 0; }

#tags .tag {
width: 138px !important; }

#tags input {
width: 116px !important;
height: 19px;
font-size: inherit;
padding: 2px 0 0 4px !important;
border: 1px solid #ccc;
border-radius: 3px; }

#tags .tag a {
width: 13px !important;
height: 13px !important;
border-radius: 13px;
background-position: -5px -4px; }

#tags_attention {
display: none; }


/* *** */

#entrydate {
position: absolute;
top: 90px;
border: 1px solid #ddd;
padding: 4px 6px !important; }

#entrydate_setting select {
height: 21px !important;
background-color: #eee; }

#entryopen {
position: absolute;
top: 90px;
left: 332px;
width: 410px;
padding: 5px 0px 29px 6px!important;
border: 1px solid #ddd; }

#entryopen_title {
width: 65px !important; }

#entryopen_title >a {
display: none;}

#entrydate_setting {
margin-left: 0 !important; }

#ping_form {
position: absolute;
top: 120px;
left: 340px;
white-space: nowrap; }


/* *** */

#entrymenu {
position: absolute;
top: 180px;
width: 700px; }

#entrymenu_title {
display: none; }

#entrymenu_content {
width: auto !important; }

span#usehtml a {
border-radius: 3px; }

span#usehtml br {
display: none; }


/* *** */

#entry_menu6 {
position: relative;
left: 164px; }

#entry_menu7 {
position: relative;
left: 220px; }

#smallPallet {
position: relative;
left: 60px;
height: 20px !important; }

#skype {
position: relative;
left: 195px; }

#entry_menu11 {
position: relative;
left: -80px; }

#entry_menu12 {
position: relative;
left: -80px; }

#entry_menu13 {
position: relative;
left: -80px; }

#entry_menu14 {
position: relative;
left: -80px; }


/* *** */

#entrymenu #no_html {
padding: 2px 6px 0px 2px;
border: 1px solid #fff;
border-radius: 3px;
height: 20px; }

#entrymenu #no_html label {
vertical-align: 1px; }

#no_html input[value="プレビュー"] {
display: none; }


/* *** */

#entrymenu +table>tbody>tr>td.mid {
padding-right: 20px; }

form[name="insertform"] #entrymenu +table>tbody>tr>td.mid {
padding-bottom: 0 !important; }

form[name="insertform"]>table:first-of-type {
width: 100%; }

form[name="updateform"]>table:first-of-type {
width: 100%; }

textarea#content {
position: relative;
top: 200px;
width: 100% !important;
height: 440px !important;
font-size: medium;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }

.mt5 {
position: relative;
top: 200px;
height: 24px;
width: 80px;
padding: 3px 0 0 !important; }

.mt5 label {
vertical-align: 2px !important; }

.mt5 span.HELP {
display: none; }

#morehtml table {
width: 100%;
position: relative;
top: 200px; }

#morehtml input {
padding: 3px 8px 0px;
height: 23px;
font-size: medium;
border: 1px solid #ccc;
border-radius: 3px; }

textarea#morecontent {
width: 100% !important;
height: 440px !important;
font-size: medium;
padding: 5px 10px;
margin-bottom: 29px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }


/* *** */

form[name="insertform"]>table:last-of-type {
display: none; }

form[name="updateform"]>table:last-of-type {
display: none; }


/* *** */

#entryoption {
position: absolute;
top: 150px;
width: 733px;
height: 21px;
overflow: hidden;
margin: 0 !important;
background: none !important;
border: 1px solid #ddd; }

#entryoption_title {
display: none; }

.entryoption_menu {
margin: 3px 8px 3px 5px !important; }

.entryoption_menu input {
margin: 0 -2px 0 0 !important; }

#cdcdcd {
display: none; }


/* *** */

#upload {
display: none; }

div#upfile_list {
display: none; }

#upload_notes {
display: none; }

input[value="プレビュー"] {
width: 100px;
position: relative;
top: 180px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#eee 100%) !important; }

input[value="送信"] {
width: 150px;
position: relative;
top: 180px;
margin-bottom: 30px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#B3E5FC 100%) !important; }


/* *** */

#file_drop {
width: 162px !important;
height: 120px !important;
border: solid 4px #eee !important;
border-radius: 3px !important; }

#preview {
margin-top: 6px !important;
height: 570px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
border-radius: 3px !important; }

.image_info {
float: left;
width: 154px;
height: 126px;
padding: 0 !important;
margin: 10px 4px 0;
background: #fff;
border: 3px solid #fff !important;
overflow: hidden; }

.preview_img_top {
padding: 0 !important;
margin: 0 !important;
background: none !important;
width: 100% !important; }

.preview_img {
float: none !important;
opacity: 1 !important;
width: auto !important;
height: 104px;
border: none !important; }

.preview_img:hover {
box-sizing: border-box;
border: 3px solid #000 !important; }


/* *** */

.pos_select {
margin-top: -4px;
white-space: nowrap; }

.pos_select td:nth-child(1):before {
content: "<";
display: block;
margin: 0px 0px -18px -8px; }

.pos_select td:nth-child(3):after {
content: ">";
display: block;
margin: -15px 0px -2px 21px; }

.pos_select td:nth-child(4):after {
content: "×";
font-size: 18px;
font-weight: bold; }

.delete_icon {
float: none !important;
height: 12px;
margin: 8px -18px 0 30px !important;
opacity: 0; }

.pos_select tr:last-child {
display: none; }


/* *** */

#template , input[value="カテゴリ設定"] , .mt5 ,
input[value="プレビュー"] , input[value="送信"] {
border: solid 1px #aaa !important;
border-radius: 3px !important;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff inset;
box-sizing: border-box;
background: linear-gradient(to bottom, #fff 0%,#ddd 100%); }

*{ font-family: "メイリオ","Meiryo" !important; }

body {
background-color: #98c1dc; }


/* *** テクスチャ画像を使用する場合は、最後尾の項目を以下の形に置換えます

body { background: url(http:// ~URL~ .png); }

 ~URL~の部分は、テクスチャ用画像をアップロードし、そのURLを記入 *** */





編集画面の背景テクスチャーなどについては、前回の記事 の末尾を参照ください。



〔追記〕2017.03.30
「エモーティコン」アイコンが削除され、編集アイコン配置が崩れたため、配置コードを修正済みです。



[PR]
by Ataron | 2017-03-18 22:31 | ブログスキンのアレンジ | Comments(0)