Studio TA Subsite の案内とお知らせ

タグ:エキサイトブログ ( 140 ) タグの人気記事

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

2017年 04月 23日
旧編集画面 の「Chrome版 - ブラシュアップ ver.3」をマイナーアレンジしました。

「ブラシュアップ ver.4」の改善点は、
●無効なエモーティコン関係の修飾を削除整理しました。
●新編集画面のアイコンデザインを流用した、オリジナルの編集アイコンに改めました。
(注意)オリジナル編集アイコンの登録/指定をしないと、デフォルトアイコンが崩れて表示され逆効果ですから、この版を使う意味がありません。



デフォルトの編集アイコンの背景画像
b0174191_19421155.png

オリジナルの編集アイコンの背景画像
b0174191_19435142.png

アイコン枠はCSSの「border-radius」で描画しているので、オリジナルの背景画像には枠線がありません。 この背景画像をアップロードし、そのURLを調べてスタイルシート末尾の「 /* 編集アイコン背景画像の指定 */ 」の項のURL部(太字で一般形で表示しています)にペーストすることで、オリジナルアイコンが表示されます。 下図は、オリジナルアイコンの様子です。

b0174191_20510298.png




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



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


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

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

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

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

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

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

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

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


/* *** */

/* 新パレットが下に表示されるバグ回避 */
#colorPallet {
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; }


/* 編集アイコン背景画像の指定 */

#entry_menu1 , #entry_menu2 , #entry_menu3 , #entry_menu4 ,
#entry_menu5 , #entry_menu6 , #entry_menu7 , #smallPallet ,
#entry_menu11 , #entry_menu12 , #entry_menu13 , #entry_menu14 ,
#entry_menu15 , #entry_menu16 {
background-image: url("http://pds.exblog.jp/pds/~~~.png") !important; }




◎「 /* 背景色指定 */ 」のカラーコード「#98d1dc」を変更すれば、編集画面の配色を好みにアレンジ可能です。
◎「 /* 編集アイコン背景画像の指定 */ 」の「http://pds.exblog.jp/pds/~~~.png」の部分に、アップロードしたオリジナルの編集アイコン背景画像のURLをペーストすると、オリジナルアイコンが表示されます。




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

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

2017年 04月 23日
旧編集画面に「エモーティコン」(絵文字/スカイプ文字)が復活しないまま、1ヵ月が経ちました。 これは旧編集画面からの移住をうながすための方策でしょうか。 システム改変が一段落した様なので、IE版にマイナーアレンジを加えました。

「ブラシュアップ ver.3」の改善点は以下です。
●無効なエモーティコン関係の修飾を削除整理しました。
●新編集画面のアイコンデザインを流用した、オリジナルの編集アイコンに改めました。
(注意)オリジナル編集アイコンの登録/指定をしないと、デフォルトアイコンが崩れて表示され逆効果ですから、この版を使う意味がありません。



デフォルトの編集アイコンの背景画像
b0174191_19421155.png

オリジナルの編集アイコンの背景画像
b0174191_19435142.png

アイコン枠はCSSの「border-radius」で描画しているので、オリジナルの背景画像には枠線がありません。 この背景画像をアップロードし、そのURLを調べてスタイルシート末尾の「 /* 編集アイコン背景画像の指定 */ 」の項のURL部(太字で一般形で表示しています)にペーストすることで、オリジナルアイコンが表示されます。 下図は、オリジナルアイコンの様子です。

b0174191_19513512.png

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

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


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

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

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

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

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

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

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

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


/* *** */

/* 新パレットが下に表示されるバグ回避 */
#colorPallet {
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); }


/* *** */

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


/* 背景色オプション */
/*
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: red !important; }
*/

/* 編集アイコン背景画像の指定 */

#entry_menu1 , #entry_menu2 , #entry_menu3 , #entry_menu4 ,
#entry_menu5 , #entry_menu6 , #entry_menu7 , #smallPallet ,
#entry_menu11 , #entry_menu12 , #entry_menu13 , #entry_menu14 ,
#entry_menu15 , #entry_menu16 {
background-image: url("http://pds.exblog.jp/pds/1/~~~.png") !important; }





◎背景色を好みの色に変更するには、「 /* 背景色オプション */ 」の項の4行を囲む「 /*」「*/」を消し、「red」を、指定したい色のカラーコード「#nnnnnn」等に置き換えます。

◎オリジナルのアイコン背景画像をアップロードし、そのURLを調べて、最後の「 /* 編集アイコン背景画像の指定 */ 」の項のURL指定部と置き換えれば、オリジナルアイコンを表示できます。




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

編集画面をアレンジする(30)/ エキサイトブログ 編集アイコンのグラフィックアレンジ

2017年 04月 23日
新世代「More拡張」に相当する(27)(28)(29)の版は、編集アイコンの輪郭を明瞭にするコードを盛り込んでいます。(このテクニックは(13)重箱の隅 番外編 のアレンジを標準アレンジとしたものです)

「More拡張」以前では、コード行が増えるのを嫌って編集アイコンの「配置」のみ標準アレンジに採り入れていました。 しかし、私自身の使用の実感として、ユーザースタイルシートのコードの増加が編集画面の表示速度や動作に影響を及ぼす印象はありません。 この経験から、編集アイコンの背景画像の「位置指定」も標準アレンジに追加しました。 それが「 編集アイコンの輪郭をくっきりさせる精密なアイコン指定」です。



スタイルシートの後半の「 /* 編集アイコン配置・デザイン */ 」の項目には、ずらりと編集アイコンの修飾項が並んでいます。 例えば最初の項は「 B:強調(太字)」を指定するアイコンの修飾項です。

Chrome版のコードでは、

#exbtn_bold {
top: initial;
bottom: 5px;
left: 223px;
background-position: -1px -1px; }

この部分を例に、どの様なアレンジをしたかを以下に説明します。

①編集アイコンの「配置」のアレンジ

「top: initial;」は、余り使わない指定ですが、ここでは不可欠です。
元のアイコン配置は「top」指定で、これを「bottom」指定に改めたかったのです。 しかし、単に「bottom: 5px;」とすると「top」指定が打ち消されず、bottom指定は無効になります。 では「top: 0;」等とすると、今度は「0」値が優先され、やはりbottom指定が無効なままです。 この場合は「top」指定が無かった事にする=リセットする記述が必要で、「top: initial;」とする以外にないのです。

話が外れましたが、「top: initial;」「bottom: 5px;」「left: 223px;」の3行で、編集アイコンの「配置」を指定しています。 これらの値を操作すれば、外枠の編集パネル内で編集アイコンの位置を自由に変更出来ます。

➁編集アイコンの背景画像の「位置指定」のアレンジ

最後の行「background-position: -1px -1px;」の指定は、編集アイコンの背景画像の「位置指定」で、これは「More拡張」で初めて採り入れました。

編集アイコンの絵は、実は全てのアイコンを網羅した1つの画像の一部です。 その全体は、下図の様に編集パネルの背景まで合体しています。

b0174191_10375232.gif

全てのアイコンはこの画像を背景として共用していて、その「どの部分を見せるか」だけが異なります。 アイコン画像を別個に読ませると通信速度の影響を受けるため、これはそれを節約する手法です。 良く見ると機能が無くなり表示されない旧いアイコンも残っています。 また、赤枠で囲んだ「リンク」の新アイコンは、リッチリンクの導入時に描き加えられました。

B:強調(太字)」のアイコンの絵は「background-position: -1px -1px;」つまり上の背景画像の左上隅から「右へ1px」「下へ1px」の場所を基点として、背景に表示するという指定です。 アイコンの枠線内部は「21×21px」で、背景の他の部分は隠れてしまうという塩梅です。

本来のエキサイトの編集アイコンは、アイコンの輪郭も画像です。 アイコン背景画像は23×23pixのサイズで、枠線分入みです。 編集アイコンの輪郭を明瞭にするアレンジでは、アイコンに「border-radius」の枠線指定を採り入れています。 そして画像の枠線は表示範囲から隠し、アイコン背景画像は21×21pixのみを利用します。

b0174191_11352657.png

細かな話ですが、この際に上の〇で囲んだ隅の1pixは、角丸の枠線に普通は隠れます。(枠線が角丸でないと隠れません)

さて、この「21×21pix」の範囲をアイコン絵に利用するので、全てのアイコンで背景画像の位置指定を縦横1pixずつシフトさせる必要があります。 先の「background-position: -1px -1px;」の指定は、既にアレンジした値で、エキサイトの本来は「background-position: 0px 0px;」です。 この様な位置指定のシフトを、全てのアイコンに関して書き換えています。

「More拡張」版の「編集アイコンの輪郭をくっきりさせる精密なアイコン指定」というのは、以上の様に「アイコン枠の自前の描画」と「アイコン背景画像の位置指定のシフト」で実現しています。



オリジナルの編集アイコンを使う

「More拡張」版は、エキサイトデフォルトの「アイコンの絵」を利用しています。 そのURLは以下です。

http://image.excite.co.jp/jp/exblog/userconf/images/entry/ico_exeditor.gif

これをブラウザのURL枠にペーストすれば、直接表示させて「アイコンの絵」をダウンロード出来ます。
通常、編集アイコンはこのデザインで充分ですが、オリジナルの編集アイコンをデザインするのも、大いにありです。 私は、特に「自動改行」の有無を目立たせたくて「アイコンの絵」を一部改造しています。

a0349576_13111152.png

▪「自動改行」「リンク」「取り消し」「やり直し」「文字サイズ」などのデザインを変えています。
▪ アイコンの枠線を全て消しています。
▪ ファイル形式は元と同じ「.gif」が無難ですが「.png」も可能です。

〔注意〕IE11は、ユーザースタイルシートの動作仕様が「気難しい」傾向があり、アイコンが全て「B」になる不具合に悩まされました。 背景画像を「.png」形式で作成した場合、背景画像を編集するアプリを選び、PhotoShopの「.png」ならOKという事がありました。 セレクタ指定も、この項に関しては下記の「.panelBtn」の形でないと正常に働きません。

オリジナルデザインの「アイコンの絵」を利用手順は、テクスチャー画像を利用するのと同じです。
先ず「オリジナルのアイコンの絵」をブログに投稿する画像と同様にアップロードします。 アップロード後の「アイコンの絵」を右クリックして、Chromeなら「リンクのアドレスをコピー」しメモ帳にペーストすれば、アップロード後のアドレスが判ります。 IE11では「プロパティ」で知ることが出来ます。

b0174191_14180415.png

このアドレスを以下のオプションコードの「URL」の青い文字の部分にペーストした上で、基本のスタイルシートの最後に追記すれば、オリジナルのアイコンが表示される様になります。

●アイコンの絵(オリジナル)の指定オプション

Chrome版
.panelBtn {
background: url("http://pds.exblog.jp/pds/~~~ ~~~.gif") no-repeat; }

IE11版
.panelBtn {
background: url("http://pds.exblog.jp/pds/~~~ ~~~.gif") no-repeat !important; }




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

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

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)

エキサイトブログ / 旧編集画面のアレンジ(8) Chrome版 - ライフログ等の整形

2017年 04月 05日
ニッチな話ですが、旧編集画面のアイコンで呼び出される小ウインドウで、「ライフログ」はデザイン崩れがあります。

b0174191_22060956.png

記入枠の大きさがまちまちで、ウインドウ幅が小さいと上段が更に崩れます。 この崩れを整形し、ついでに編集画面の背景色を適応しました。 下図は新しいスタイルを適応した状態です。

b0174191_22562730.png

この小ウインドウは、編集画面とは別のURLを引いて開いているので、URLが異なります。 従って、この「(8)Chrome版 - ライフログ等の整形」は、Stylist上で編集画面のスタイル登録とは別に、ひとつのスタイルとして登録します。

この画面のコードは全体のベース「body」に背景色を指定しているので、他の「地図」「ジャンル」の小ウインドウに適応させると、それらの背景色も同じに出来ます。(デブォルトは白) 下図は Stylist登録画面で、それらのアイコンが開くURLも併せて4行のURLを登録しています。

b0174191_22061825.png


登録した指定URLは以下です。
  「prefix」=「 http://www.exblog.jp/blog/lifelog
  「prefix」=「 http://www.exblog.jp/myblog/lifelog/
  「prefix」=「 http://www.exblog.jp/myblog/entry/map/
  「prefix」=「 http://www.exblog.jp/myblog/entry/entry_genre



Chrome版 - ライフログ等の整形と背景色用 パッチ


/* ライフログ等の整形と背景色 パッチ 2017.04.05 */

select[onchange="chgCategory(this)"] {
height: 26px; }

select[onchange="chgCategory(this)"]+input[type="text"] {
height: 20px; }

form[name="LifelogFrm"]>select[name="category"] {
height: 26px; }

form[action="/myblog/lifelog/"] {
min-width: 480px; }


/* 背景色指定 */

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



/* 注意 Stylist の URL指定は、
「prefix」=「 http://www.exblog.jp/blog/lifelog 」
「prefix」=「 http://www.exblog.jp/myblog/lifelog/ 」
「prefix」=「 http://www.exblog.jp/myblog/entry/map/ 」
「prefix」=「 http://www.exblog.jp/myblog/entry/entry_genre 」
の4行を指定 */





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

エキサイトブログ / 旧編集画面のアレンジ(7) Chrome版 - 旧テンプレート編集 専用

2017年 04月 05日
旧テンプレート編集画面のアレンジは対象外でした。 IE11版の旧編集画面アレンジは、ページ固有のセレクタ指定を駆使して他ページへの誤適応を防ぎ、旧テンプレート編集画面には背景色以外の影響はありません。 この条件下で、同時に旧テンプレート編集画面にも適当なアレンジを編むのは非常に困難です。

一方、Chrome版の場合は対象URLを指定出来るので、旧テンプレート編集画面も独立してアレンジ可能です。 ただ、旧版は固有IDの指定が少なく構成も整理が良くない様で、簡単なアレンジに留めています。 旧版でテンプレート編集も頻繁に行う場合は、Stylistに登録しておくと良いと思います。



下図は、旧テンプレート編集画面をアレンジした状態です。 文書編集枠などのフォントを大きくし、余計な表示は抑えているので、少しは見易くなっていますが、レイアウトは元と余り変わりません。 編集枠は縦幅のみ可変、横幅は固定です。

b0174191_19441474.png

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

「(6)Chrome版 - ブラシュアップ」等の旧編集画面のスタイルを設定するURLは、
  「prefix」=「 http://www.exblog.jp/myblog/entry/new/
  「prefix」=「 http://www.exblog.jp/myblog/entry/edit/
です。 これは旧テンプレート編集画面を避けた指定です。

そして、この「(7)Chrome版 - 旧テンプレート編集 専用」は、全く別個にスタイル登録します。
そのURLの指定は、
  「prefix」=「 http://www.exblog.jp/myblog/entry/template/
でなければなりません。



Chrome版 - 旧テンプレート編集 専用 スタイルシート


/* Chrome版 旧テンプレート編集 専用 2017.04.05 */

#exHeaderWrapper {
display: none; }

#exFooterWrapper {
display: none; }

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

#toUserconf , #csEnquete {
display: none; }


/* *** */

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

iframe#filelist~table>tbody>tr>td:nth-child(1) {
display: none; }

iframe#filelist~table>tbody>tr>td:nth-child(2) {
display: none; }

iframe#filelist~table>tbody>tr>td:nth-child(3) { /* 編集画面ベース 中央部 */
position: absolute;
width: auto !important;
display: block;
padding-left: 15px !important; }

iframe#filelist~table>tbody>tr>td:nth-child(4) {
display: none; }


/* *** */

#templist li {
display: block !important;
margin: 10px 0 0px 20px !important;
font-size: medium; }


/* *** */

form[name="tempform"]>table:nth-of-type(1) table tr:nth-child(1) {
height: 48px !important; }

form[name="tempform"]>table:nth-of-type(1) table td[align="left"] {
width: 70px; }

form[name="tempform"]>table:nth-of-type(1) table input {
height: 23px;
font-size: inherit;
padding: 1px 0 0 !important;
border: 1px solid #ccc;
border-radius: 3px; }

input[name="templatename"] {
font-size: medium !important; }

input[name="subject"] {
font-size: medium !important; }


/* *** */

#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 {
width: 580px;
padding: 0 !important; }

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

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

#tags_content>.tag>input {
width: 150px !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: 156px"] {
margin-bottom: 30px; } /* タグリストの下端 */


/* 文書編集部 */

#contview { /* 編集アイコン */
width: 400px; }

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


/* *** */

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


/* *** */

textarea#content {
position: relative;
width: 100% !important;
min-height: 250px !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>input {
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;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }


/* *** */

form[name="tempform"]>table:last-of-type { /* プレビュー・登録枠 */
margin: 20px 0 20px !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; }


/* *** */

input[value="参照"]#imageup {
padding: 4px 6px 0px;
margin-bottom: 4px; }


/* *** */

input[value="削除"] ,
input[value="カテゴリ設定"] ,
input[value="参照"] ,
.mt5 ,
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; }


/* 背景色指定 */

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



/* 注意 Stylist の URL指定は、
「prefix」=「 http://www.exblog.jp/myblog/entry/template/ 」
の1行を指定 */





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

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

2017年 04月 05日
「More専用」は Chromeの仕様で「textarea」のサイズ拡張を利用しましたが、IEにはその機能がありません。 この理由から異なるアレンジアプローチをしたIE11版の「More拡張」は、予想以上に操作性の良い仕上がりでした。 Chrome版「More拡張」はそれをChrome環境に移植したものです。 この版はブラシュアップ版の最新版として推奨できるものです。

各編集枠の縦幅は固定で「基本の編集枠」の操作は従来と同じです。 しかし「Moreの編集枠」は「基本の編集枠」の上に被さって表示され、More編集の操作性が改善されています。



下図はMore編集中のハードコピーです。

b0174191_15001766.png

「Moreの編集枠」の上段に、1行だけ「基本の編集枠」が露出しています。 下図は、「基本」と「More」の編集枠を切り替える様子を示したものです。

b0174191_15025955.png

左側は「基本の編集枠」で「More」ボタンを押してMore編集をしている状態です。 上段の赤枠内の「基本の編集枠」をクリックすると、「基本の編集枠」が表に出て右側の状態になります。 これは「Moreの編集枠」が隠れただけでMore編集は維持しています。

右側の状態では「基本の編集枠」の編集が可能です。 編集アイコンを使った編集操作、画像のドロップや挿入が通常通り可能ですが、青枠以外の部分をクリックする操作で、左側のMore編集に戻ります。
(通常編集⇔HTML編集の切替え、画像を×で消す操作、リンク、ライフログ、YouTube、ジャンルの操作を×で終了した時なども、More編集に戻ります)

More編集を開始した後、「基本の編集枠」の状態から「Moreの編集枠」に戻りたい時は、編集画面の背景色の部分や、通常編集、HTML編集のボタンをクリックするのが良いでしょう。

以上の様に、どの編集枠にも表示を切り替える事が出来、それぞれの編集が可能です。 また、「not more」ボタンでMore編集を解除できるのは本来の機能通りです。

この「More拡張」の特徴を整理すると、

● 従来の「基本の編集」と「Moreの編集」が殆ど同じ操作性を持ち、従来のMore編集の欠点を改善。
●「基本の編集枠」「Moreの編集枠」はともに、縦幅は固定・横幅は全体のウインドウ幅に従って可変。
●「テンプレート」ボタンは画像パレットの下にあり、また「自動保存の表示」は編集アイコンの右端に一部隠れる場合がありますが、いずれもウインドウを少し拡げると表示します。
● 編集アイコンの輪郭をくっきりさせる、精密なアイコン指定を盛り込んでいます。
● 標準2行アイコン版以外では省略していた「装飾解除」「ジャンル」アイコンを追加しました。



この編集画面のアレンジは「Chrome」と拡張機能「Stylist」を利用して実現します。「Stylist」の導入と設定方法は以下のリンク先に説明しています。

Stylistにこのスタイルシートを登録する際のURL指定(上記の➁枠の部分)は、
  「prefix」=「 http://userconf.exblog.jp/entry/
の1行を指定します。

以下は Stylistに登録するユーザースタイルシートです。

Chrome版-ブラッシュアップ More拡張



/* Chrome版-ブラッシュアップ More拡張 2017.04.08 */

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

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

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

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

header#exHeaderWrapper {
display: none; }

.ad728 {
display: none; }

#wrapperInner {
padding: 0px; }

footer#exFooterWrapper {
display: none; }


/* *** */

#container.hasmenu {
margin: 0;
float: none; }

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

.hasmenu #contents {
margin: 0;
padding: 0px 15px 0px 15px; /* 編集枠左余裕 画像パレット 右余裕 */
background: #fbfbfb;
border: none;
border-radius: 0; }

#announceList {
display: none; }

header.boxHead {
display: none; }


/* タイトル部 */

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

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

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

/* *** */

.alert.alert-red {
position: absolute;
width: 300px;
padding: 2px 14px 0;
font-size: medium; }


/* *** */

#entryEditHead-new {
position: absolute;
top: 0;
padding: 0;
margin: 0;
border: none;
z-index: 2; }

#entryEditHead-new th {
display: none; }

#entryEditTitle {
position: absolute;
top: 15px;
width: 200px;
font-size: medium;
z-index: 2;
transition: 0.5s; }

#entryEditTitle:hover {
width: 792px; }

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

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

#entryEditTitle .alert {
top: 0px;
left: 208px;
z-index: -1; }

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


/* *** */

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

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

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

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

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

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

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

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

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

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

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

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

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


/* 編集部wrap構成 */

#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

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

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

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

#editorSwither {
position: absolute;
top: 2px;
line-height: 23px;
padding: 0;
z-index: 3; }

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

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

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

#_panel {
height: 32px;
border: none;
background: none;
z-index: 2; }

#new_icon {
display: none !important; }


/* 編集部 */

#_entryContent , #_moreEntryContent ,
#entryContent , #moreEntryContent { /* 文書編集枠基本設定*/
background: #fbfbfb;
line-height: 150%;
margin: 0;
font-size: medium;
border-radius: 3px; }

#_entryContent , #entryContent {
height: 580px !important; }

#_entryContent:focus , #entryContent:focus {
position: relative;
z-index: 2; }

#_moreEntryContent , #moreEntryContent {
height: 500px !important; }


img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

img.IMAGE_MID {
margin: 0.22em 0em 0.38em 0em !important; }

#entryEditWrap .alert {
top: 95px;
left: 450px;
z-index: 3; }

#entryMoreText .alert {
top: 45px;
left: 435px;
z-index: 3; }


/* More部 */

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

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

#notmore.w100 {
height: 28px;
width: 74px;
background: linear-gradient(to bottom, #FFF9C4 0%,#FFD54F 100%);
margin: 15px 0px 10px; }

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

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

#entryMoreArea {
position: relative;
margin: -591px 0 0;
padding-top: 8px;
z-index: 0; }

input#moreEntrySubject {
font-size: medium;
height: 28px;
padding: 3px 10px 0px;
background: #f1f6f9; }

#entryMoreText {
margin: 2px 0 0; }


/* 下部整理 1 */

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

#entryOptions:hover {
width: 112%; }

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

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

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

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

#entryTrackback {
display: none; }


/* 画像パレット */

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

#entryEditIframe {
position: absolute;
overflow: hidden;
right: 2px;
width: 215px; /* 画像パレット 右余裕*/
z-index: 2; }

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


/* 下部整理2 */

#blog2media {
display: none; }

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

#entryOptionsPstdate:hover {
width: 100%; }

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

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

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


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

#entryOptionsPpenflag:hover {
width: 100%; }

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

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

#entrySubmitBtm .btn {
height: 28px; }

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

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

#menu {
display: none; }

#sideRakutenMW {
display: none; }

#exFooterWrapper {
display: none; }


/* 編集アイコン配置・デザイン */

#exbtn_bold {
top: initial;
bottom: 5px;
left: 223px;
background-position: -1px -1px; }

#exbtn_italic {
top: initial;
bottom: 5px;
left: 301px;
background-position: -26px -1px; }

#exbtn_underline {
top: initial;
bottom: 5px;
left: 249px;
background-position: -51px -1px; }

#exbtn_strikethrough {
top: initial;
bottom: 5px;
left: 275px;
background-position: -76px -1px; }

#exbtn_link {
top: initial;
bottom: 5px;
left: 549px;
background-position: -251px -27px; }

#exbtn_size1 {
top: initial;
bottom: 5px;
left: 327px;
background-position: -126px -1px; }

#exbtn_size2 {
top: initial;
bottom: 32px;
left: 327px;
background-position: -151px -1px; }

#exbtn_size3 {
top: initial;
bottom: 5px;
left: 353px;
background-position: -176px -1px; }

#exbtn_size4 {
top: initial;
bottom: 32px;
left: 353px;
background-position: -201px -1px; }

#exbtn_fontcolor {
top: initial;
bottom: 5px;
left: 379px;
background-position: -226px -1px; }

#exbtn_blockquote {
top: initial;
bottom: 32px;
left: 457px;
background-position: -376px -1px; }

#exbtn_left {
top: initial;
bottom: 32px;
left: 392px;
background-position: -276px -1px; }

#exbtn_center {
top: initial;
bottom: 5px;
left: 405px;
background-position: -301px -1px; }

#exbtn_right {
top: initial;
bottom: 32px;
left: 418px;
background-position: -326px -1px; }

#exbtn_ol {
top: initial;
bottom: 32px;
left: 249px;
background-position: -426px -1px; }

#exbtn_ul {
top: initial;
bottom: 32px;
left: 223px;
background-position: -401px -1px; }

#exbtn_indent {
top: initial;
bottom: 32px;
left: 275px;
background-position: -451px -1px;}

#exbtn_outdent {
top: initial;
bottom: 32px;
left: 301px;
background-position: -476px -1px; }

#exbtn_hr {
top: initial;
bottom: 5px;
left: 431px;
background-position: -351px -1px; }

#exbtn_emoji {
top: initial;
bottom: 5px;
left: 653px;
background-position: -101px -1px; }

#exbtn_youtube {
top: initial;
bottom: 5px;
left: 627px;
background-position: -676px -1px; }

#exbtn_map {
top: initial;
bottom: 5px;
left: 601px;
background-position: -626px -1px; }

#exbtn_genre {
top: initial;
bottom: 5px;
left: 679px;
background-position: -576px -1px; }

#exbtn_amazon {
top: initial;
bottom: 5px;
left: 575px;
background-position: -601px -1px; }

#exbtn_removeformat {
top: initial;
bottom: 5px;
left: 464px;
background-position: -551px -1px; }

#exbtn_removeformat.disabledBtn {
background-position: -551px -27px; }

#exbtn_undo {
top: initial;
bottom: 5px;
left: 490px;
background-position: -501px -1px; }

#exbtn_undo.disabledBtn {
background-position: -501px -27px; }

#exbtn_redo {
top: initial;
bottom: 5px;
left: 516px;
background-position: -526px -1px; }

#exbtn_redo.disabledBtn {
background-position: -526px -27px; }

#exbtn_autoeol {
top: initial;
bottom: 5px;
left: 190px;
background-position: -701px -1px; }

#exbtn_autoeol.disabledBtn {
background-position: -701px -27px; }

#exbtn_autoeol.activeBtn {
background-position: -701px -131px; }


#exbtn_status {
position: absolute;
bottom: 5px;
right: 0;
margin: 0;
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; }

#_panel .panelBtn { /* 編集アイコンの枠デザイン */
width: 21px;
height: 21px;
border: 1px solid #aaa; /* 編集アイコンの枠線色 */
border-radius: 3px;
z-index: 1; }


#entryEditTags span.tags a {
border-radius: 0 3px 3px 0; } /* タグボタンの枠デザイン */


/* 背景色デザイン */

body , .hasmenu #contents , #entryMoreArea ,
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover {
background-color: #a4c1ce; !important; } /* 背景色 */

/* 2行アイコン版オプション */
/*
#_panel:hover {
height: 60px;
top: -28px;
margin: 0px 0px -28px; }
*/






編集ウインドウの背景色は、末尾の「背景色デザイン」のカラーコードを変更して好みにアレンジ可能です。

下は、背景色の代わりに「テクスチャー画像」を利用する場合のサンプルです。 テクスチャー画像は「縦横50px程度」のpng画像を用意し、エキサイトに画像としてアップロードして、そのURLを以下の青字の部分に記入し、上記の「背景色デザイン」と置き換えます。

body , .hasmenu #contents , #entryMoreArea , 
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover {
background: url("http://pds.exblog.jp/~~~~.png") repeat; }



この「Chrome版-ブラッシュアップ More拡張」を登録して使用すると、「テンプレート編集画面」で表示崩れを生じます。 テンプレート編集を行う場合は、Stylistでスタイルシート適応を一時的にOFFとします。 また、以下の「テンプレート補正」をStylistに登録すれば、テンプレート編集画面もブログ編集画面と同じアレンジ環境で使えます。

●「テンプレート補正」の登録は、別個のスタイルとして登録とします。
● 登録の順位は、必ず上記の「Chrome版-ブラッシュアップ More拡張」の下方に置く必要があります。(下方は後から読み込まれ、優先順位が上がるため)
●「テンプレート補正」の登録で、StylistでのURL指定は
  「prefix」=「 http://userconf.exblog.jp/entry/template/ 」です。
●「テンプレート編集画面」を使わない場合は、「テンプレート補正」を登録しないでも全く問題はありません。

Chrome版 More拡張 テンプレート補正


/* Chrome版 More拡張 テンプレート補正 2017.04.08 */

#editTemplateList {
position: absolute;
top: 15px;
left: 450px;
height: 28px;
width: 580px;
padding: 0 !important;
border: none !important;
background: none; }

#editTemplateList select {
position: absolute;
left: 400px;
min-width: 10px;
width: 21px;
height: 28px;
padding: 4px 10px 0px;
font-size:13px;
box-shadow: none; }

#editTemplateList select:hover {
left: 22px;
width: 400px;
z-index: 3; }

#entryEditTmpTitle {
position: absolute;
top: 15px;
left: 810px;
z-index: 1; }

#entryEditTmpTitle :hover {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle :focus {
margin-left: -353px;
width: 375px; }

#sidemenu {
display: none; }

#entryTrackback { /* More拡張 更新分 */
display: block;
height: 0px;
margin: 68px 0 -2px !important; }






〔追記〕2017.04.07
「not more」ボタンをオレンジカラーでMore編集状態を印象付ける様に改め、周囲の設定ボタンと離しました。



〔追記〕2017.04.08
編集アイコンを全て表示する「2行アイコン」を、オプションで追加出来る様に修正しました。 主要スタイルシートの編集アイコンの配置を書き換えて実現しているので、このオプションは「2017.04.06」の版では無効です。 上記掲載の「2017.04.08」の版を使用してください。

2行アイコン版オプション
「Chrome版-ブラッシュアップ More拡張 2017.04.08」の末尾の「 /* 2行アイコン版オプション */ 」のCSSコード4行の前後を囲う「/*」「*/」を削除すると、2行アイコンを使える様になります。 下図の様に、アイコン列上をポイントするとアイコン行が2行に増えます。

b0174191_22211283.png

この機能が不要で、従来の1行アイコンとする場合は、上記の逆に「/*」「*/」で4行を囲むか、オプション行の4行全部を削除してください。




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

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

2017年 04月 04日
Chrome版のMore専用を受けて、IE11版で同質のアレンジを考えましたが、IEは基本的に textareaのリサイズに対応していません。 従って全く別のアプローチが必要でしたが、Chrome版の改装中に出て来たアイデアがIE11ですんなり実現しました。 この方式は思った以上に好結果で、IE11版 - ブラシュアップの最新版として推奨できるものです。



下図は「IE11版 - ブラシュアップ More拡張」のMore編集中の画面です。

b0174191_20115973.png

従来は「基本の編集枠」と「Moreの編集枠」は縦に並びましたが、この版では「Moreの編集枠」が「基本の編集枠」上にオーバーレイで表示されます。 2つの編集枠は瞬時に切り替えるが出来、編集ウインドウ全体の縦幅は More編集の有無にかかわらず変化しません。

More編集でない場合は従来のブラシュアップと全く同じで、ブラシュアップの最新版という意味で「More拡張」としています。 下図は「基本の編集枠」と「Moreの編集枠」の切り替えの様子です。

b0174191_20120681.png

左側は「More」ボタンを押してMore編集を行っている所です。「Moreの編集枠」の上段の赤枠の部分には、1行だけ「基本の編集枠」が露出しています。 この部分をクリックすると「基本の編集枠」が表に出て、右側の基本文の編集状態になります。 但し、More編集枠は隠れただけで、「not more」ボタンを押してMore編集を解除した状態とは異なります。

右側の「基本の編集枠」での編集は、編集アイコンの操作、画像パレットからの画像挿入が可能ですが、青枠以外の部分をクリックすると左側のMore編集の状態に切り替わります。(通常編集⇔HTML編集の切り替え操作、画像を×で削除する操作、リンク、ライフログ、地図、YouTube、ジャンルのアイコン操作から×で戻る、などでも切り替わります)

More編集を開始した後、右側の状態から「Moreの編集枠」に戻るには、編集画面の背景色の部分をクリックするか、通常編集・HTML編集のボタンを押すのが良いでしょう。

この様に、2つの編集枠を切替えて両側で編集可能で、また「not more」ボタンでMore編集を解除出来るのは従来の通りです。



この版はIE11版-ブラシュアップの最新版で、特徴や改善点は以下です。

●「Moreの編集枠」が「基本の編集枠」と同様の配置で、More編集が理想的に行えます。
●「基本の編集枠」「Moreの編集枠」ともに縦幅は固定、横幅はウインドウ幅に順応します。
● 編集アイコンの輪郭をくっきりさせる、精密なアイコン指定を盛り込みました。
● 標準2行アイコン版以外では省略していた「装飾解除」「ジャンル」アイコンを追加しました。
● 自動保存の表示左端が編集アイコン下に一部隠れますが、ウインドウ幅を拡げて確認出来ます。
● テンプレート編集画面の簡易アレンジを組み込んでいて、テンプレート編集が可能です。

このアレンジはIE11のユーザースタイルシートの機能を利用します。 その操作方法は、以下のリンク先を参照ください。



IE11版-ブラッシュアップ More拡張 テンプレート編集対応


/* IE11版 - ブラッシュアップ More拡張 テンプレート編集対応 2017.04.08 */

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

#wrapper {
min-width: 950px !important; /* 全体幅指定 */
min-height: 0 !important;
background: none !important; }

#entry {
min-width: 900px; } /* テンプレ編集枠幅に対応 */

.ad728 {
display: none !important; }

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


/* タイトル部 */

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

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

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

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

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

.page_entryTemplate #editTemplateList select::-ms-expand {
border: none !important;
background: none !important; }

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


/* *** */

.page_entry .alert.alert-red {
position: absolute !important;
width: 300px !important;
padding: 2px 14px 0 !important;
font-size: medium !important; }


/* *** */

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

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

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

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

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

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

.page_entry #entryEditTitle .alert {
top: 0px;
left: 310px;
z-index: -1; }

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


/* 編集部wrap構成 */

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

.page_entryTemplate #entryEditWrap {
overflow: visible !important;
height: 800px !important; } /* テンプレ「登録」ボタン位置 */

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

.page_entry #entryEditContents {
margin: 56px 177px 0px 0px !important; /* 画像パレット右余裕 */
padding: 0 !important;
overflow: visible !important; }

.page_entryTemplate #entryEditContents {
margin-right: 170px !important; }

.page_entryTemplate #entryEditContents {
overflow: visible !important; }

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

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

#editorSwither {
position: absolute !important;
top: 2px !important;
padding: 0 !important;
line-height: 23px !important;
z-index: 3 !important; }

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

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

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

#_panel {
height: 32px !important;
border: none !important;
background: none !important;
z-index: 2 !important; }

#new_icon {
display: none !important; }


/* 編集部 */

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

#_entryContent , #entryContent {
height: 580px !important; }

#_entryContent:focus , #entryContent:focus {
position: relative;
z-index: 2; }

#_moreEntryContent , #moreEntryContent {
height: 500px !important; }


#_entryContent .IMAGE_LEFT , #_moreEntryContent img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

#_entryContent img.IMAGE_RIGHT , #_moreEntryContent img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

#_entryContent img.IMAGE_MID , #_moreEntryContent img.IMAGE_MID {
margin: 0.22em 0em 0.38em 0em !important; }

#entryEditWrap .alert {
top: 95px;
left: 430px;
z-index: 3; }

#entryMoreText .alert {
top: 45px;
left: 415px;
z-index: 3; }


/* More部 */

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

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

#notmore.w100 {
width: 74px !important;
height: 28px !important;
background: linear-gradient(to bottom, #FFF9C4 0%,#FFD54F 100%) !important;
margin: 15px 0px 10px !important; }

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

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

#entryMoreArea {
position: relative;
margin: -591px 0 0 !important;
padding-top: 8px !important;
z-index: 0; }

input#moreEntrySubject {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 3px 10px 0px !important;
background: #f1f6f9; }

#entryMoreText {
margin: 2px 0 0 !important; }


/* 下部整理 1 */

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

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

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

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

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

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

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

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

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


/* 画像パレット */

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

.page_entry #entryEditIframe {
width: 165px !important; /* 画像パレット右余裕 */
position: absolute !important;
top: 56px;
right: 2px;
z-index: 2; }

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

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

#partsImage {
min-height: 600px;
padding: 5px 0px 0px !important;
position: static !important; }

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

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

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

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

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

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

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

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

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

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

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

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

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


/* 下部整理2 */

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


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

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

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

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

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

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

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


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

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

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

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


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

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

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

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


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

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

#exFooterWrapper {
display: none !important; }

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


/* 編集アイコン配置・デザイン */

#exbtn_bold {
top: auto !important;
bottom: 5px !important;
left: 223px !important;
background-position: -1px -1px !important; }

#exbtn_italic {
top: auto !important;
bottom: 5px !important;
left: 301px !important;
background-position: -26px -1px !important; }

#exbtn_underline {
top: auto !important;
bottom: 5px !important;
left: 249px !important;
background-position: -51px -1px !important; }

#exbtn_strikethrough {
top: auto !important;
bottom: 5px !important;
left: 275px !important;
background-position: -76px -1px !important; }

#exbtn_link {
top: auto !important;
bottom: 5px !important;
left: 549px !important;
background-position: -251px -27px !important; }

#exbtn_size1 {
top: auto !important;
bottom: 5px !important;
left: 327px !important;
background-position: -126px -1px !important; }

#exbtn_size2 {
top: auto !important;
bottom: 32px !important;
left: 327px !important;
background-position: -151px -1px !important; }

#exbtn_size3 {
top: auto !important;
bottom: 5px !important;
left: 353px !important;
background-position: -176px -1px !important; }

#exbtn_size4 {
top: auto !important;
bottom: 32px !important;
left: 353px !important;
background-position: -201px -1px !important; }

#exbtn_fontcolor {
top: auto !important;
bottom: 5px !important;
left: 379px !important;
background-position: -226px -1px !important; }

/*
#exbtn_blockquote {
top: auto !important;
bottom: 32px !important;
left: 457px !important;
background-position: -376px -1px !important; }
*/

#exbtn_left {
top: auto !important;
bottom: 32px !important;
left: 392px !important;
background-position: -276px -1px !important; }

#exbtn_center {
top: auto !important;
bottom: 5px !important;
left: 405px !important;
background-position: -301px -1px !important; }

#exbtn_right {
top: auto !important;
bottom: 32px !important;
left: 418px !important;
background-position: -326px -1px !important; }

/*
#exbtn_ol {
top: auto !important;
bottom: 32px !important;
left: 249px !important;
background-position: -426px -1px !important; }
*/

/*
#exbtn_ul {
top: auto !important;
bottom: 32px !important;
left: 223px !important;
background-position: -401px -1px !important; }
*/

#exbtn_indent {
top: auto !important;
bottom: 32px !important;
left: 275px !important;
background-position: -451px -1px !important; }

#exbtn_indent.disabledBtn {
background-position: -451px -27px !important; }

#exbtn_outdent {
top: auto !important;
bottom: 32px !important;
left: 301px !important;
background-position: -476px -1px !important; }

#exbtn_outdent.disabledBtn {
background-position: -476px -27px !important; }

#exbtn_hr {
top: auto !important;
bottom: 5px !important;
left: 431px !important;
background-position: -351px -1px !important; }

#exbtn_emoji {
top: auto !important;
bottom: 5px !important;
left: 653px !important;
background-position: -101px -1px !important; }

#exbtn_youtube {
top: auto !important;
bottom: 5px !important;
left: 627px !important;
background-position: -676px -1px !important; }

#exbtn_map {
top: auto !important;
bottom: 5px !important;
left: 601px !important;
background-position: -626px -1px !important; }

#exbtn_genre {
top: auto !important;
bottom: 5px !important;
left: 679px !important;
background-position: -576px -1px !important; }

#exbtn_amazon {
top: auto !important;
bottom: 5px !important;
left: 575px !important;
background-position: -601px -1px !important; }

#exbtn_removeformat {
top: auto !important;
bottom: 5px !important;
left: 464px !important;
background-position: -551px -1px !important; }

#exbtn_removeformat.disabledBtn {
background-position: -551px -27px !important; }

#exbtn_undo {
top: auto !important;
bottom: 5px !important;
left: 490px !important;
background-position: -501px -1px !important; }

#exbtn_undo.disabledBtn {
background-position: -501px -27px !important; }

#exbtn_redo {
top: auto !important;
bottom: 5px !important;
left: 516px !important;
background-position: -526px -1px !important; }

#exbtn_redo.disabledBtn {
background-position: -526px -27px !important; }

#exbtn_autoeol {
top: auto !important;
bottom: 5px !important;
left: 190px !important;
background-position: -701px -1px !important; }

#exbtn_autoeol.disabledBtn {
background-position: -701px -27px !important; }

#exbtn_autoeol.activeBtn {
background-position: -701px -131px !important; }


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

#_panel .panelBtn {
width: 21px !important;
height: 21px !important;
border: 1px solid #ccc; /* 編集アイコンの枠色 */
border-radius: 3px;
z-index: 1 !important; }

#entryEditTags span.tags a {
border-radius: 0 3px 3px 0 !important; } /* タグボタン辺縁デザイン */


/* 配色 */

.page_entryTemplate#contents ,
.page_entryTemplate #editTemplateList ,
.page_entryTemplate #entryEditHead-new table ,
.page_entryTemplate #entryEditHead-new th ,
.page_entryTemplate #entryMoreArea {
box-shadow: none !important;
background: #a4c1ce !important; } /* テンプレ背景色 */

body.win ,
.page_entry #entry>#form ,
.page_entry #entryMoreArea ,
.page_entry #entryOptions ,
.page_entry #entryOptionsPstdate ,
.page_entry #entryOptionsPpenflag ,
#_panel {
background: #a4c1ce !important; } /* 編集画面 背景色 */


/* 2行アイコン版オプション */

/*
#_panel:hover {
height: 60px !important;
top: -28px !important;
margin: 0px 0px -28px !important; }
*/




編集画面の配色は、最後の「配色」の項の2ヵ所で指定しています。 この部分を書き換えて好みの配色やテクスチャーを指定が可能です。 詳細はこの記事の最後を参考にしてください。



〔追記〕2017.04.07
「not more」スイッチをオレンジカラーにしてMore編集状態を印象付ける様にしました。



〔追記〕2017.04.08
編集アイコンを全て表示する「2行アイコン」を、オプションで追加出来る様に修正しました。 主要スタイルシートの編集アイコンの配置を書き換えて実現しているので、このオプションは「2017.04.06」の版では無効です。 上記掲載の「2017.04.08」の版を使用してください。

2行アイコン版オプション
「IE11版-ブラッシュアップ More拡張 テンプレート編集対応 2017.04.08」の末尾の「 /* 2行アイコン版オプション */ 」のCSSコード4行の前後を囲う「/*」「*/」を削除すると、2行アイコンを使える様になります。 下図の様に、アイコン列上をポイントするとアイコン行が2行に増えます。
(注:More編集時の画面切替え操作に関して、IE11版は下図の青枠内背景のクリックが無効です)

b0174191_08460502.png

この機能が不要で、従来の1行アイコンとする場合は、上記の逆に「/*」「*/」で4行を囲むか、オプション行の4行全部を削除してください。



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

編集画面をアレンジする(27)/ エキサイトブログ Chrome版 - More専用 編集枠縦幅可変タイプ

2017年 04月 02日
新編集画面のアレンジでは、これまで「More機能」を使用する場合の事を余り深く考えていませんでしたが、旧編集画面は文書編集枠の縦幅が可変で、Moreの編集への配慮があることに気付きました。 そこで新編集画面を調べると縦幅が固定となっています。

この発見から、More編集を頻繁に使用するユーザーに特化した編集画面を構成しました。 編集枠の要素である「textarea」とCSSの機能の制限により、最初に編集画面を開いた時の縦幅以上にしか、縦幅の調節が出来ません。 このため、More編集時のデザインを主にすると、一般のMoreを使わない編集では、少し不便になります。

b0174191_00502416.png

上図は、More専用のデザインです。 左端は編集画面を開いた状態です。

[上段]はMore編集の場合です。 左端は編集開始時で、「基本の編集枠」の最初の縦幅は狭く、これは再編集の場合でも初行しか見えません。 中央はMoreボタンを押した時で、「Moreの編集枠」の縦幅の初期値は大きく、More編集に適したレイアウトになります。 どちらの編集枠も縦幅可変で、右端の様に適当に調節して使用できます。

[下段]は一般のMoreを使わない場合です。 この場合は「基本の編集枠」を拡げて使用します。 拡げた後は従来の編集画面と全く同様ですが、編集開始の度にこのドラッグ操作が必要で、More機能を使用しない人にとっては適していません。

従って、このデザインはまさしく「Moreユーザー専用」となります。

下図は、上段の中央の状態で、More編集をしている状態のハードコピーです。

b0174191_00500180.png

More編集をする場合に、編集アイコンや画像パレットが遠くなり、またウインドウ全体の縦幅が長くなってしまうと言う不便を解決しています。

特徴を整理すると、
●Moreを多用する場合に特化したデザインで、Moreを使用しない場合も利用可能。
●「基本の編集枠」「Moreの編集枠」は、ともに縦幅・横幅が可変。
●他の部分は従来の機能を踏襲しているが、「マイブログ」ボタンは省略しました。
●「テンプレート」ボタンは画像パレットの下にあり、少しウインドウを拡げると操作出来ます。
●編集アイコンの輪郭をくっきりさせる、精密なアイコン指定を新しく盛り込みました。(下図)
●標準2行アイコン版以外では省略していた「装飾解除」「ジャンル」アイコンを追加しました。

b0174191_12351196.png

この編集画面のアレンジは「Chrome」と拡張機能「Stylist」を利用して実現可能です。「Stylist」の導入と設定方法は以下のリンク先に説明しています。



以下が「Stylist」に登録するユーザースタイルシート(CSS)です。

新編集画面〔Chrome版- More専用〕


/* 〔Chrome版-ブラッシュアップ More専用〕 Update 2017.04.02 */

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

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

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

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

header#exHeaderWrapper {
display: none; }

.ad728 {
display: none; }

#wrapperInner {
padding: 0px; }

footer#exFooterWrapper {
display: none; }


/* *** */

#container.hasmenu {
margin: 0;
float: none; }

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

.hasmenu #contents {
margin: 0;
padding: 0px 15px 0px 15px; /* 編集枠左余裕 画像パレット 右余裕 */
background: #fbfbfb;
border: none;
border-radius: 0; }

#announceList {
display: none; }

header.boxHead {
display: none; }


/* タイトル部 */

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

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

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

#entryEditHead-new {
position: absolute;
top: 0;
padding: 0;
margin: 0;
border: none;
z-index: 2; }

#entryEditHead-new th {
display: none; }

#entryEditTitle {
position: absolute;
top: 15px;
width: 200px;
font-size: medium;
z-index: 2;
transition: 0.5s; }

#entryEditTitle:hover {
width: 792px; }

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


/* 編集部wrap構成 */

#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

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

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

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

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

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

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

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

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

#new_icon {
display: none !important; }


/* 編集部 */

#_entryContent , #_moreEntryContent ,
#entryContent , #moreEntryContent { /* 文書編集枠基本設定*/
background: #fbfbfb;
line-height: 150%;
margin: 0;
resize: vertical;
font-size: medium;
border-radius: 3px; }

#_entryContent , #entryContent { /* "_"無しはHtml編集画面 */
min-height: 46px !important;
height: 46px; }

#_moreEntryContent , #moreEntryContent {
height: 495px; }

img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

img.IMAGE_MID {
margin: 0.22em 0em 0.38em 0em !important; }


/* More部 */

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

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

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

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

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

input#moreEntrySubject {
font-size: medium;
width: 651px;
margin: -43px 0 0 128px; }

/* 下部整理 1 */

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

#entryOptions:hover {
width: 100%; }

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

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

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

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

#entryTrackback {
display: none; }


/* 画像パレット */

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

#entryEditIframe {
position: absolute;
overflow: hidden;
right: 2px;
width: 215px; /* 画像パレット 右余裕*/
z-index: 2; }

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


/* 下部整理2 */

#blog2media {
display: none; }

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

#entryOptionsPstdate:hover {
width: 100%; }

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

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

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


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

#entryOptionsPpenflag:hover {
width: 100%; }

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

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

#entrySubmitBtm .btn {
height: 28px; }

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

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

#menu {
display: none; }

#sideRakutenMW {
display: none; }

#exFooterWrapper {
display: none; }


/* 編集アイコン配置・デザイン */

#exbtn_bold {
top: 5px;
left: 223px;
background-position: -1px -1px; }

#exbtn_italic {
top: 5px;
left: 301px;
background-position: -26px -1px; }

#exbtn_underline {
top: 5px;
left: 249px;
background-position: -51px -1px; }

#exbtn_strikethrough {
top: 5px;
left: 275px;
background-position: -76px -1px; }

#exbtn_link {
top: 5px;
left: 549px;
background-position: -251px -27px; }

#exbtn_size1 {
top: 5px;
left: 327px;
background-position: -126px -1px; }

#exbtn_size2 {
display: none;
background-position: -151px -1px; }

#exbtn_size3 {
top: 5px;
left: 353px;
background-position: -176px -1px; }

#exbtn_size4 {
display: none;
background-position: -201px -1px; }

#exbtn_fontcolor {
top: 5px;
left: 379px;
background-position: -226px -1px; }

#exbtn_blockquote {
display: none;
background-position: -376px -1px; }

#exbtn_left {
display: none;
background-position: -276px -1px; }

#exbtn_center {
top: 5px;
left: 405px;
background-position: -301px -1px; }

#exbtn_right {
display: none;
background-position: -326px -1px; }

#exbtn_ol {
display: none;
background-position: -426px -1px; }

#exbtn_ul {
display: none;
background-position: -401px -1px; }

#exbtn_indent {
display: none;
background-position: -451px -1px;}

#exbtn_outdent {
display: none;
background-position: -476px -1px; }

#exbtn_hr {
top: 5px;
left: 431px;
background-position: -351px -1px; }

#exbtn_emoji {
top: 5px;
left: 653px;
background-position: -101px -1px; }

#exbtn_youtube {
top: 5px;
left: 627px;
background-position: -676px -1px; }

#exbtn_map {
top: 5px;
left: 601px;
background-position: -626px -1px; }

#exbtn_genre {
top: 5px;
left: 679px;
background-position: -576px -1px; }

#exbtn_amazon {
top: 5px;
left: 575px;
background-position: -601px -1px; }

#exbtn_removeformat {
top: 5px;
left: 464px;
background-position: -551px -1px; }

#exbtn_removeformat.disabledBtn {
background-position: -551px -27px; }

#exbtn_undo {
top: 5px;
left: 490px;
background-position: -501px -1px; }

#exbtn_undo.disabledBtn {
background-position: -501px -27px; }

#exbtn_redo {
top: 5px;
left: 516px;
background-position: -526px -1px; }

#exbtn_redo.disabledBtn {
background-position: -526px -27px; }

#exbtn_autoeol {
top: 5px;
left: 190px;
background-position: -701px -1px; }

#exbtn_autoeol.disabledBtn {
background-position: -701px -27px; }

#exbtn_autoeol.activeBtn {
background-position: -701px -131px; }

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

.panelBtn {
width: 21px;
height: 21px;
border: 1px solid #74a3ca; /* 編集アイコンの枠線色 */
border-radius: 3px; }


/* 配色とボタン辺縁デザイン */

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

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

body , .hasmenu #contents , #entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag {
background-color: #98c1dc !important; } /* 背景色 */





編集ウインドウの配色は、最後の「 /* 背景色 */ 」の項で指定しています。 これらを必要に応じて書き換えて好みの配色やテクスチャー画像にカスタマイズ可能です。 詳細な方法は「Chrome版 配色カスタマイズ」などを参考にしてください。



上記CSSの中ほどの「 /* 編集部 */ 」の部分で、各編集枠の初期値などを指定しています。 このバージョンは、この初期値の指定を変更する事で「More専用」ではない従来の「一般の編集スタイル」に変更可能です。

●従来の編集スタイルに変更するオプション

スタイルシート末尾に以下のコードを追記すると、一般の編集スタイルに適したレイアウトになります。 これは、従来の「Chrome-ブラシュアップ版」の最新版として使用できます。

 ▪各編集枠の縦幅の伸長が可能です。
 ▪「基本の編集枠」の初期縦幅は従来のまま、「Moreの編集枠」の初期縦幅は低めにしています。
 ▪配置上の問題で「マイブログ」ボタンは省いています。

#_entryContent , #entryContent {
height: 580px; }

#_moreEntryContent , #moreEntryContent {
height: 80px; }



「More専用」版で文書編集枠をドラッグしていると、少し肩が凝ります。 枠コーナーのマークが控えめで小さいからです。

b0174191_10381375.png

しかし実際のマーク実体は「スクロールバー幅の正方形の範囲」で、ドラッグは慣れると簡単です。 ただ、どうしても馴染めない場合は、スクロールバーを常時表示として、ドラッグをし易く出来ます。

b0174191_10384463.png


●編集枠のドラッグポイントを明示するオプション

スタイルシート末尾に以下のコードを追記すると、全ての文書編集枠に常に縦スクロールバーが表示される様になります。

#_entryContent , #_moreEntryContent ,
#entryContent , #moreEntryContent {
overflow-y: scroll; }




[PR]
by Ataron | 2017-04-02 02:04 | ブログスキンのアレンジ | 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)