人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

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

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

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

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

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



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


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

エキサイト旧編集画面のアレンジ(3) IE11版 - プロトタイプ_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 !important;
width: 80px !important;
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; }





by Ataron2 | 2017-03-12 00:20 | ブログ旧編集画面のアレンジ