ブログ背景画像を差替えるツール〔両タイプ統合版〕（21）/ JavaScript

大量のエラーを出す処理

いよいよ完成に近付いて、スクリプトのエラーチェックを行っていると、大量のエラーが出る処理に気付きました。 

エラーは「Skin Coordinate」自体ではなく「style-injector.js」がエラーを出している様子で、これは拡張機能（Tampermonkey？）のエラーです。 

　　「The page keeps generating mutations. Skip the event.」

意味は「ページが変化し続けているので、処理を飛ばした」というもので、「style-injector」はおそらくページにスタイルを適用する機能と思われます。

この大量のエラーは、画像の配置変更と背景色の連続的な変更時に出て、私には大いに思いあたる処理です。 それらは、コーディングをしながら、ヘビーな処理ではたして動くのかと思いながら制作した部分です。

パラメーター変更を即時にページに適用する コード 

画像配置の X値 Y値 を「input要素」のボタンで連続的に変更して、その値に応じた画像の配置を表示する際、幾つもの処理が同時に行われます。

「Skin Coordinate」は、少し特異なプログラムです。 普通は、画像配置を指定する「background-position」のプロパティを直接に変更するところですが、敢えてその指定を「styleタグ」にして送出する事で、画像配置を変更しています。

この様な事をするのは、ブラウザの持っているページのCSSを壊さないためです。

例えば、元から背景画像のある要素に「background: none;」を一旦指定すると、それを取り消すCSSの指定はなく、元の画像を表示させる事ができません。 元に戻したい場合は、背景画像の指定を取得しておいて、再指定をするしか方法がないのです。

この操作の煩雑さは「styleタグ」で「background: none;」を指定し、その反映で元画像を非表示にすると回避できます。 この場合は「background: none;」の取り消しは、その「styleタグ」を削除するだけで済むのです。

この手法を演繹して、「Skin Coordinate」は全てのアレンジを「styleタグ」の送出と削除・更新で行います。 全ての「styleタグ」を削除して、ページを元の表示に戻す事も簡単に可能です。 直接ブラウザにCSSを指定した場合は、多くの場合に元に戻せず、ページをリロードするしかなくなると思います。

つまり「Skin Coordinate」は「styleタグ」でアレンジのシミュレーションを行う事で、ブラウザのデフォルトCSSを非破壊で保つ様にしているのです。

しかし、この「まわりくどい処理」は、画像の移動時では input要素の数値「1%」ごとに「styleタグ」の削除と再送出を要求します。 このせいで、上記の「やってられないよ」のエラーが出るのです。

解決の方法は最初から用意されていた 

さて、困ったと思って調べると、「input要素」の変更に応じて、直接にページのスタイルを変更するという、似た事をしているサンプルがありました。

　　<input type="color"> / MDN web docs   

の最後の方に下の様なサンプルがあります。

❶の「input要素」をクリックしてカラー設定ダイアログを表示させ、ピッカーの位置を変化させると、❷の文字列は連続的に文字色が変化します。 そして、ダイアログを閉じた時にピッカーの色は ❸の段落にも適用されます。

このサンプルは「inputイベント」と「changeイベント」の違いを示すもので、前者は「連続的」に値が適用され、後者は「値が決定した時」に適用されます。 つまり、設定値の結果を連続的に示す場合は「addEventListener」の「inputイベント」を使い、最終的な設定の固定は「changeイベント」に任せると良いという示唆です。

「Skin Coordinate」の連続的な画像配置の表示は、まさに下の「inputイベント」で実現していました。 コードは前バージョンのもので、これがエラーの引き金でした。

    g4.addEventListener('input', function(event){
        event.preventDefault();
        b_param[n][4]=g4.value;
        set_skintag4(n); });

3行目で「input要素」のスピナーで変化した値を毎回取得し、「set_skintag4(n);」は、その値の配置を表示させるタグを、値が1%変化する度に送出する関数です。

これを「MDN」のヒントにならって、配置の変化分はCSSを直接に変更し、変更が止まった時に「styleタグ」を送出する様に改めました。

    g4.addEventListener('input', function(event){
        event.stopPropagation();
        b_param[n][4]=g4.value;
        let posx=g4.value +'%';
        let target=document.querySelector(b_param[n][1]);
        target.style.backgroundPositionX=posx; });

    g4.addEventListener('change', function(event){
        event.stopPropagation();
        set_skintag4(n); });

このコードの最初の方は、直接CSSをスクリプトで変更しています。 しかし、配置に関する「background-position」のプロパティは、ユーザー画像に指定され、元の画像に影響しません。そして「change」の結果で上書きされ、配置調整時のみに画像の移動を表示して、最終的にCSSに残りません。

このコードによって、毎回「styleタグ」を送出する必要がなくなり、エラーは出なくなりました。 同様に、背景色の連続的な変更に関するコードも、更新しました。

「Skin Coordinate」ver. 2.5 

現在の「Skin Coordinate」は 新旧タイプスキン対応版です。

〔追記〕2020.07.04

Firefoxでコントロールパネルが表示されない問題が生じました。 次ページに修正対策版があります。 Firefoxで使用する場合は、そちらをご利用ください。

このスクリプトは、Chrome / Edge / Firefox で動作を確認しています。 以下のコードを「Tampermonkey」に登録する事で「Skin Coordinate」を利用出来ます。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

〔 Skin Coordinate 〕ver. 2.5  新旧タイプスキン対応版

// ==UserScript==
// @name         Skin Coordinate
// @namespace    http://tampermonkey.net/
// @version      2.5
// @description   ブログスキン背景画像の差替えツール〔新旧タイプスキン対応版〕
// @author       Ameba Blog User
// @match       https://ameblo.jp/*
// @match       https://blog.ameba.jp/ucs/upload/srvimage*
// @match       https://blog.ameba.jp/ucs/editcss/*
// @match       https://blog.ameba.jp/ucs/skin/srvskinpreview*
// @match       https://blog.ameba.jp/ucs/customize/*
// @run-at       document-start
// @noframes
// @grant        none
// ==/UserScript==


let ua=0; // Chromeの場合のフラグ
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ

let task=0; // メイン ON/OFF
let active=-1; // 編集ボタン選択
let g_open=0; // サブパネル ON/OFF
let hk=3; // 編集対象要素のデータベース上のインデックス
let last_hk=3; // Round Selector の初期インデックス
let b_param;



let target=document.querySelector('head');
let monitor=new MutationObserver(catch_key);
monitor.observe(target, { childList: true });

catch_key();

function catch_key(){
    let sp=document.querySelector('.skin-page'); // 新タイプスキン
    let sb=document.querySelector('.skinBody'); // 旧タイプスキン
    if(sp || sb){ // ページ表示エリアの取得が条件
        document.addEventListener("keydown", check_key);
        function check_key(event){
            let gate=-1;
            if(event.altKey==true){
                if(event.keyCode==118){
                    event.preventDefault(); gate=1; }} // ショートカット「Alt＋F7」

            if(gate==1){
                event.stopImmediatePropagation();
                event.preventDefault();
                main(); }} // ツールの実効関数
    }} // catch_key



function main(){
    if(task==0){
        preset_db();
        div_db();
        //       let write_json=JSON.stringify(b_param); // db内容の確認用メンテナンスコード ⭕
        //       localStorage.setItem('SkinCoordinate', write_json); // ローカルストレージ 保存
        task=1;
        panel1_disp();
        active_disp();
        coordinate(); }
    else if(task==1){
        task=0;
        un_view(hk);
        panel1_remove();
        panel2_remove(); }}



function preset_db(){
    let sp=document.querySelector('.skin-page'); // 新タイプスキン
    let sb=document.querySelector('.skinBody'); // 旧タイプスキン

    if(sp){
        b_param=[
            [0, '', 0, 0, 0, 0, 0, 0, 0, 100, 0],
            [0, 'html', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, 'body', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skin-bgHeader', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skin-bgHeader > div', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skin-page', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skin-page::before', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skin-btn', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skin-blogFooterNavInner', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skin-btnSidePrimary', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skin-btnSide', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '._3z8Z6GLQ', 0, 0, 50, 50, 0, 0, 0, 100, 0]]; }

    // b_param[n][0] 　0:デフォルト 1:アレンジCSS適用
    // b_param[n][1] 　対象要素のCSSセレクタ
    // b_param[n][2] 　ユーザーの背景画像SRC
    // b_param[n][3] ～ b_param[n][7] 　背景プロパティ
    // b_param[n][8] 　ユーザー背景色カラーコード
    // b_param[n][9] 　ユーザー背景色透過度
    // b_param[n][10] 　ユーザー背景色の非優先設定

    if(sb){
        b_param=[
            [0, '', 0, 0, 0, 0, 0, 0, 0, 100, 0],
            [0, 'html', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, 'body', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skinBody', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skinBody::before', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '.skinImgBtnS', 0, 0, 50, 50, 0, 0, 0, 100, 0],
            [0, '._3z8Z6GLQ', 0, 0, 50, 50, 0, 0, 0, 100, 0]]; }}


function div_db(){ // 背景画像のある対象要素のセレクタ・初期値の生成と配列への追加
    let div_ele=document.querySelectorAll('div');

    for(let k=0; k<div_ele.length; k++){
        let cumpStyle=window.getComputedStyle(div_ele[k], null);
        if(cumpStyle.backgroundImage!='none' || cumpStyle.backgroundColor!='rgba(0, 0, 0, 0)'){
            if(get_selector(div_ele[k])){
                let selector=get_selector(div_ele[k]);
                let same=0;
                for(let d=0; d<b_param.length; d++){
                    if(b_param[d][1].indexOf(selector)!=-1){
                        same=1;
                        break; }}
                if(same==0){
                    let target_selector=selector;
                    b_param.push( [0, target_selector, 0, 0, 50, 50, 0, 0, 0, 100, 0]); }}}}
} // div_db()


function get_selector(ele){
    let id_selector=ele.getAttribute('id');
    if(id_selector!=null){
        return '#'+ id_selector; }
    else{
        let class_selector=ele.className.split(' ')[0];
        if(class_selector==''){
            return false; }
        else {
            return '.'+ class_selector; }}}



function panel1_disp(){
    let panel=document.createElement('section');
    panel.setAttribute('id', 'panel1');

    panel.innerHTML=
        '<input id="b1" type="submit" value="　Html　">'+
        '<input id="b2" type="submit" value="　Body　">'+
        '<input id="b0" type="submit" value="Round Selector">'+
        '<input id="a1" type="submit" value="S">'+
        '<input id="a2" type="submit" value="✜">'+
        '<input id="upload" type="submit" value="Image Upload">'+
        '<input id="get_css" type="submit" value="Get CSS">'+
        '<input id="css_edit" type="submit" value="CSS Editor">';

    let css=
        '#panel1 { position: fixed; bottom: 40px; left: calc(50% - 490px); '+
        'padding: 15px 0 15px 20px; background: rgba(0, 95, 86, 0.8); '+
        'border: 2px solid #fff; border-radius: 4px; width: 980px; z-index: 10; }'+
        '#panel1 input { font: normal 16px meiryo; color: #000; '+
        'margin-right: 20px; padding: 4px 6px 2px; } '+
        '#b0, #b1, #b2  { outline: none; } '+
        '#b1, #b2 { width: 120px; } '+
        '#b0 { padding-left: 15px !important; width: 210px; text-align: left; } '+
        '#a1, #a2 { width: 28px; } '+
        '#a2 { text-indent: -1px; margin-right: 30px !important; } '+
        '#upload, #get_css, #css_edit '+
        '{ border: 2px solid #07c5b4; background: #3df7e5; } '+
        '#css_edit { margin-right: 0 !important; }';

    if(ua==1){
        css+='#a2 { text-indent: -2px; }'; }

    let style=document.createElement('style');
    style.innerHTML=css;
    panel.appendChild(style);

    let panel1=document.querySelector('#panel1');
    if(!panel1){
        document.querySelector('body').appendChild(panel); }} // panel1_disp()


function panel1_remove(){
    let panel1=document.querySelector('#panel1');
    if(panel1){
        panel1.remove(); }}



function panel2_disp(){
    let panel=document.createElement('section');
    panel.setAttribute('id', 'panel2');

    panel.innerHTML=
        '<input id="g0" type="submit" value="Reset">'+
        '<input id="g1" type="text" placeholder="背景用の画像URLを入力">'+
        '<input id="g2" type="submit" value="Set URL">'+
        '<input id="g3" type="submit">'+
        '<div id="wper1"><input id="g4" type="number" min="0" max="100"></div>'+
        '<div id="wper2"><input id="g5" type="number" min="0" max="100"></div>'+
        '<input id="g6" type="submit">'+
        '<input id="g7" type="submit">'+
        '<div id="panel3">'+
        '<input id="c0" type="submit" value="Reset">'+
        '<input id="c1" type="text" placeholder="背景色コード" autocomplete="off">'+
        '<div id="wper3"><input id="c2" type="number" min="1" max="100"></div>'+
        '<input id="c3" type="submit" value="▼">'+
        '<input id="c4" type="submit" value="Set Color">'+
        '</div>'+
        '<input id="c5" type="color">';

    let css=
        '#panel2 { position: fixed; bottom: 110px; left: calc(50% - 490px); width: 980px; '+
        'padding: 15px 0 15px 20px; background: rgba(0, 95, 86, 0.8); '+
        'border: 2px solid #fff; border-radius: 4px; z-index: 10;} '+
        '#panel2 input { position: relative; font: normal 16px meiryo; color: #000; '+
        'margin-right: 12px; padding: 4px 6px 2px; } '+
        '#g1 { width: 300px; } #g3, #g6, #g7 { width: 70px; } #g5 { margin-left: -10px; } '+
        '#g4, #g5 { width: 54px; text-align: center; padding: 4px 5px 2px 1px !important; '+
        'filter: brightness(0.93); } '+
        '#wper1, #wper2 { position: relative; display: inline-block; } '+
        '#wper1::after, #wper2::after { content: "%"; position: absolute; right: 17px; top: 3px; '+
        'font-size: 16px; width: 20px; padding-top: 4px; background: #ededed; } '+
        '#g4:hover, #g5:hover { z-index: 1; } '+
        '#panel3 { position: absolute; top: 15px; left: 580px; }'+
        '#panel3 input { font: normal 16px meiryo; color: #000; '+
        'margin-right: 12px; padding: 4px 6px 2px; } '+
        '#c1 { width: 100px; } '+
        '#wper3 { position: relative; display: inline-block; } '+
        '#wper3::after { content: "%"; position: absolute; right: 17px; top: 3px; '+
        'font-size: 16px; width: 20px; padding-top: 4px; background: #ededed; } '+
        '#c2 { width: 54px; text-align: center; padding: 4px 5px 2px 1px !important; '+
        'filter: brightness(0.93); position: relative; } #c2:hover { z-index: 1; } '+
        '#c3 { width: 24px; text-indent: -4px; color: #999 !important;} '+
        '#c5 { position: absolute !important; left: calc(50% + 50px); z-index: -1; '+
        'height: 0; width: 0; padding: 0 !important; opacity: 0;  bottom: 60px; }';

    if(ua==1){
        css+='#wper1::after, #wper2::after, #wper3::after { top: 4px; } '+
            '#g1, #c1 { border: 2px solid #ccc; } #g4, #g5, #c2 { height: 28px; } '+
            '#c3 { text-indent: -5px; }'; }

    let style=document.createElement('style');
    style.innerHTML=css;
    panel.appendChild(style);

    let panel2=document.querySelector('#panel2');
    if(!panel2){
        document.querySelector('body').appendChild(panel); }} // panel2_disp()


function panel2_remove(){
    let panel2=document.querySelector('#panel2');
    if(panel2){
        panel2.remove(); }}



function active_disp(){
    let b1=document.querySelector('#b1');
    let b2=document.querySelector('#b2');
    let b0=document.querySelector('#b0');
    if(active==-1){
        b1.style.boxShadow='none';
        b1.style.outline='none';
        b2.style.boxShadow='none';
        b0.style.boxShadow='none'; }
    if(active==1){
        b1.style.boxShadow='0 0 0 4px #fff';
        b1.style.outline='2px dotted #000';
        b2.style.boxShadow='none';
        b0.style.boxShadow='none'; }
    if(active==2){
        b1.style.boxShadow='none';
        b1.style.outline='none';
        b2.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
        b0.style.boxShadow='none'; }
    if(active==0){
        b1.style.boxShadow='none';
        b1.style.outline='none';
        b2.style.boxShadow='none';
        b0.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff'; }}



function setup_disp(){
    let b1=document.querySelector('#b1');
    let b2=document.querySelector('#b2');
    if(b_param[1][0]==1){
        b1.value='🌐 Html　'; }
    else{
        b1.value='　Html　'; }
    if(b_param[2][0]==1){
        b2.value='🌐 Body　'; }
    else{
        b2.value='　Body　'; }}



function coordinate(){
    let b1=document.querySelector('#b1');
    let b2=document.querySelector('#b2');
    let b0=document.querySelector('#b0');
    let a1=document.querySelector('#a1');
    let a2=document.querySelector('#a2');
    let upload=document.querySelector('#upload');
    let get_css=document.querySelector('#get_css');
    let css_edit=document.querySelector('#css_edit');

    setup_disp();
    check_back_neo();


    b0.onclick=function(){
        if(active==1){
            un_view(1);
            if(b_param[1][0]==0){ // 編集フラグ 0
                undo_check(1); }}
        if(active==2){
            un_view(2);
            if(b_param[2][0]==0){ // 編集フラグ 0
                undo_check(2); }}

        if(active!=0){
            active=0; //「Round Selector」ON
            active_disp();
            hk=last_hk;
            view(hk); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(0);

                if(b_param[hk][2]==0 && b_param[hk][8]==0){ // ユーザー背景設定がない場合
                    b_param[hk][0]=0; // 編集フラグ 0
                    undo_check(hk); }
                else { // ユーザー背景設定があると 編集フラグ1
                    b_param[hk][0]=1; }} // 編集フラグ1
            else{
                active=-1; //「Round Selector」OFF
                active_disp();
                last_hk=hk;
                un_view(hk); }}}



    b1.onclick=function(){
        if(active==0){ // b0「Round Selector」が起動していたらOFFに
            last_hk=hk;
            un_view(hk); }
        if(active==2){
            un_view(2);
            if(b_param[2][0]==0){ // 編集フラグ 0
                undo_check(2); }}

        if(active!=1){
            active=1;
            active_disp();
            hk=1;
            view(1);
            check_back(1); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(1);

                if(b_param[1][2]==0 && b_param[1][8]==0){ // ユーザー背景設定がない場合
                    b_param[1][0]=0; // 編集フラグ 0
                    undo_check(1); }
                else { // ユーザー背景設定があると 編集フラグ1
                    b_param[1][0]=1; }// 編集フラグ1
                setup_disp(); }
            else{
                active=-1;
                active_disp();
                un_view(1);

                if(b_param[1][0]==0){ // 編集フラグ 0
                    undo_check(1); }}}}



    b2.onclick=function(){
        if(active==0){ // b0「Round Selector」が起動していたらOFFに
            last_hk=hk;
            un_view(hk); }
        if(active==1){
            un_view(1);
            if(b_param[1][0]==0){ // 編集フラグ 0
                undo_check(1); }}

        if(active!=2){
            active=2;
            active_disp();
            hk=2;
            view(2);
            check_back(2); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(2);

                if(b_param[2][2]==0 && b_param[2][8]==0){ // ユーザー背景設定がない場合
                    b_param[2][0]=0; // 編集フラグ 0
                    undo_check(2); }
                else { // ユーザー画像があると 編集フラグ1
                    b_param[2][0]=1; } // 編集フラグ1
                setup_disp(); }
            else{
                active=-1;
                active_disp();
                un_view(2);

                if(b_param[2][0]==0){ // 編集フラグ 0
                    undo_check(2); }}}}



    a1.onclick=function(){
        if(active>-1){
            show_size(hk); }}



    a2.onclick=function(){
        if(hk>2){
            ex_selector(hk); }}



    upload.onclick=function(){
        window.open('https://blog.ameba.jp/ucs/upload/srvimagelist.do',
                    null, 'top=50,left=100,width=800,height=640'); }



    get_css.onclick=function(){
        total_css(); }



    css_edit.onclick=function(){
        let open_url='https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do?sco';
        window.open(open_url, null, 'top=50,left=100,width=880,height=920'); }

} // coordinate()



function check_back_neo(){
    let b0=document.querySelector('#b0');
    b0.value='Round Selector　'+ hk +'/'+ (b_param.length-1);

    if(active > -1){
        view(hk); } // 初期表示

    let press=0; // キーのチャタリング防止フラグ


    document.addEventListener('keydown', round_key); // キーコントロール検知
    document.addEventListener('keyup', reset_press); // キーの押下後を検知

    function round_key(event){
        if(event.keyCode==38){ //「↑」
            event.preventDefault();
            event.stopImmediatePropagation(); // 絶対に必要
            if(active==0){
                back(); }}
        if(event.keyCode==40){ //「↓」
            event.preventDefault();
            event.stopImmediatePropagation(); // 絶対に必要
            if(active==0){
                forward(); }}
        if(event.keyCode==32 && event.ctrlKey==false){ //「Space」で解除
            event.preventDefault();
            event.stopImmediatePropagation(); // 絶対に必要
            if(active>-1 && press==0){
                press=1;
                edit_in_out(); }} // 背景画像のアレンジ
        if(event.keyCode==32 && event.ctrlKey==true){ //「Ctrl + Space」背景削除を戻す
            event.preventDefault();
            event.stopImmediatePropagation(); // 絶対に必要
            if(active>-1 && press==0){
                press=1;
                edit_delete_back(); }}} // round_key()


    function reset_press(event){
        event.preventDefault();
        event.stopImmediatePropagation(); // 絶対に必要
        press=0; }


    function back(){
        if(hk>3 && g_open==0){
            un_view(hk);
            hk-=1;
            view(hk); }}


    function forward(){
        if(hk<b_param.length-1 && g_open==0){
            un_view(hk);
            hk+=1;
            view(hk); }}


    function edit_in_out(){
        if(g_open==0){
            g_open=1;
            edit_view(hk);
            impose(hk); }
        else if(g_open==1){ // edit_inを終了時にフラグ決定する
            g_open=0;
            undo_impose(hk);
            view(hk);
            if(b_param[hk][2]==0 && b_param[hk][8]==0){ // ユーザー背景設定がない場合
                b_param[hk][0]=0; // 編集フラグ 0
                undo_check(hk); }
            else { // ユーザー背景設定があると 編集フラグ1
                b_param[hk][0]=1; }}} // 編集フラグ1


    function edit_delete_back(){
        undo_check(hk); // 既存指定のタグがあれば全削除
        if(b_param[hk][0]==0){
            b_param[hk][0]=1; // 背景設定が無い状態で「指定」有りにする
            b_param[hk][2]=0; // ユーザーの背景設定があれば削除
            b_param[hk][3]=0; // 以下背景データベースをリセット
            b_param[hk][4]=50;
            b_param[hk][5]=50;
            b_param[hk][6]=0;
            b_param[hk][7]=0;
            b_param[hk][8]=0; // ユーザーの背景設定があれば削除
            b_param[hk][9]=100;
            b_param[hk][10]=0;
            set_skintag2(hk); } // 実際の背景画像をクリア指定のタグを配置
        else if(b_param[hk][0]==1){ // クリア指定を解除
            b_param[hk][0]=0; // 通常の指定無しの状態にする → 元表示の再現
            b_param[hk][2]=0; // ユーザーの背景設定があれば削除（編集状態の場合）
            b_param[hk][3]=0; // 以下背景データベースをリセット（編集状態の場合）
            b_param[hk][4]=50;
            b_param[hk][5]=50;
            b_param[hk][6]=0;
            b_param[hk][7]=0;
            b_param[hk][8]=0; // ユーザーの背景設定があれば削除（編集状態の場合）
            b_param[hk][9]=100;
            b_param[hk][10]=0; }
        setup_disp();
        if(g_open==1){
            g_open=0;
            view(hk);
            undo_impose(hk); }}

} // check_back_neo()



function view(hk){
    let pseudo=0;
    let selector=b_param[hk][1];
    if(selector.includes('::before')){
        pseudo=1;
        selector=selector.replace('::before', ''); }

    if(selector!=0){
        let target=document.querySelectorAll(selector);
        if(target.length!=0){
            for(let k=0; k<target.length; k++){
                if(hk>2){
                    if(pseudo==0){
                        target[k].style.boxShadow='rgb(33, 150, 243) 0 0 0 3px inset, '+
                            'rgb(255, 255, 255) 0 0 0 4px inset, '+
                            'rgba(0, 160, 255, 0.4) 0 0 0 200vw inset'; }
                    else {
                        target[k].style.boxShadow='rgb(255, 150, 0) 0 0 0 3px inset, '+
                            'rgb(255, 255, 255) 0 0 0 4px inset, '+
                            'rgba(0, 160, 255, 0.4) 0 0 0 200vw inset'; }
                    let b0=document.querySelector('#b0');
                    b0.value='Round Selector　'+ hk +'/'+ (b_param.length-1); }
                if(hk==2){
                    target[k].style.boxShadow='rgb(0, 160, 160) 0 0 0 5px inset, '+
                        'rgb(255, 255, 255) 0 0 0 6px inset, '+
                        'rgba(0, 160, 255, 0.4) 0 0 0 200vw inset'; }
                if(hk==1){
                    target[k].style.boxShadow='rgb(0, 0, 0) 0 0 0 5px inset, '+
                        'rgb(255, 255, 255) 0 0 0 6px inset, '+
                        'rgba(0, 160, 255, 0.4) 0 0 0 200vw inset'; }}}}}


function un_view(hk){
    let pseudo=0;
    let selector=b_param[hk][1];
    if(selector.includes('::before')){
        pseudo=1;
        selector=selector.replace('::before', ''); }

    if(selector!=0){
        let target=document.querySelectorAll(selector);
        if(target.length!=0){
            for(let k=0; k<target.length; k++){
                target[k].style.boxShadow='none'; }}}}


function edit_view(hk){
    let pseudo=0;
    let selector=b_param[hk][1];
    if(selector.includes('::before')){
        pseudo=1;
        selector=selector.replace('::before', ''); }

    if(selector!=0){
        let target=document.querySelectorAll(selector);
        if(target.length!=0){
            for(let k=0; k<target.length; k++){
                if(hk>2){
                    if(pseudo==0){
                        target[k].style.boxShadow='rgb(33, 150, 243) 0 0 0 3px inset, '+
                            'rgb(255, 255, 255) 0 0 0 4px inset'; }
                    else{
                        target[k].style.boxShadow='rgb(255, 150, 0) 0 0 0 3px inset, '+
                            'rgb(255, 255, 255) 0 0 0 4px inset'; }}
                if(hk==2){
                    target[k].style.boxShadow='rgb(0, 160, 160) 0 0 0 5px inset, '+
                        'rgb(255, 255, 255) 0 0 0 6px inset'; }
                if(hk==1){
                    target[k].style.boxShadow='rgb(0, 0, 0) 0 0 0 5px inset, '+
                        'rgb(255, 255, 255) 0 0 0 6px inset'; }}}}}



function check_back(n){
    set_skintag2(n);
    set_skintag3(n);
    set_skintag4(n);
    set_skintag6(n);
    set_skintag7(n); }

//    set_skintag8(n); } // ボタン「n」の要素に #skin_n2～#skin_n8 のstyleタグを生成し適用


function undo_check(n){
    remove_skintag(n, 2);
    remove_skintag(n, 3);
    remove_skintag(n, 4);
    remove_skintag(n, 6);
    remove_skintag(n, 7);
    remove_skintag(n, 8); } // 全ての #skin_n2～#skin_n8 のstyleタグを削除


function remove_skintag(n, idn){
    let id_selector='#skin_'+ String(n*10+idn);
    if(document.querySelector(id_selector)){
        document.querySelector(id_selector).remove(); }}



function impose(n){
    panel2_disp();

    let g0=document.querySelector('#g0');
    let g1=document.querySelector('#g1');
    let g2=document.querySelector('#g2');
    let g3=document.querySelector('#g3');
    let g4=document.querySelector('#g4');
    let g5=document.querySelector('#g5');
    let g6=document.querySelector('#g6');
    let g7=document.querySelector('#g7');
    let wper1=document.querySelector('#wper1');
    let wper2=document.querySelector('#wper2');
    let panel2=document.querySelector('#panel2');
    let c0=document.querySelector('#c0');
    let c1=document.querySelector('#c1');
    let c2=document.querySelector('#c2');
    let c3=document.querySelector('#c3');
    let c4=document.querySelector('#c4');
    let c5=document.querySelector('#c5');
    let wper3=document.querySelector('#wper3');


    let n_agent;
    if(n>2){
        n_agent=0; }
    else{
        n_agent=n; }
    let b_id='#b'+ n_agent;
    document.querySelector(b_id).style.background='#3bff5c';
    document.querySelector(b_id).style.borderStyle='solid';

    for(let k=0; k<3; k++){
        if(k!=n_agent){
            let b_id='#b'+k;
            document.querySelector(b_id).disabled=true; }}


    g1.value='';
    g1.disabled=false;
    g2.disabled=false;
    g3.disabled=true;
    g4.disabled=true;
    g5.disabled=true;
    g6.disabled=true;
    g7.disabled=true;

    g3.style.opacity='0';
    wper1.style.opacity='0';
    wper2.style.opacity='0';
    g6.style.opacity='0';
    g7.style.opacity='0';

    c1.value='';
    c2.disabled=true;
    wper3.style.opacity='0';
    c3.value='▼';
    c3.disabled=true;
    c3.style.opacity='0';


    if(b_param[n][2]!=0){
        g1.value=b_param[n][2]; // SRCを表示
        g1.disabled=true;
        g1.style.width='40px';
        g2.disabled=true;
        g2.style.position='absolute';
        g2.style.opacity='0';
        g3.disabled=false;
        g4.disabled=false;
        g5.disabled=false;
        g6.disabled=false;
        g7.disabled=false;

        g3.style.opacity='1';
        wper1.style.opacity='1';
        wper2.style.opacity='1';
        g6.style.opacity='1';
        g7.style.opacity='1';

        if(b_param[n][3]==0){ // Size値
            g3.value='Size A'; }
        else if(b_param[n][3]==1){
            g3.value='Size B'; }
        else if(b_param[n][3]==2){
            g3.value='Size C'; }
        g4.value=b_param[n][4]; // Psition値
        g5.value=b_param[n][5]; // Psition値
        if(b_param[n][6]==0){ // Repeat値
            g6.value='Repeat'; }
        else{
            g6.value='No Rep'; }
        if(b_param[n][7]==0){ // Fix Position値
            g7.value='Not Fix'; }
        else{
            g7.value='Fixed'; }}

    if(b_param[n][8]!=0){
        c1.value=b_param[n][8]; // カラー値
        c2.disabled=false;
        wper3.style.opacity='1';
        c2.value=b_param[n][9]; // 透過度
        c3.disabled=false;
        c3.style.opacity='1';
        if(b_param[n][10]==0){
            c3.value='▼'; }
        else{
            c3.value='▲'; }}

    check_back(n); // 全ての設定値を適用してページを再表示



    g0.onclick=function(){ // ユーザー画像設定をリセット
        g1.value='';
        g1.disabled=false;
        g1.style.width='300px';
        g2.disabled=false;
        g2.style.position='relative';
        g2.style.opacity='1';
        g3.disabled=true;
        g4.disabled=true;
        g5.disabled=true;
        g6.disabled=true;
        g7.disabled=true;

        g3.style.opacity='0';
        wper1.style.opacity='0';
        wper2.style.opacity='0';
        g6.style.opacity='0';
        g7.style.opacity='0';

        b_param[n][2]=0; // SRCリセット
        b_param[n][3]=0; // Size値リセット
        b_param[n][4]=50;
        b_param[n][5]=50;
        b_param[n][6]=0; // Repeat値リセット
        b_param[n][7]=0; // Fix Position値リセット
        img_param_disp();

        set_skintag2(n); // 画像・内枠線表示のリセット
        remove_skintag(n, 3);
        remove_skintag(n, 4);
        remove_skintag(n, 6);
        remove_skintag(n, 7); }



    g2.onclick=function(){
        if(b_param[n][2]==0 && g1.value!=''){ // Newの状態のみ入力可
            b_param[n][2]=g1.value; // SRCを取得
            g1.disabled=true;
            g1.style.width='40px';
            g2.disabled=true;
            g2.style.position='absolute';
            g2.style.opacity='0';
            g3.disabled=false;
            g4.disabled=false;
            g5.disabled=false;
            g6.disabled=false;
            g7.disabled=false;

            g3.style.opacity='1';
            wper1.style.opacity='1';
            wper2.style.opacity='1';
            g6.style.opacity='1';
            g7.style.opacity='1';

            img_param_disp();
            set_skintag2(n);
            set_skintag4(n); }}



    g3.onclick=function(){
        if(b_param[n][3]==0){
            b_param[n][3]=1;
            g3.value='Size B'; }
        else if(b_param[n][3]==1){
            b_param[n][3]=2;
            g3.value='Size C'; }
        else if(b_param[n][3]==2){
            b_param[n][3]=0;
            g3.value='Size A'; }
        g4.value=50; // position値をリセット
        b_param[n][4]=50;
        g5.value=50; // position値をリセット
        b_param[n][5]=50;

        let target=document.querySelector(b_param[n][1]);
        target.style.backgroundPosition='50% 50%';
        set_skintag3(n);
        set_skintag4(n); }



    g4.addEventListener('input', function(event){
        event.stopPropagation();
        b_param[n][4]=g4.value;
        let posx=g4.value +'%';

        let target=document.querySelector(b_param[n][1]);
        target.style.backgroundPositionX=posx; });


    g4.addEventListener('change', function(event){
        event.stopPropagation();
        set_skintag4(n); });



    g5.addEventListener('input', function(event){
        event.stopPropagation();
        b_param[n][5]=g5.value;
        let posy=g5.value +'%';

        let target=document.querySelector(b_param[n][1]);
        target.style.backgroundPositionY=posy; });


    g5.addEventListener('change', function(event){
        event.stopPropagation();
        set_skintag4(n); });



    g6.onclick=function(){
        if(b_param[n][6]==0){
            b_param[n][6]=1;
            g6.value='No Rep'; }
        else{
            b_param[n][6]=0;
            g6.value='Repeat'; }
        set_skintag6(n); }



    g7.onclick=function(){
        if(b_param[n][7]==0){
            b_param[n][7]=1;
            g7.value='Fixed'; }
        else{
            b_param[n][7]=0;
            g7.value='Not Fix'; }
        set_skintag7(n); }



    c0.onclick=function(){ // 背景色カラー設定のリセット
        c1.value='';
        b_param[n][8]=0; // 背景色カラー値リセット
        c2.value=100;
        c2.disabled=true;
        wper3.style.opacity='0';
        b_param[n][9]=100; // 背景色透過度リセット

        c3.disabled=true;
        c3.style.opacity='0';
        //        c3.value='▼';
        //        b_param[n][10]=0; // 優先設定はリセットしない

        let target=document.querySelector(b_param[n][1]);
        target.style.backgroundColor=c1.value;
        remove_skintag(n, 8); }



    c1.onclick=function(event){
        event.stopPropagation();
        if(c1.value==0){
            b_param[n][8]='#ffffff';
            set_skintag8(n);
            color_dialogue(); }}



    c2.addEventListener('input', function(event){
        event.stopPropagation();
        let transparency=((255*c2.value)/100).toString(16).substr(0, 2);
        if(transparency.includes('.')){
            transparency='0'+ transparency.substr(0, 1)}
        c1.value=c1.value.substr(0, 7) + transparency;
        b_param[n][8]=c1.value;

        let target=document.querySelector(b_param[n][1]);
        target.style.backgroundColor=c1.value; });


    c2.addEventListener('change', function(event){
        event.stopPropagation();
        set_skintag8(n); });



    c3.onclick=function(event){
        event.stopPropagation();
        if(b_param[n][2]==0){
            if(b_param[n][10]==0){
                b_param[n][10]=1;
                c3.value='▲'; }
            else{
                b_param[n][10]=0;
                c3.value='▼'; }
            remove_skintag(n, 2);
            set_skintag8(n); }}



    c4.onclick=function(event){
        event.stopPropagation();
        if(c1.value.length==7 || c1.value==''){
            color_dialogue(); }
        else if(c1.value.length==9){
            c1.value=c1.value.substr(0, 7);
            color_dialogue(); }}



    c5.addEventListener('input', function(event){
        event.stopPropagation();
        c1.value=c5.value;
        b_param[n][8]=c5.value;

        let target=document.querySelector(b_param[n][1]);
        target.style.backgroundColor=c5.value; });


    c5.addEventListener('change', function(event){
        event.stopPropagation();
        set_skintag8(n); });



    function color_dialogue(){
        c4.style.pointerEvents='none';
        if(c1.value==''){
            c5.value='#ffffff'; }
        else{
            c5.value=c1.value; }
        b_param[n][8]=c1.value;
        c2.value=100;
        b_param[n][9]=100;
        c2.disabled=false;
        wper3.style.opacity='1';
        if(b_param[n][10]==0){
            c3.value='▼'; }
        else{
            c3.value='▲'; }
        c3.disabled=false;
        c3.style.opacity='1';

        let target=document.querySelector(b_param[n][1]);
        target.style.backgroundColor=c5.value;

        c5.style.bottom='330px';
        setTimeout(()=>{
            c5.click();
        }, 40); }



    panel2.addEventListener('mouseup', function(event){
        event.stopPropagation();
        c5.style.bottom='60px';
        c4.style.pointerEvents='auto'; });



    function img_param_disp(){
        if(b_param[n][3]==0){ // Size値
            g3.value='Size A'; }
        else if(b_param[n][3]==1){
            g3.value='Size B'; }
        else if(b_param[n][3]==2){
            g3.value='Size C'; }
        g4.value=b_param[n][4]; // Psition値
        g5.value=b_param[n][5]; // Psition値
        if(b_param[n][6]==0){ // Repeat値
            g6.value='Repeat'; }
        else{
            g6.value='No Rep'; }
        if(b_param[n][7]==0){ // Fix Position値
            g7.value='Not Fix'; }
        else{
            g7.value='Fixed'; }}

} // impose()



function ex_selector(hk){
    let page_html=document.querySelector('html');
    let class_selector=page_html.className.split(' ')[0]; //「column」クラスを取得
    if(class_selector){
        if(!b_param[hk][1].includes(class_selector)){ // 既に追加していない事が条件
            let ex_sel='.'+ class_selector +' '+ b_param[hk][1];
            b_param[hk][1]=ex_sel; }}
    check_back(hk); }



function undo_impose(n){
    panel2_remove();
    g_open=0;

    let n_agent;
    if(n>2){
        n_agent=0; }
    else{
        n_agent=n; }
    let b_id='#b'+ n_agent;
    document.querySelector(b_id).style.background='';
    document.querySelector(b_id).style.borderStyle='';
    for(let k=0; k<3; k++){
        let b_id='#b'+k;
        document.querySelector(b_id).disabled=false; }}



function show_size(n){
    let area;
    area=document.querySelector(b_param[n][1]);
    alert(
        '背景画像が表示される範囲のサイズ\n\n　　'+
        area.getBoundingClientRect().width
        +' × '+ area.getBoundingClientRect().height +'\n\n'+
        '要素がウインドウ幅全体に拡がる場合は\n'+
        '背景幅も変化する事に注意してください'); }



function set_skintag2(n){
    let htm=document.querySelector('html');
    let css2='';
    let css8='';

    if(b_param[n][2]==0 && b_param[n][8]==0){ // ユーザー背景設定がない場合
        if(n!=1){ // プリセット「1」以外
            css2+=b_param[n][1] +' { background: none; }'; } // 元背景を非表示
        else{ // プリセット「1」
            css2+=b_param[n][1] +' { background: #fff; background-image: '+
                'linear-gradient(45deg, #ddd 25%, transparent 25%, '+
                'transparent 75%, #ddd 75%, #ddd), '+
                'linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 75%, '+
                '#ddd 75%, #ddd); background-size: 10px 10px; }'; }} // 特殊背景表示
    else{ // ユーザー背景設定がある場合 その内容を表示
        if(b_param[n][2]!=0){
            css2+=b_param[n][1] +' { background: url('+ b_param[n][2] +'); }'; }
        if(b_param[n][8]!=0){
            if(b_param[n][2]==0){ // ユーザー背景画像が無い場合
                if(b_param[n][10]==0){ //非優先設定なし（デフォルト）
                    css8+=b_param[n][1] +' { background: none; '+
                        'background-color: '+ b_param[n][8] +'; }'; }
                else{ // 非優先設定の場合
                    css8+=b_param[n][1] +' { background-color: '+ b_param[n][8] +'; }'; }}
            else{ // ユーザー背景画像がある場合
                css8+=b_param[n][1] +' { background-color: '+ b_param[n][8] +'; }'; }}}

    let style2=document.createElement('style');
    let s_id2='skin_'+ String(n*10+2);
    style2.setAttribute('id', s_id2);
    style2.innerHTML=css2;
    if(document.querySelector('#'+s_id2)){
        document.querySelector('#'+s_id2).remove(); }
    htm.appendChild(style2);

    if(css8!=''){
        let style8=document.createElement('style');
        let s_id8='skin_'+ String(n*10+8);
        style8.setAttribute('id', s_id8);
        style8.innerHTML=css8;
        if(document.querySelector('#'+s_id8)){
            document.querySelector('#'+s_id8).remove(); }
        htm.appendChild(style8); }}



function set_skintag3(n){
    let htm=document.querySelector('html');
    let css; // Size値指定

    if(b_param[n][3]==0){
        css=b_param[n][1] +' { background-size: ""; }'; }
    if(b_param[n][3]==1){
        css=b_param[n][1] +' { background-size: contain; }'; }
    if(b_param[n][3]==2){
        css=b_param[n][1] +' { background-size: cover; }'; }

    let style=document.createElement('style');
    let s_id='skin_'+ String(n*10+3);
    style.setAttribute('id', s_id);
    style.innerHTML=css;
    if(document.querySelector('#'+s_id)){
        document.querySelector('#'+s_id).remove(); }
    htm.appendChild(style); }



function set_skintag4(n){
    let htm=document.querySelector('html');

    let css;
    let posx=b_param[n][4];
    let posy=b_param[n][5];
    css=b_param[n][1] +' { background-position: '+ posx +'% '+ posy +'%; }';

    let style=document.createElement('style');
    let s_id='skin_'+ String(n*10+4);
    style.setAttribute('id', s_id);
    style.innerHTML=css;
    if(document.querySelector('#'+s_id)){
        document.querySelector('#'+s_id).remove(); }
    htm.appendChild(style); }



function set_skintag6(n){
    if(b_param[n][6]==1){
        let htm=document.querySelector('html');

        let css;
        css=b_param[n][1] +' { background-repeat: no-repeat; }';

        let style=document.createElement('style');
        let s_id='skin_'+ String(n*10+6);
        style.setAttribute('id', s_id);
        style.innerHTML=css;
        if(document.querySelector('#'+s_id)){
            document.querySelector('#'+s_id).remove(); }
        htm.appendChild(style); }
    else{
        let s_id='skin_'+ String(n*10+6);
        if(document.querySelector('#'+s_id)){
            document.querySelector('#'+s_id).remove(); }}}



function set_skintag7(n){
    if(b_param[n][7]==1){
        let htm=document.querySelector('html');
        let css;
        css=b_param[n][1] +' { background-attachment: fixed; }';

        let style=document.createElement('style');
        let s_id='skin_'+ String(n*10+7);
        style.setAttribute('id', s_id);
        style.innerHTML=css;
        if(document.querySelector('#'+s_id)){
            document.querySelector('#'+s_id).remove(); }
        htm.appendChild(style); }
    else{
        let s_id='skin_'+ String(n*10+7);
        if(document.querySelector('#'+s_id)){
            document.querySelector('#'+s_id).remove(); }}}



function set_skintag8(n){
    if(b_param[n][8]!=0){
        let htm=document.querySelector('html');
        let css8='';

        if(b_param[n][2]==0){ // ユーザー背景画像が無い場合
            if(b_param[n][10]==0){ //非優先設定なし（デフォルト）
                css8+=b_param[n][1] +' { background: none; '+
                    'background-color: '+ b_param[n][8] +'; }'; }
            else{ // 非優先設定の場合
                css8+=b_param[n][1] +' { background-color: '+ b_param[n][8] +'; }'; }}
        else{ // ユーザー背景画像がある場合
            css8+=b_param[n][1] +' { background-color: '+ b_param[n][8] +'; }'; }

        let style=document.createElement('style');
        let s_id='skin_'+ String(n*10+8);
        style.setAttribute('id', s_id);
        style.innerHTML=css8;
        if(document.querySelector('#'+s_id)){
            document.querySelector('#'+s_id).remove(); }
        htm.appendChild(style); }
    else{
        let s_id='skin_'+ String(n*10+8);
        if(document.querySelector('#'+s_id)){
            document.querySelector('#'+s_id).remove(); }}}



function total_css(){
    let css='';

    for(let k=1; k<b_param.length; k++){
        if(b_param[k][0]==1 && b_param[k][1]!=0){
            if(b_param[k][2]==0){
                if(b_param[k][8]==0){ // 元設定を無効にした背景透過指定
                    css+=b_param[k][1] +' { \n  background: none;\n}\n\n'; }
                else{ // ユーザー背景色を指定
                    if(b_param[k][10]==0){ //非優先設定なし（デフォルト）元設定を上書き
                        css+=b_param[k][1] +' { \n  background: none;\n'+
                            '  background-color: '+ b_param[k][8] +';\n}\n\n'; }
                    else{ // 非優先設定の場合 元設定を残す
                        css+=b_param[k][1] +' { \n  background-color: '+ b_param[k][8] +';\n}\n\n'; }}}

            if(b_param[k][2]!=0){ // ユーザー背景画像を指定
                css+=b_param[k][1] +' { \n  background: url('+ b_param[k][2] +');\n';
                if(b_param[k][3]==1){
                    css+='  background-size: contain;\n'; }
                else if(b_param[k][3]==2){
                    css+='  background-size: cover;\n'; }
                let posx=b_param[k][4];
                let posy=b_param[k][5];
                css+='  background-position: '+ posx +'% '+ posy +'%;\n';
                if(b_param[k][6]==1){
                    css+='  background-repeat: no-repeat;\n'; }
                if(b_param[k][7]==1){
                    css+='  background-attachment: fixed;\n'; }
                if(b_param[k][8]!=0){ // ユーザー背景色を指定
                    css+='  background-color: '+ b_param[k][8] +';\n'; }
                css+='}\n\n'; }
        }}

    copyClipboard(css);
    alert(
        ' 🟦 現在の背景画像の設定をクリップボードにコピーしました\n\n'+
        '　　CSS編集画面のコード末尾にペーストして「保存」すると\n'+
        '　　現在の背景画像のアレンジがブログページに反映します');

} // total_css()



function copyClipboard(str){ // クリップボードにコピーする関数
    let tmp_area=document.createElement("textarea");
    tmp_area.textContent=str;
    let body=document.getElementsByTagName("body")[0];
    body.appendChild(tmp_area);
    tmp_area.select();
    let retVal=document.execCommand('copy');
    body.removeChild(tmp_area);
    return retVal; }



window.addEventListener('DOMContentLoaded', function(){
    let upl_index=document.querySelector('#uploadIndex');
    if(upl_index){ // 画像フォルダウインドウの場合に動作する
        upload_w(); }});


function upload_w(){
    let css=
        '#globalHeader, #ucsHeader, .l-ucs-sidemenu-area, '+
        '.selectImg .numLabel, label[for*="image_title"], input.inputText, '+
        'input[type="checkbox"], #imageList .actionControl, #moreUpload, '+
        '#imageList .imageBox .btnDefault, #mailBlog, #ucsMainRight, '+
        '#footerAd, #globalFooter { display: none !important; } '+
        '#ucsContent { max-width: 770px; background: #fff; } '+
        '#ucsMain { font-size: 16px; background: none; } '+
        '#ucsMainLeft { width: 740px !important; } '+
        '#uploadImgTitle h2 { font-size: 16px; padding-top: 4px; } '+
        '.comment { font-size: 16px; width: 16em; overflow: hidden; '+
        'white-space: nowrap; } '+
        '.selectImg:not(:nth-child(5)) { display: none; } '+
        '.selectImg .fileUp { width: 500px; padding: 10px; font-size: 16px; } '+
        'input#upload { font-size: 16px; padding: 1px 0 0; } '+
        '.imageBox { width: 187px; margin: 0; } '+
        '.imageBox .thickboxEditTitle { display: block; overflow: hidden; '+
        'width: 175px; } '+
        '.imageBox dt label { color: transparent; } '+
        '.imageBox img { height: 130px; width: auto; } '+
        'html { overflow-y: scroll !important; }';

    let style=document.createElement('style');
    style.setAttribute('id', 'skin_upload');
    style.innerHTML=css;

    let skin_upload=document.querySelector('#skin_upload');
    if(!skin_upload){
        document.querySelector('html').appendChild(style); }

    let target3=document.querySelector('form[name="imageListForm"]');
    let monitor3=new MutationObserver(imagelist);
    monitor3.observe(target3, { childList: true });

    imagelist();

    function imagelist(){
        let imagebox_img=document.querySelectorAll('.imageBox img');
        for(let k=0; k<imagebox_img.length; k++){
            imagebox_img[k].parentNode.removeAttribute('href');
            let rsrc=imagebox_img[k].getAttribute('src');
            let src=rsrc.substring(0, rsrc.indexOf("?"));
            imagebox_img[k].setAttribute('src', src);

            imagebox_img[k].addEventListener('mousedown', function(event){
                event.stopImmediatePropagation();
                let gsrc=imagebox_img[k].getAttribute('src');
                copyClipboard(gsrc);

                imagebox_img[k].parentNode.style.outline='3px solid red';
                imagebox_img[k].parentNode.style.outlineOffset='-3px';
                setTimeout(()=>{
                    imagebox_img[k].parentNode.style.outline='none';
                }, 2000); }); }}
} // upload_w()



window.addEventListener('DOMContentLoaded', function(){
    let editCss=document.querySelector('#editCss');
    if(editCss){ //「CSSの編集」の画面で動作する
        edit_w();
        editcss(); }});


function edit_w(){
    let css=
        '#globalHeader, .l-ucs-sidemenu-area, #ucsMainRight, '+
        'ul.editTools , .infoArea , #footerAd, #globalFooter '+
        '{ display: none !important; } '+
        '#ucsContent { max-width: 770px; background: #fff; } '+
        '#ucsMain { font-size: 16px; background: none; } '+
        '#ucsMainLeft { width: 740px !important; } '+
        '.moreLink a { font-weight: bold; color: #000; } '+
        '.textInputArea .textarea1 { width: 715px !important; height: 320px; '+
        'font-size: 16px; } .limText { margin: 0; } '+
        'html { overflow-y: scroll !important; } '+
        '#editCss #notes { font-size: 15px; } '+
        '#editCss #myframe { display: none; } '+
        '#editCss #contentsForm textarea { width: 720px !important; '+
        'height: 510px; } '+
        '#editCss .actionControl .msg { margin: -30px 0 10px; } ';

    let style=document.createElement('style');
    style.setAttribute('id', 'edit_w');
    style.innerHTML=css;

    let edit_w=document.querySelector('#edit_w');
    if(!edit_w){
        document.querySelector('html').appendChild(style); }
} // edit_w()



function editcss(){
    let myUcsPage=document.querySelector('#myUcsPage');
    myUcsPage.innerHTML=
        '<input id="blog" type="submit" value="ブログ画面">';

    let css=
        '.textarea1 { font-size: 16px; } '+
        '#ucsHeader { position: fixed; left: calc( 50% - 387px); bottom: 0; '+
        'padding: 20px 12px; width: 750px; } '+
        '#ucsSubMenu { top: 13px !important; } '+
        '#myUcsPage { display: flex !important; } '+
        '#ucsHeader li:not(:first-child){ visibility: hidden; } '+
        '#ucsMainLeft { position: static !important; } '+
        '.actionControl { padding-bottom: 30px; } '+
        '#ucsHeader input, input[name="save_mode"] { '+
        'font: normal 16px Meiryo; padding: 3px 8px 1px; color: #fff; '+
        'width: 150px; cursor: pointer; -moz-appearance: none; } '+
        '#ucsHeader input { box-shadow: inset 0 0 0 40px #2196f3; } '+
        'input[name="save_mode"] { position: fixed; bottom: 14px; '+
        'left: calc(50% - 140px); box-shadow: inset 0 0 0 40px #00a08e; }';

    let style=document.createElement('style');
    style.innerHTML=css;
    myUcsPage.appendChild(style);

    let blog=document.querySelector('#blog');
    let my_blog=document.querySelector('#ucsSubMenu li:last-child a');
    blog.onclick=function(){
        my_blog.click(); }

    let btnPrimary=document.querySelector('input[name="save_mode"]');
    btnPrimary.classList.remove('btnPrimary');

    let query=location.href.toString().slice(-4); // パネルからCSS編集を開いた場合
    if(query=='?sco'){
        let css_text=document.querySelector('#contentsForm textarea');
        css_text.scrollTop=css_text.scrollHeight; } // コードを最下部を表示する
} // editcss()

●「Skin Coordinate」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

　　スクリプトツール 最新バージョン・リンク一覧表