Studio TA Subsite の案内とお知らせ

タグ:CSS・HTML ( 90 ) タグの人気記事

エキサイトブログ編集のツボ 画像を越えられないカーソルと消えるカーソル

2017年 04月 09日
ブログ編集をしていて最近気になった事は、文末の編集でカーソルが一時的に消失してしまう現象です。 通常編集を専らとするChromeユーザーは経験しているかも知れません。 IE11ではカーソル消失は無い様ですが、文末で先にカーソルを進め難い事は同様にあります。 いずれも、エキサイトブログの文書編集枠(通常編集)の特性とブラウザの仕様が絡まった問題に思えます。



今回の事象が一番良く判るのは挿入画像の前後ですが、ブロックや表等でも同様に生じます。 以下の説明はブラウザがChromeですが、IE11もほぼ同様です。


①最初は、編集中に画像を文末に中央配置で挿入したとします。

b0174191_21273796.png

上図の様な位置にカーソルがある場合、キーボードだけでは下図の様になって画像の後方に文字を書くことができません。

b0174191_21293546.png

もちろん、この場合はマウスでカーソルを画像の後方に置ければ解決します。

b0174191_21374901.png

b0174191_06272101.png



➁上記は画像が中央配置でしたが、左寄せや右寄せの場合は話が違います。 下図は、文末に挿入した画像を左寄り配置にした場合です。

b0174191_21410073.png

運よく画像の後方に何か文字や改行等が入っていた場合は、下の様に画像の側面(Html上は画像の後方)の先の部分にカーソルを進める事が可能です。

b0174191_21420505.png

しかし普通は、マウスを使ってもカーソルを画像の後方に置けません。

b0174191_21475278.png

こうなると、画像を中央配置にしてマウスで先に進めてから左寄せにするか、HTML編集で先を書く(HTMLでは確実に後方に進める事が可能です)しか無い様です。


➂最初の①の場合に、時々妙な状況に出会う事があります。

現象を確かめるには、①の状態で画像の後方にカーソルが置ける場合に、「Backspace」「Delete」で画像以降の入力を全て削除します。

b0174191_06474934.png

編集時に案外とこの様な状況にはならないのですが、この状況になると、マウス操作でもカーソルを画像の後方に置けない現象が生じます。

この場合、一般的にはHTML編集で、画像の後方に文字を書き込んで解決します。 しかし、HTML編集を開くのが面倒なら、画像配置のメニューを出して抜ける手があります。 これは以下に説明します。


④「カーソル消失」はChromeでのみ生じる様ですが、編集画面にスクロールバーが出る長さの文書の末尾に画像がある場合で、➂と同様に画像の後方に何の入力も無い状態で生じます。

下図は、➂と同様に画像以降の入力を綺麗に削除した状態で、画像の横に長いカーソルがあります。

b0174191_22001707.png

この時、マウスを使ってカーソルを置ける場所は、下図の ❶➋の場所か より手前の部分です。 また、右のスクロールバーはこれより下方が無い表示です。

b0174191_22063605.png

この状態になると、画像の後方にカーソルを置く事が出来ません。 以前の「画像周囲での文字入力」で採り上げていますが、❶➋の場所で文字を書いたり改行をするとややこしい事になります。 この状態はHTML編集で切り抜けるのが普通ですが、通常編集内で先に進む方法があります。

●先ず画像をクリックして画像位置指定のメニューを出し、無意味な様ですが位置指定「中」を押します

b0174191_22154636.png

この操作で、下図の様にスクロールバーが動き、文書の最下端が伸びた事が判ります。

b0174191_22180313.png

マウスのホイール等で文書の最下端を表示させ、下図の様にグリーンのあたりをクリックして、画像の後方にカーソルが置けないかを試します。

b0174191_22195305.png

●状況が変わらず、先の❶➋の場所にしかカーソルが置けないなら、素直にHTML編集に行った方がよさそうです。 しかしそうではなく、カーソルが消える「カーソル消失状態」になる事が良くあります。(これが生じる条件の詳細は不明です)

その場合はキーボードで「Enter」を入力すると、画像の後方にカーソルが現れます

以上の操作のコツを覚えれば、HTML編集に行く手間が省けます。「Enter」を押す時は、❶➋の場所にカーソルが無いか確かめましょう。




[PR]
by Ataron | 2017-04-09 22:45 | PC環境(ハード/ソフト) | Comments(0)

エキサイトブログ / 旧編集画面のアレンジ(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)

エキサイトブログ / 旧編集画面のアレンジ(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)

エキサイトブログ / 旧編集画面のアレンジ(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月 15日
エキサイトブログの「リッチリンク」は、現在のネット上で良く見かける「絵入りリンク」機能をブログ文書に採用したものです。 従来のリンクは文書上の文字や絵などをリンクスイッチにしていましたが、これはリンク先から「挿入画像」「記事タイトル」「記事の導入部」等を取り込んだ小型の枠をリンクのスイッチとします。 リンク先の内容を豊富に伝えて、読者が見に行くかどうかの判断をし易いものです。

この利点はニュースのページでは最大限発揮され、もはや無くてはならないものです。「iframe」という機能で他ページをインポーズするので、リッチリンクは普通のリンクよりページの読み込みが遅くなりますが、大量に設置しなければ問題になるほどの事はないでしょう。



この機能は、周囲行との間隔が気になり少しアレンジしましたが、マウスが上に来ると若干上下にスクロールする欠点がありました。 改善点のひとつはこの防止です。

もう一つは高さを抑えた事です。 下図はデフォルトデザインの例ですが、赤枠の部分にリンク先のサイト名が表示されますが、私の場合は自ブログ内リンクが多くて意味がないので、青枠の部分のみ残してスリム化しました。

b0174191_18185015.png

一方、下図の様に他サイトへのリンクは、リンク先サイト名が明示した方が、リンクを押す人には安心できて好ましい場合があります。

b0174191_18185928.png

そんな場合は、赤枠部分も表示する選択を、文書作成時にHtml編集で指定できる様にします。

アレンジはスマホ表示も考慮に入れています。
◎スマホの表示を考慮して、リッチリンクのHtmlコードを文書作成時にHtml編集画面で修正
◎PCの表示は、上記HtmlをブログスキンのCSSで上書き修正する。(これはスマホ表示には無関係)
◎PC表示の2つの型の選択は、Html編集画面でCSSを選択して指定する。
という手法です。

このアレンジを導入した場合、リッチリンクを設置するたびに、「スマホ対応の修正」「PC表示の型の指定」をHtml編集で書き込むという様式になります。 なお、このHtml編集をしなければ、デフォルト型のリッチリンクが表示されます。



 スマホ表示のアレンジ 

これはリッチリンクの「高さ」と、その下部行との隙間を調節する目的です。
下は、リッチリンク(小型)の選択で自動生成されるHtmlコードの一般形です。

<div>
<iframe
src="~~ ここはリンク先のURLが入ります ~~"
style="border:0;
display: block;
width: 100%;
height: 180px;
max-width: 520px;
margin: 10px 0;">
</iframe>
<br>
<br>
</div>

上のHtmlの赤文字と青文字の部分を下の様にHtml編集で修正します。

<div class="rlink">
<iframe
src="~~ ここはリンク先のURLが入ります ~~"
style="border:0;
display: block;
width: 100%;
height: 150px;
max-width: 520px;
margin: 0;">
</iframe>
</div>

赤文字部分の修正により、スマホ画面での上下行との間隔が適切に修正されます。 また、青文字部分は、ブログスキンのCSSによる修飾を準備するものです。
(なお、スマホ表示は、リンク先サイト名の省略はしない形です)

 PC表示のアレンジ 

ここまでは従来と同じですが、PC表示の修飾するCSSを改善をしました。
以下は、ブログスキンに登録するリッチリンク用の2項目のCSSです。

.rlink {
overflow: hidden;
width: 496px;
height: 118px;
margin: 0.72em auto 0.88em;
border: 1px solid #aaa;
border-radius: 6px; }

.rlink iframe {
width: 520px !important;
height: 180px !important;
margin: -10px 0 0 -10px !important; }

「iframe」がスクロールしない様に、その高さをスマホ対応の修正の前の「height: 180px;」に戻して指定しています。 その状態の「iframe」をマスクする「.rlink」は、以前より広い幅「 width: 496px;」以前より低い高さ「height: 118px;」を指定して、スリム化しました。 この結果、PC表示は下図の様になります。

b0174191_20044320.png

上下に小幅のスクロールをするのが、これで改善されました。



更に、エキサイト外部へのリンクの場合などでリッチリンクの高さを拡げたい場合、「height: 154px;」を追加修飾するだけで良いので、ブログスキンのCSSに1項目を追加して、文書作成時にHtml編集でその項も指定します。

高さを拡げる場合は、Htmlで全体を囲む <div class="rlink"> の部分を、下の青文字の様に複数クラス指定に変えます。

<div class="rlink rlink_ex">
<iframe
src="~~ ここはリンク先のURLが入ります ~~"
style="border:0;
display: block;
width: 100%;
height: 150px;
max-width: 520px;
margin: 0;">
</iframe>
</div>

この追加されたクラス「rlink_ex」には、以下の1項目のCSSをブログスキンに登録しておきます。

.rlink_ex {
height: 154px !important; }

複数クラス指定をしたリッチリンクは、「height」の指定だけ「.rlink_ex」の方が優先され、118px → 154px と、高さが拡がって表示されるという塩梅です。

〔追補〕
リッチリンクのアレンジの経緯や詳細は、下のリンク先に纏めています。
  リッチリンクのアレンジ / Studio TA Subsite



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

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

2017年 03月 13日
新管理画面のアレンジは細部のアレンジも煮詰まった感がありますが、旧編集画面の方はフェイドアウトの予測から手を着けずにいました。 しかし、旧編集画面は現在も使用可能なので、腕慣らしがてらアレンジをしてみました。 旧編集画面を利用されていて Chromeユーザーには、比較的簡単に導入できるアレンジ環境です。

タグ選択機能が後半の方にあったり、画像パレットに修飾が可能だったり、とにかくHtmlの構成は大きく違います。 また、編集アイコンの種類が少なく、文字カラーのアイコンが無効のままなど、エキサイトのシステムから取り残された感があります。 ただ、基本操作は問題が無く「Html不使用」は避けて、利用上の問題はなさそうです。

b0174191_04533576.png

アレンジは、新編集画面で行った基本方針を踏襲しています。 タイトル枠、本文記入枠、テンプレート選択枠はMedium(16px)、他の記入枠やラベルは基本的にSmall(13px)を使用。 編集画面をコンパクト化して、ブラウザ側の拡大で、高精細モニター上で拡大率を上げ易い様にしています。

(下はブラウザ拡大率100%時のハードコピーで、画像クリックで実寸表示されます)

b0174191_21274840.png

本文編集枠の比率が大きく無駄なスクロールが減ります。 また編集時に、ウインドウ自体のスクロールバーが出にくい様にしています。 上の状態では、編集画面には本文編集枠と画像パレットに縦スクロールバーが出ますが、マウスのスクロール操作が全てそれらに割り当てられます。 これだけで編集操作はずいぶんスムーズになります。

旧編集画面のHtml構成で、各パーツの記述の前後関係や、ブロック・テーブルの内包構造で、アレンジに限界が生じます。 そういう制限から、投稿の各種設定を本文編集画面の上部に集めました。 結果として、新編集画面のアレンジほどのスマートさはありませんが、編集・投稿上で基本機能はほぼ受け継いでいます。(トラックバック枠、みんなの投稿枠、などは省略しています)



編集画面のアレンジは、ユーザースタイルシートという機能を利用します。 このページのアレンジには、ブラウザの Google Chrome と、スタイルシートを管理する Stylist という Chrome拡張機能が必要です。 Stylistは簡単にセット可能で、それに下のスタイルシートを設定します。 その操作は、以下のリンク先を参照ください。

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



以下がユーザースタイルシートです。 Stylist に以下のCSSをコピー・ペーストしてスタイル登録をします。 以下のCSSは、ブラウザが Chrome でないと正しく動作しません。


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


#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 {
display: none; }

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

#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 20px 0px;
font-size: medium;
border: 1px solid #ccc;
border-radius: 3px; }

#subject input:focus {
width: 692px !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.submit {
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.SUBMIT {
display: none; }


/* *** */

td.mid {
padding-right: 20px; }

form[name="insertform"] 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 {
width: 100% !important;
height: 440px !important;
font-size: medium;
padding: 5px 10px;
position: relative;
top: 200px;
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; }

#morehtml span.HELP {
display: none; }

textarea#morecontent {
width: 100% !important;
height: 440px !important;
font-size: medium;
padding: 5px 10px;
margin-bottom: 24px;
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 {
height: 120px !important;
border: solid 3px #eee !important;
border-radius: 3px !important; }

#preview {
margin-top: 6px !important;
height: 570px !important;
border-radius: 3px !important; }


/* *** */

#template , #CateStr input.submit , .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; }





このユーザースタイルシートを使ったアレンジは、編集画面のスキンアレンジです。 ブラウザ表示にフィルターをかけているだけで、編集や通信作業は本質的に同じです。 Stylistのスイッチを切り替えてページをリロードすれば、簡単に普通の表示に戻ります。 データ上は安全で、エキサイト側に何の影響も与えません。



背景色などの変更について

ユーザースタイルシートを使った環境下では、編集画面の背景色を好みのものに変更するのは簡単です。 一番最後の「body」で始まる項目は画面全体の背景色の指定です。

body {
background-color: #98c1dc; }

#98c1dc」の部分のカラーコードを、好みの色のコードに書き換えて、簡単に背景色を変更出来ます。

〔注意〕
背景色の指定に限りませんが、ある要素に対しての修飾指定コードを記入しても、それが反映する場合としない場合があります。 指定した対象の要素や指定内容の間違い等もありますが、先ず疑うべきは、本来のデザインで、その要素に既に別の指定がされている場合です。 その場合は、こちらの指定の優先順位を強くする「!important」を割り込ませれば反映します。 この例では、以下の様な記述になります。

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



また、背景色を指定する代わりに、テクスチャー画像を背景に出来ます。 テクスチャー画像は「.gif」「.png」形式の軽い小画像で、これを敷き詰めて背景にします。 カラーコードの単色では表せない、肌ざわり感のある背景が可能です。

以下は、先の「body」の項目を、テクスチャー画像を背景にした形に書き換えた例です。

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

太字の部分は、ネット上に置かれたテクスチャー画像のURLです。 これは、エキサイトの編集画面の背景に使われているテクスチャーです。 自分でアップロードしたオリジナルのテクスチャー画像も、同様にして背景に設定可能です。

下図はこのテクスチャー画像を背景に設定した状態です。 大人しいテクスチャーですが、上半分の設定の区分けの細線がほぼ同色なので、見わけが付かなくなっています。

b0174191_22134426.png



「body」のひとつ上の項目は、ページ上で使用されるフォントを指定するもので、小さなラベルや本文編集枠のフォントまで、ほぼ全てがここの指定で入れ替わります。 既定は、下の太字の部分で「メイリオ」を指定していますが、この項を書き換えれば別フォントを指定できます。 文書全体にわたるフォント指定は、普通は元から何等かの指定がされているので、この場合も「!important」を入れたコードで変更しています。

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



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




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

エキサイト編集画面 ペースト時に無意味なタグ が付加される件

2017年 03月 10日
エキサイト編集画面の「通常編集」で文書を作成して「HTML編集」を開くと、自動的に生成された色々なタグを目にします。 これは、Html生成の編集援助機能がタグを書き込んだ結果で、タグはブログ文面をネット上に表わすために不可欠なものです。

PCブラウザで Google Chrome を利用している場合は、このタグの中で「<span style="font-size: 13px;">」というフォントサイズ指定のタグが、場合によっては多数が書き込まれているかも知れません。(IE11ではこの現象がありません)

これは、同じ「通常編集」の画面内でコピー/ペーストを行った場合などで発生します。 このコードの生成で、ブログの文書の表示や構成に、本質的な問題はありません。 ただ「無意味で余計なコード」が書き込まれて、Htmlを読み難くします。 一般の文書では余り気にならないかも知れませんが、英文やコード記述をしている場合、これはけっこう目障りで邪魔なものです。

以下は、この不要コードが書き込まれてしまう編集操作の2例です。

b0174191_09025090.png
b0174191_09025551.png

この問題に関しては、ブログ編集画面のアレンジを始めた当初に気付き、以下に纏めています。

上の記事の時点で、「編集画面」(textarea)の動作を調べ、問題を一旦は解消出来たのですが、最近に再びこの問題が再現しているのに気付きました。 私の場合は編集画面のアレンジをしているので「<span style="font-size: medium;">」のタグが記入されます。

以前は編集画面のアレンジの関連を認めたので、ユーザースタイルシートによるアレンジをOFFにして調べると、今回は以前とは状況が異なります。 アレンジしない本来の編集画面でも「<span style="font-size: 13px;">」が生成され、これを止める根本的な方法は見つかりませんでした。

このコードが再び入り始めた時期を調べると、今年の2月中旬あたりの様です。 それ以前の記事にコード混入がなく、考えられる原因は、エキサイトのシステム変更、あるいはChromeのバージョンアップですが、どちらにせよ従わざるを得ない問題の様です。



〔Chrome 使用の場合の対策〕

Chrome 使用のPC環境で、この余分なコードの追加を回避する方法は、限られています。
ひとつは「HTML編集」の画面で操作する 方法で、ペースト操作では原則的な一番手堅い手段です。 一方「通常編集」の画面を主に使っている場合は、「プレーンテキストとして貼り付ける」のが簡単です。 この機能は、すでに2016年の段階でChromeに搭載されていた様です。

● Textareaにペーストする際に「Ctrl+Shift+V」のショートカットでペーストします。
または、下の様に右クリックメニューからも可能です。

b0174191_17333747.png

この操作は、ブラウザ上の他ページから、テキストをコビー/ペーストする場合にも有効で、ショートカットキーを覚えておいて損はないでしょう。



〔他のブラウザ使用の場合〕

IE11ではこの様なタプの追加は全くなく、エキサイトのシステムはIEを前提のものという気がします。 しかし、Edgeでは、「<b></b><i></i><u></u><sub></sub><sup></sup><strike></strike>」という、更に意味不明なタグがコピー/ペースト時に追加されます。 Edgeには、プレーンテキストのペースト機能は無く、「HTML編集」を使うか、一旦「メモ帳」にペーストして再びコピー/ペーストするしかなさそうです。


[PR]
by Ataron | 2017-03-10 18:44 | PC環境(ハード/ソフト) | Comments(2)

編集画面をアレンジする(26)/ エキサイトブログ トラックバック禁止の標準化に対応

2017年 03月 05日
トラックバックはエキサイトブログ上では微妙な機能になっていて、おそらく利用するユーザーも少ないのではないかと思います。 そしてその機能の性質上、スパムの投稿先としての弊害が目立つ結果となり、今年の1月末についにトラックバック禁止の標準化(デフォルト設定とする)が実施されました。

この流れに鑑みて、私も「トラックバック」の設定を「トラックバック禁止」に変更しました。
ところがこの結果、「この投稿に対して」の枠内から自動的に「トラックバック不可」の選択ボタンが消えてしまいました。(下図は本来の編集画面です)

b0174191_21581962.png

本来は6項目が5項目に減ったため、これらのスイッチを一列にアコーディオン化して並べていたアレンジの順位が変化。 結果として、2番目の「自動リンク(レシピ)」を削っていたのが、「タイムラインに投稿」が削られてしまったのです。

これはスイッチの何番目かを削る方式の弱点です。「トラックバック」を禁止にする場合もしない場合も通用するアレンジとするには、「削らない」かしかありません。 そこで、今回のエキサイトの方針から「トラックバック不可」ボタンが無い方を標準と考えて、5項目はウインドウ幅最小でも必ず表示、6項目の場合は少しウインドウ幅を拡げれば使える、というボタンの幅設定としました。

b0174191_22521349.png

従来のアレンジは、以下のリンク先の内容で、1列アイコンタイプと2列アイコンタイプで異なったボタン幅設定でしたが、今回はどちらも同じ幅設定になります。

関係する項目のコードは以下で、更新対象の各バージョンの基本CSSを更新しました。

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

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

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




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

編集画面をアレンジする(25)/ エキサイトブログ 自動保存表示のマイナーアレンジ

2017年 03月 04日
編集アイコンの右端に出る「自動保存」の表示は、「新しく編集を開始した編集ウインドウ」と「下書き保存をもう一度開いた編集ウインドウ」の場合にのみ、一定の条件で表示されます。 有効な機能で、当然アレンジ後の編集画面にも表示していますが、文字色を青とした程度で少し目立ち難い状態でした。

何度か改善案を考えていたのですが、今回、アイコンのデザインに準じた角の丸い枠線で、白い背景にする事に落ち着きました。

b0174191_19005774.png

今までの自動保存の表示パーツのCSSは

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

でした。 これを以下の様に改めています。
(以下はChrome版で、IE版は !important 指定を各プロパティに追記しています)

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

「margin 」「padding」「height」「width」「text-align」は、文字の枠内配置と枠自体の大きさ、更にアイコンパレット内での枠の配置を再調整したもの。 最後の3行は枠背景と角丸の枠線の指定です。 また、上記は1列アイコンの場合で、2列アイコンでは「margin: 29px 0px 0px;」となります。

下図の左側は「自動保存」が行われない場合、右側は保存された場合です。 枠幅が変化し「自動保存」の有無が目立つデザインにしています。

b0174191_19470365.gif

以上のアレンジを以下のバージョンに適応し、その基本CSSを更新しました。
完成度の高いバージョンの Chrome版(11)(18)、IE版(15)(19)




[PR]
by Ataron | 2017-03-04 22:57 | Comments(0)