Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ(41) Chrome版 - More拡張 ver.3

2017年 07月 30日
Chrome版で画像パレットのアレンジが可能になりました。 デフォルトの画像パレットは2列でサムネイルが小さく画像の順番が不明瞭で、画像の取り違いを生じ易い欠点があります。 似た画像の登録/差替えで、困った経験をお持ちの方は多いでしょう。 IE11版では当初から画像パレットを1列化し、確実にこのデザインが有効と考えていたので、Chrome版に導入出来たのは感無量です。

このアレンジでは、Stylistにスタイルを登録する方法がこれまでと異なり、画像パレット部のスタイル適応URLを、編集画面と異なるURLで登録します。 これはテンプレート補正を編集画面と異なるURLで扱うのと同様の登録方法です。 このため、「基本CSS」「画像パレットCSS」「テンプレート補正CSS」「オプションCSS」の4個の登録に分けて登録する必要があります。 各CSSは、従来の ver.2 と互換がなく、以前のバージョンを登録している場合は全て削除して、このページ「Chrome版 - More拡張 ver.3」のものを登録し直してください。

下図は編集画面全体の様子です。

a0349576_07351913.png

編集画面はウインドウの縦スクロールバーを表示させない様に、かなりコンパクトにしています。 マウスのスクロール操作は、文書編集枠と画像パレットにのみ使われ、編集操作は軽快です。 ブラウザの画面拡大で文字を見易くしたり、ノートPCの小さな画面で編集する場合など、編集画面のコンパクトさはとても有効です。

More編集の特徴や操作については、以下の初期バージョンの説明を参照ください。


More編集の構造を受け継ぎ、この ver.3 は以下の点を改善しました。

●画像パレットを1列化し、大きなサムネイルで確認/識別をし易くしました。
●高さを抑えたパレットで最上段を空け、タイトル幅を拡張し、右上隅を常時表示としました。
●「おすすめブログテーマ」「キャンペーン」「みんなの投稿」「お知らせリスト」「トラックバック枠」など、元の編集画面の情報をすべて表示可能としました。 各情報の表示は、編集ウインドウのコンパクトさを損なわない工夫をしています。 またオプションで、個々の非表示化が可能です。
●編集アイコンを明瞭化しています。 編集画面の配色を好みに変更可能です。 また、オリジナルデザインのアイコン使用、背景のテクスチャー使用などが、一定のスキルがあれば可能です。
●一部の編集アイコンを省略していますが、「2行編集アイコン」のオプションで全アイコンを使えます。



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


「Chrome版 - More拡張 ver.3」は、CSSによってURL指定(下図の)が異なります。 このページの各CSSごとに指定した ①➁➂ を Stylistに貼り付けて、4個のスタイルを登録してください。

a0349576_13490576.png

登録は上図の例の様に、「基本CSS」「画像パレットCSS」「テンプレート補正CSS」「オプションCSS」の順に登録する必要があります。「テンプレート補正CSS」「オプションCSS」は、後方の順でなければ無効になります。



スタイル名 : 基本CSS
適応URL :「regexp」=「//userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます



/* Chrome版 - More拡張 ver.3 2017.08.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: 975px;
min-height: 0;
background: none; }

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

header.boxHead {
display: none; }



/* テンプレート選択 */

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

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

#entryTemplateList select:focus {
left: -400px;
width: 420px;
z-index: 3; }



/* 編集アラート */

.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: 255px;
font-size: medium;
z-index: 2;
transition: 0.5s; }

#entryEditTitle:hover {
width: 855px; }

#entryEditTitle :focus {
position: relative;
width: 855px;
background: #fff; }

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

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



/* おすすめブログテーマ */

#trb_themeTtl {
position: absolute;
top: 5px;
left: 898px;
margin: 0;
padding: 5px 0;
height: 40px;
width: 50px;
overflow: hidden;
transition: 0.5s;
z-index: 2; }

#trb_themeTtl:hover {
left: 500px;
width: 405px;
padding: 5px 20px;
background: #fff;
box-shadow: 0px 2px 2px #aaa; }



/* カテゴリ */

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

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

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

#entryBlogCategoryDialog.btn {
position: absolute;
left: 120px;
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: 415px; }

#entryEditTags .entryElement {
display: flex; }

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

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

.tagCompletionBox {
top: 43px !important;
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 180px 0px 0px;
padding: 0; }

#entryEditContents .entryPreview.btn-s {
position: relative;
height: 32px;
opacity: 0; } /* 読込み遅延対策 */

.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;
margin-top: -32px; /* 読込み遅延対策 */
border: none;
background: none;
z-index: 2; }

#new_icon {
display: none !important; }



/* 編集部 */

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

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

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

#_entryContent:focus , #entryContent:focus ,
#_moreEntryContent:focus , #moreEntryContent:focus {
z-index: 2; }

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

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



/* More部 */

#more.w100 {
display: block;
height: 28px;
width: 74px;
margin: 15px 0px 15px;
background: linear-gradient(to bottom, #ffffff 0%,#ececec 100%); }

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

#more.w100 span , #notmore.w100 span {
padding: 2px 0px 0px;
line-height: 26px;
font-size: small; }

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

#entryMoreArea {
position: absolute;
top: 75px;
width: 100%;
margin: 0;
padding-top: 7px; }

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

#entryMoreText {
margin: 2px 0 0; }



/* 下部整理 1 */

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

#entryOptions:hover {
width: 100vw; }

#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 {
position: relative;
margin: -57px 0 5px 110px;
padding: 14px 0 10px; }

#entryTrackbackTextarea {
position: relative;
width: 90px;
margin: 0 0 0 680px;
min-height: 20px;
height: 28px;
padding: 5px 0 0 7px;
box-shadow: none;
font-size: medium;
overflow-y: scroll;
transition: 0.5s; }

textarea#entryTrackbackTextarea:hover {
width: 770px;
margin: 0;
padding-left: 150px;
z-index: 4; }

textarea#entryTrackbackTextarea:focus {
height: 48px;
width: 770px;
margin: 0 0 -20px;
padding-left: 150px;
z-index: 4; }

.notesBoxHead {
position: absolute;
top: -35px;
left: -110px;
line-height: 28px;
padding: 5px 20px 0 200px;
width: calc(100% + 110px);
background: rgba(58, 135, 173, 0.2); }

.notesBoxHead h1::before {
content: "トラックバック"; }

.notesInner {
position: absolute;
top: -35px;
left: 300px;
padding: 7px 0 5px;
font-weight: bold; }



/* 画像パレット */

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

#entryEditIframe iframe {
width: 165px;
height: 612px; }



/* 下部整理2 */

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

#entryOptionsPstdate:hover {
width: calc(100vw - 294px); }

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

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

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


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

#entryOptionsPpenflag:hover {
width: calc(100vw - 544px); }

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



/* サブミットボタン・メニュー */

#entrySubmitBtm {
border: none;
padding: 0;
margin: 0 0 25px 80px; }

#entrySubmitBtm .btn {
margin-top: 5px;
height: 30px; }

.btn {
background: linear-gradient(to bottom, #ffffff 0%,#ececec 100%); }

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

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

.btn-blue {
background: linear-gradient(to bottom, #0e9de4 0%,#2679ce 100%); }


#menu {
height: 0; }

#myblogBtn {
position: absolute;
left: 15px;
bottom: 25px;
width: calc(6.8em + 43px);
height: 30px;
border: 1px solid #ccc;
margin: 0;
background: linear-gradient(to bottom, #c3ffff 0%,#b0eae0 100%); }

#myblogBtn:hover {
background: #8cf3f3; }

#myblogBtn a {
line-height: 27px;
color: #333;
text-shadow: 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_indent.disabledBtn {
background-position: -451px -27px; }

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

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

#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_instagram {
top: initial;
bottom: 5px;
left: 705px;
background-position: -751px -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; } /* タグボタンの枠デザイン */



/* キャンペーン枠・みんなの投稿枠・お知らせリスト */

.campaign-container {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 25px 160px;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%); }

.campaign-container:hover {
margin: 0 0 20px 0;
padding: 20px 20px 10px;
width: calc(100% - 252px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }

.campaign-container::before {
content: "C";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold; }


#blog2media {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 25px 185px;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%); }

#blog2media .boxHead {
display: block; }

#blog2media:hover {
margin: 0 0 20px 0;
padding: 15px 20px 20px;
width: calc(100% - 210px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }

#blog2media::before {
content: "M";
position: absolute;
top: 5px;
left: 3px;
color: #666;
font-weight: bold; }


#announceList {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 25px 210px;
padding: 0;
max-width: 18px;
max-height: 28px;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#effaff 0%,#bce8f1 100%); }

#announceList:hover {
margin: 0 0 20px 0;
padding: 30px 0 10px;
max-width: none;
width: calc(100% - 212px);
max-height: 300px;
transition: max-height 1s;
z-index: 5; }

#announceList ul li {
margin: 10px 30px; }

#announceList ul li::before {
content: "A";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold;
text-shadow: none; }



/* 背景色デザイン */

body , .hasmenu #contents , #entryMoreArea ,
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover , #announceList:hover {
background: #a4c1ce; } /* 編集画面 背景色 */






スタイル名 : 画像パレットCSS
適応URL :「regexp」=「//userconf.exblog.jp/parts/image/
以下の枠内のCSSコードを貼り付けます



/* 画像パレット ver.3 2017.07.30 */

#partsImage #droppable {
font-size: 13px;
margin: 5px 5px 10px;
color: #fff;
background: #459bc5;
box-shadow: none; }

#partsImage #droppable:hover {
background: #b8e2f7; }

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

#partsImage .fileUploadWrapper {
border: none;
margin: 0; }

#partsImage .fileUploadWrapper .fileUploadBtm {
position: absolute;
top: 0;
left: 78px;
width: 83px;
text-indent: -6px; }

#partsImage .optionGroup {
margin: 0 0 0 15px;
padding: 0; }

#search .optionGroup select {
position: absolute;
left: 5px;
padding: 0 15px;
height: 30px; }

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

#partsImageContainer li {
margin: 0;
width: 132px;
height: 90px; }

#partsImageContainer li div input {
position: relative;
left: 53px; }

#partsImageContainer li a {
background-size: cover;
width: 128px;
height: 86px; }

#partsImage .pager {
margin: 0; }

#partsImage .pager li {
margin: 0 2px; }

#partsImage .alert {
margin: 0; }





スタイル名 : テンプレート補正CSS
適応URL :「regexp」=「//userconf.exblog.jp/entry/template/
以下の枠内のCSSコードを貼り付けます



/* More拡張 テンプレート補正 ver.3 2017.07.30 */

#editTemplateList {
position: absolute;
top: 15px;
left: 500px;
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: 860px;
z-index: 1; }

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

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

#sidemenu {
display: none; }


/* More拡張 更新分 ver.3 */

#entryTrackback .boxHead.head-h3 {
display: block;
margin: 5px 0 -38px;
background: none;
position: relative;
z-index: 1; }

#entryTrackbackTextarea {
height: 40px;
min-height: 40px;
margin: 0;
width: 100%;
padding-left: 150px;
background: #fbfbfb;
box-shadow: none; }

textarea#entryTrackbackTextarea:hover {
width: 100%; }

textarea#entryTrackbackTextarea:focus {
height: 60px;
width: 100%; }





スタイル名 : オプションCSS
適応URL :「regexp」=「//userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます

但し、各「表示オプション」「非表示オプション」の必要な項のみを残し、他は行ごと削除します。 また、オプション不要の場合は、この「オプションCSS」を登録する必要がありません。



/* Chrome版 - More拡張 オプションCSS ver.3 2017.08.02 */

/* 2行編集アイコン ワイド 表示オプション */

#_panel:hover {
height: 75px;
margin-top: -75px;
transition-delay: 0.2s; }


/* お勧めブログテーマ 非表示オプション */

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


/* お知らせリスト 非表示オプション */

#announceList {
display: none; }


/* キャンペーン 非表示オプション */

.campaign-container {
display: none; }


/* みんなの投稿 非表示オプション */

#blog2media {
display: none; }


/* トラックバック枠 非表示オプション */

#entryTrackback {
display: none; }







基本CSSの最後の「背景色デザイン」項で、編集画面全体の背景色を変更出来ます。 また、編集画面の各部ごとの背景色の設定については、以下のページを参考にしてください。


オリジナル編集アイコンを使用する方法は、以下を参照ください。


配色や編集アイコンの設定は「基本CSSの末尾」か「オプションCSS」に追記します。 画像パレット部の配色指定は「画像パレットCSS末尾」に追記してください。



〔追記〕2017.08.02
タグ枠にflex導入、編集パネル読込み遅延対策、トラックバック枠拡張表示、2行編集アイコンワイドオプション、等の細部の追加更新をしました。 CSSの日付で更新を判断ください。



〔追記〕2017.08.08
(48)トラックバックカテゴリで起動した編集画面で、横スクロールバーが消えない不具合を修正。 上記の基本CSSは修正済です。




この記事はカテゴリー「スキン編集」にトラックバックしています。



[PR]
by Ataron | 2017-07-30 13:59 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/27019473
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。