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

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

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

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

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

エキサイト旧編集画面のアレンジ(2) Chrome版 - 新画像パレット_b0174191_14292155.png

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

エキサイト旧編集画面のアレンジ(2) Chrome版 - 新画像パレット_b0174191_14294973.png



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

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



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


/* 旧編集画面用 ユーザースタイルシート Chrome版 新画像バレット */

#exHeaderWrapper {
display: none; }

#wrapper {
min-width: 940px; }

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

#toUserconf , #csEnquete {
display: none; }

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

#exFooterWrapper {
display: none; }

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

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

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

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


/* *** */

#entry_header {
display: none; }

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

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

#template_names {
overflow: hidden; }

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

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

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

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


/* *** */

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

#subject_title {
display: none; }

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

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

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


/* *** */

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

#category_title {
display: none; }

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

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

/* *** */

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

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

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

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

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

#tags_attention {
display: none; }


/* *** */

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

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

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

#entryopen_title {
width: 65px !important; }

#entryopen_title >a {
display: none;}

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

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


/* *** */

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

#entrymenu_title {
display: none; }

#entrymenu_content {
width: auto !important; }

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

span#usehtml br {
display: none; }


/* *** */

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

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

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

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

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

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

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

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


/* *** */

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

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

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


/* *** */

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

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

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

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

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

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

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

.mt5 span.HELP {
display: none; }

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

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

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


/* *** */

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

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


/* *** */

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

#entryoption_title {
display: none; }

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

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

#cdcdcd {
display: none; }


/* *** */

#upload {
display: none; }

div#upfile_list {
display: none; }

#upload_notes {
display: none; }

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

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


/* *** */

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

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

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

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

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

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


/* *** */

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

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

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

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

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

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


/* *** */

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

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

body {
background-color: #98c1dc; }


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

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

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





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


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



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