スキンの背景画像・背景色の設定を調査・差替えるツール（7）/ JavaScript

操作パネルを開閉する仕様を改善

最初に表示される「コントロールパネル」は、元スキンで背景画像・背景色を設定された対象要素を探すボタンが左側に並びます。

対象要素のデフォルト/アレンジの切換 

7個の選択ボタンの左クリックは、各の対象要素のデフォルト/アレンジの状態を切り換えます。 ボタンに枠線がないのがデフォルト状態で、ページ上の要素は本来の表示です。 ボタンを押すと枠線が付き、対象要素の元の背景が削除されて透明化します。

ボタンに枠線が付いた要素はアレンジが適用されていて、もう一度ボタンを左クリックすると枠線が消え、要素の表示も元の状態に戻ります。

背景アレンジを追加する 

アレンジの状態を、初期の透明化から深化させるには、要素の選択ボタンを右クリックします。（枠線が付いた状態のボタンでないと右クリックは無効です）

「画像設定パネル」が表示されますが、上の様に「画像SRC」の未入力では、操作できるボタンは限られています。

◎「S」ボタンは、背景を設定する画像エリア（対象要素）のサイズを表示します。

◎「New」ボタンは、その後のアレンジ設定を全てキャンセルし、設定パネルを初期状態に戻します。 ページ上の対象要素の背景は透明化し、ページ上の画像エリアの枠線を表示する最初の状態に戻ります。

◎「画像SRCの入力枠」にSRCをペーストし「Set SRC」ボタンを押すと、画像を取り込んで、ページ上の対象要素の背景として表示します。

これによって、右側の配置コントロールのボタンが表示され、配置の設定 → アレンジの追加が出来る様になります。（配置設定の詳細は前ページを参照ください）

アレンジ適用/デフォルト表示の切換え  

アレンジ/デフォルト切換は、やはり下側の選択ボタンが受け持ちます。 グリーンのボタンを左クリックすると、最初の1回目で「画像設定パネル」が非表示になります。

しかし、アレンジを適用した状態は変化せず、ボタンの枠線も消えません。 この状態から、他のボタンを押して、操作する対象要素を変更できます。

「画像設定パネル」が消えた状態で 2度目の左クリックすると、今度は対象要素への「アレンジ適用」が解除され「デフォルト表示」に戻ります。

左クリックで「画像設定パネル」を消す仕様の追加で、操作が直感的にできる様になりました。 これまでは右クリックで設定パネルを消す仕様だけでしたが、右クリックはメニューを表示させる操作で、消す操作をイメージしにくかったのです。

今回、ボタンを非表示にしたり押せなくしたり、逆に押せる様にしたりと、幾つか変更を加えましたが、操作を誘導して、操作の流れを理解し易くする目的です。

「フリースペース」編集画面と「サイドバーの配置設定」画面のアレンジ 

「コントロールパネル」の右側に、処理の流れに沿って必要になる管理画面を呼び出すボタンがあります。

以前のページで説明しましたが、❶「Upload」ボタンは「画像管理」画面を開きます。 この画面で背景用に用意した画像をアップロードし、そのSRCを取得します。 SRCは画像サムネイルの左クリックで、自動的にクリップボードにコピーできます。

SRCを「設定パネル」にペーストして背景画像をアレンジし、最終的に❷「GetCSS」を押します。 このボタンを押すと、その時のアレンジの状態にするためのCSSコードを作り、自動的にクリップボードにコピーします。

これは、メモ帳などにペーストできますが、最終的には「フリースペース」にペーストします。 ❸「FSpace」を押すと、下の「フリースペース編集画面」のウインドウが開きます。 不要な表示を省き、編集し易くアレンジした画面です。

❹ の編集枠をクリックして「Ctrl + V」を押す事で、アレンジ用のコードがペーストされます。 これまでに「フリースペース」に記載した内容がある場合は、その一番末尾にペーストします。 一般に長い文字列になりますが、改行を入れると無効になるので、そのままペーストすることが肝心です。

ペーストしたら「保存」を押して、ブログページをリロードして、アレンジの状態を確認します。

なお、「フリースペース」を初めて利用する場合は、「フリースペース」をサイドバーに表示する設定が必要です。 上図の ❺ の太字リンクを押すと、下の設定画面が開きます。 左側列に「フリースペース」があれば、右側の「使用する機能」の側にドラッグし、最後に「保存」を押します。

貼り付けたCSSコード（正確にはstyleタグ）は、サイドバーに表示されません。 しかし、他の記入した文字列や改行は、サイドバー上に表示されます。

かなり致命的な問題 

「画像コントロール」の出来が良くて上機嫌でしたが、実際に「フリースペース」にCSSコードをペーストして確かめると、ブログページ表示の最初にデフォルトの背景画像が表示され、2秒ほど後にアレンジした背景画像が表示される事が判りました。

背景画像のタイプやページ全体のデザインに関係しますが、この一瞬の先祖帰りが許容できない場合は、大変に残念な結果といわざるを得ません。 ページの閲覧者が実際に見る時間は、アレンジ後のデザインが圧倒的に長くても、最初の表示は一瞬でも目立ちますから。

ここまでの努力を生かす方法が無いわけではありません。 探せばたいてい白背景のスキンがあり、そういったスキンに変更して、このツールで背景設定用のCSSを作れば、最初に露出する背景の違和感が減らせます。

更に、全ての公式スキンは、そのCSSを取得する事が可能です。 使用中のスキンのアレンジ状態が欲しい場合は、そのCSSを取得し、それとこのツールによるCSSを合わせて、CSS編集用デザインのスキンCSSにすれば、初期の表示時間の問題は完全に克服できます。  この方法については、以下のページに纏めています。

　　アメブロ「公式スキン」を「CSS編集用デザイン」に移植する  

但し、そこまで操作が出来るユーザーは、そもそもこのツールの必要性が少ないとは言えますが。

むむっ、良い策がないか、考えてみます。🥴

 「Skin Coordinate」のコード

以下のスクリプトコードは Chrome / 新Edge / Firefox で動作を確認しています。 ツールは開発の最終の段階です。

◎ ページャーの細い「旧タイプ」のスキンでは、正しく動作しません。

◎「画像フォルダ」のサブウインドウで「画像SRC」のコピー機能が動作します。

◎ ページに任意の背景画像をテスト表示でき、調節後にCSSコードを出力できます。

◎ 背景を表示する「画像エリア」のピクセルサイズを表示する機能があります。

◎ ページを表示しながら、画像の配置調節をできる機能を追加しました。

◎ CSSコードを登録する「フリースペース」の編集ページを開くボタンを追加しました。 また、その編集画面をアレンジして編集し易くしました。

以下のコードを「Tampermonkey」に登録する事で、ページ背景画像の設定ツールとして動作させる事が出来ます。 今後は、「旧タイプ」スキン対応を進める予定です。

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

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

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

〔 Skin Coordinate 〕ver. 0.7

// ==UserScript==
// @name         Skin Coordinate
// @namespace    http://tampermonkey.net/
// @version      0.7
// @description   「ヘッダー背景画像」のチェック
// @author       Ameba Blog User
// @match       https://ameblo.jp/*
// @match       https://blog.ameba.jp/ucs/skin/srvskinpreview*
// @match       https://blog.ameba.jp/ucs/upload/srvimage*
// @match       https://blog.ameba.jp/ucs/profile/*
// @match       https://blog.ameba.jp/ucs/sidebar/*
// @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 g_open=0; // サブパネル ON/OFF

let b_param=[
    ['0', '0', '0', '0', '0', '0', '0', '0'],
    ['0', '.skin-bgHeader { background: none; box-shadow: '+
     '#2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }', '0', '0', '50', '50', '0', '0'],
    ['0', '.skin-bgHeader > div { background: none; '+
     'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }', '0', '0', '50', '50', '0', '0'],
    ['0', '.skin-page { background: none; '+
     'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }', '0', '0', '50', '50', '0', '0'],
    ['0', '.skin-page::before { background: none; '+
     'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }', '0', '0', '50', '50', '0', '0'],
    ['0', '.skin-blogBody { background: none; '+
     'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }', '0', '0', '50', '50', '0', '0'],
    ['0', 'body { background: none; '+
     'box-shadow: #0b8 0 0 0 16px inset, #fff 0 0 0 18px inset; }', '0', '0', '50', '50', '0', '0'],
    ['0', 'html { 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; }', '0', '0', '50', '50', '0', '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] 　背景プロパティ



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');
    if(sp){ // ページ表示エリアの取得が条件
        document.addEventListener("keydown", check_key);
        function check_key(event){
            let gate=-1;
            if(event.altKey==true){
                if(event.keyCode==117){
                    event.preventDefault(); gate=1; }} // ショートカット「Alt＋F6」

            if(gate==1){
                event.stopImmediatePropagation();
                event.preventDefault();

                main(); }} // ツールの実効関数
    }} // catch_key



function main(){
    if(task==0){
        task=1;
        panel1_disp();
        coordinate(); }
    else if(task==1){
        task=0;
        panel1_remove();
        panel2_remove(); }}



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

    panel.innerHTML=
        '<input id="b1" type="submit" value="Header①">'+
        '<input id="b2" type="submit" value="Header②">'+
        '<input id="b3" type="submit" value="BlogText③">'+
        '<input id="b4" type="submit" value="BlogText④">'+
        '<input id="b5" type="submit" value="BlogText⑤">'+
        '<input id="b6" type="submit" value="Body⑥">'+
        '<input id="b7" type="submit" value="Html⑦">'+
        '<input id="upload" type="submit" value="Upload">'+
        '<input id="get_css" type="submit" value="GetCSS">'+
        '<input id="fspace" type="submit" value="FSpace">';

    let css=
        '#panel1 { position: fixed; bottom: 40px; left: calc(50% - 490px); '+
        'width: 980px; padding: 15px 0 15px 20px; background: #005f56; '+
        'border: 2px solid #fff; border-radius: 4px; z-index: 10; }'+
        '#panel1 input { font: normal 16px meiryo; color: #000; '+
        'margin-right: 15px; padding: 4px 6px 2px; } '+
        '#b1, #b2, #b3, #b4, #b5, #b6 { outline: none; }';

    if(ua==1){
        css+='#panel1 input { padding: 4px 5px 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('div');
    panel.setAttribute('id', 'panel2');

    panel.innerHTML=
        '<input id="gS" type="submit" value="S">'+
        '<input id="g0" type="submit" value="New">'+
        '<input id="g1" placeholder="背景用の画像SRCを入力" autocomplete="off">'+
        '<input id="g2" type="submit" value="Set SRC">'+
        '<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">'+
        '<input id="g8" type="submit" value="X">';

    let css=
        '#panel2 { position: fixed; bottom: 110px; left: calc(50% - 490px); '+
        'width: 980px; padding: 15px 0 15px 20px; background: #005f56; '+
        'border: 2px solid #fff; border-radius: 4px; z-index: 10;} '+
        '#panel2 input { position: relative; font: normal 16px meiryo; color: #000; '+
        'margin-right: 15px; padding: 4px 6px 2px; } '+
        '#g1 { width: 300px; } #g3, #g6, #g7 { width: 70px; } '+
        '#g4, #g5 { width: 54px; text-align: center; padding: 4px 5px 2px 1px !important; '+
        'filter: brightness(0.93); } '+
        '#g5 { margin-left: -10px; } '+
        '#wper1, #wper2 { position: relative; display: inline-block; } '+
        '#wper1::after, #wper2::after { content: "%"; position: absolute; right: 21px; top: 3px; '+
        'padding-top: 4px;background: #ededed; } '+
        '#g4:hover, #g5:hover { z-index: 1; } ';

    if(ua==1){
        css+='#g1 { border: 2px solid #ccc; box-sizing: border-box; } '+
            '#g4, #g5 { height: 28px; }'; }

    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 coordinate(){
    let b1=document.querySelector('#b1');
    let b2=document.querySelector('#b2');
    let b3=document.querySelector('#b3');
    let b4=document.querySelector('#b4');
    let b5=document.querySelector('#b5');
    let b6=document.querySelector('#b6');
    let b7=document.querySelector('#b7');
    let upload=document.querySelector('#upload');
    let get_css=document.querySelector('#get_css');
    let fspace=document.querySelector('#fspace');

    b1.onclick=function(){
        if(b_param[1][0]==0){
            b_param[1][0]=1;
            b1.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
            check_back(1); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(1); }
            else{
                b_param[1][0]=0;
                b1.style.boxShadow='none';
                undo_check(1); }}}

    b2.onclick=function(){
        if(b_param[2][0]==0){
            b_param[2][0]=1;
            b2.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
            check_back(2); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(2); }
            else{
                b_param[2][0]=0;
                b2.style.boxShadow='none';
                undo_check(2); }}}

    b3.onclick=function(){
        if(b_param[3][0]==0){
            b_param[3][0]=1;
            b3.style.boxShadow='0 0 0 2px red, 0 0 0 4px #fff';
            check_back(3); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(3); }
            else{
                b_param[3][0]=0;
                b3.style.boxShadow='none';
                undo_check(3); }}}

    b4.onclick=function(){
        if(b_param[4][0]==0){
            b_param[4][0]=1;
            b4.style.boxShadow='0 0 0 2px red, 0 0 0 4px #fff';
            check_back(4); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(4); }
            else{
                b_param[4][0]=0;
                b4.style.boxShadow='none';
                undo_check(4); }}}

    b5.onclick=function(){
        if(b_param[5][0]==0){
            b_param[5][0]=1;
            b5.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
            check_back(5); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(5); }
            else{
                b_param[5][0]=0;
                b5.style.boxShadow='none';
                undo_check(5); }}}

    b6.onclick=function(){
        if(b_param[6][0]==0){
            b_param[6][0]=1;
            b6.style.boxShadow='0 0 0 2px #0b8, 0 0 0 4px #fff';
            check_back(6); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(6); }
            else{
                b_param[6][0]=0;
                b6.style.boxShadow='none';
                undo_check(6); }}}

    b7.onclick=function(){
        if(b_param[7][0]==0){
            b_param[7][0]=1;
            b7.style.boxShadow='0 0 0 4px #fff';
            b7.style.outline='2px dotted #000';
            check_back(7); }
        else{
            if(g_open==1){
                g_open=0;
                undo_impose(7); }
            else{
                b_param[7][0]=0;
                b7.style.boxShadow='none';
                undo_check(7); }}}


    b1.oncontextmenu=function(event){
        event.preventDefault();
        if(g_open==0 && b_param[1][0]==1){
            g_open=1;
            impose(1); }
        else{
            g_open=0;
            undo_impose(1); }}

    b2.oncontextmenu=function(event){
        event.preventDefault();
        if(g_open==0 && b_param[2][0]==1){
            g_open=1;
            impose(2); }
        else{
            g_open=0;
            undo_impose(2); }}

    b3.oncontextmenu=function(event){
        event.preventDefault();
        if(g_open==0 && b_param[3][0]==1){
            g_open=1;
            impose(3); }
        else{
            g_open=0;
            undo_impose(3); }}

    b4.oncontextmenu=function(event){
        event.preventDefault();
        if(g_open==0 && b_param[4][0]==1){
            g_open=1;
            impose(4); }
        else{
            g_open=0;
            undo_impose(4); }}

    b5.oncontextmenu=function(event){
        event.preventDefault();
        if(g_open==0 && b_param[5][0]==1){
            g_open=1;
            impose(5); }
        else{
            g_open=0;
            undo_impose(5); }}

    b6.oncontextmenu=function(event){
        event.preventDefault();
        if(g_open==0 && b_param[6][0]==1){
            g_open=1;
            impose(6); }
        else{
            g_open=0;
            undo_impose(6); }}

    b7.oncontextmenu=function(event){
        event.preventDefault();
        if(g_open==0 && b_param[7][0]==1){
            g_open=1;
            impose(7); }
        else{
            g_open=0;
            undo_impose(7); }}


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


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


} // coordinate()



function check_back(n){
    trim_2(n);
    trim_3(n);
    trim_4(n);
    trim_6(n);
    trim_7(n); }



function undo_check(n){
    let s_id2='skin_'+ n +'2';
    if(document.querySelector('#'+s_id2)){
        document.querySelector('#'+s_id2).remove(); }
    let s_id3='skin_'+ n +'3';
    if(document.querySelector('#'+s_id3)){
        document.querySelector('#'+s_id3).remove(); }
    let s_id4='skin_'+ n +'4';
    if(document.querySelector('#'+s_id4)){
        document.querySelector('#'+s_id4).remove(); }
    let s_id6='skin_'+ n +'6';
    if(document.querySelector('#'+s_id6)){
        document.querySelector('#'+s_id6).remove(); }
    let s_id7='skin_'+ n +'7';
    if(document.querySelector('#'+s_id7)){
        document.querySelector('#'+s_id7).remove(); }}



function impose(n){
    panel2_disp();

    let gS=document.querySelector('#gS');
    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 g8=document.querySelector('#g8');
    let wper1=document.querySelector('#wper1');
    let wper2=document.querySelector('#wper2');

    let b_id='#b'+n
    document.querySelector(b_id).style.background='#3bff5c';
    document.querySelector(b_id).style.borderStyle='solid';

    for(let k=1; k<8; k++){
        if(k!=n){
            let b_id='#b'+k;
            document.querySelector(b_id).disabled=true; }}


    if(b_param[n][2]==0){ // SRC入力無し 未処理・初期化後
        g1.value='';
        g1.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'; }
    else{
        g1.value=b_param[n][2];
        g1.disabled=true;
        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'; }
    check_back(n); // 全ての設定値を適用してページを再表示


    gS.onclick=function(){
        show_size(n); }


    g0.onclick=function(){ // 処理を初期化する
        g1.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';

        g1.value='';
        b_param[n][2]=0; // SRCリセット
        g3.value='Size A';
        b_param[n][3]=0; // Size値リセット
        g4.value=50; // Psition値リセット
        b_param[n][4]=50;
        g5.value=50; // Psition値リセット
        b_param[n][5]=50;
        g6.value='Repeat';
        b_param[n][6]=0; // Repeat値リセット
        g7.value='No Fix';
        b_param[n][7]=0; // Fix Position値リセット

        trim_2(n); // 内枠線表示

        let s_id3='skin_'+ n +'3';
        if(document.querySelector('#'+s_id3)){
            document.querySelector('#'+s_id3).remove(); }
        let s_id4='skin_'+ n +'4';
        if(document.querySelector('#'+s_id4)){
            document.querySelector('#'+s_id4).remove(); }
        let s_id6='skin_'+ n +'6';
        if(document.querySelector('#'+s_id6)){
            document.querySelector('#'+s_id6).remove(); }
        let s_id7='skin_'+ n +'7';
        if(document.querySelector('#'+s_id7)){
            document.querySelector('#'+s_id7).remove(); }}


    g2.onclick=function(){
        if(b_param[n][2]==0 && g1.value!=''){ // Newの状態のみ入力可
            b_param[n][2]=g1.value; // SRCを取得
            g1.disabled=true;
            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';

            trim_2(n);
            trim_4(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;
        trim_3(n);
        trim_4(n); }


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


    g5.addEventListener('input', function(event){
        event.preventDefault();
        b_param[n][5]=g5.value;
        trim_4(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'; }
        trim_6(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'; }
        trim_7(n); }


    g8.onclick=function(){
        undo_impose(n); }

} // impose()



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

    let b_id='#b'+n
    document.querySelector(b_id).style.background='';
    document.querySelector(b_id).style.borderStyle='';
    for(let k=1; k<8; k++){
        let b_id='#b'+k;
        document.querySelector(b_id).disabled=false; }}



function selector(n){
    if(n==1){
        return '.skin-bgHeader'; }
    if(n==2){
        return '.skin-bgHeader > div'; }
    if(n==3){
        return '.skin-page'; }
    if(n==4){
        return '.skin-page::before'; }
    if(n==5){
        return '.skin-blogBody'; }
    if(n==6){
        return 'body'; }
    if(n==7){
        return 'html'; }}



function show_size(n){
    let area;
    area=document.querySelector(selector(n));

    alert( area.getBoundingClientRect().width
          +' × '+ area.getBoundingClientRect().height +'\n\n'+
          '（注）要素がウインドウ幅いっぱいに拡がる場合は\n'+
          '　　　背景の幅も変化する事に注意してください'); }



function trim_2(n){
    let sp=document.querySelector('.skin-page');
    let css;

    if(b_param[n][2]==0){
        css=b_param[n][1]; } // 内枠線を表示
    else{
        css=selector(n) +' { background: url('+ b_param[n][2] +'); }'; } // SRC指定

    let style=document.createElement('style');
    let s_id='skin_'+ n +'2';
    style.setAttribute('id', s_id);
    style.innerHTML=css;
    if(document.querySelector('#'+s_id)){
        document.querySelector('#'+s_id).remove(); }
    sp.appendChild(style); }



function trim_3(n){
    let sp=document.querySelector('.skin-page');

    let css; // Size値指定

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

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



function trim_4(n){
    let sp=document.querySelector('.skin-page');

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

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



function trim_6(n){
    if(b_param[n][6]==1){
        let sp=document.querySelector('.skin-page');

        let css;
        css=selector(n) +' { background-repeat: no-repeat; }';

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

    else{
        let s_id='skin_'+ n +'6';
        if(document.querySelector('#'+s_id)){
            document.querySelector('#'+s_id).remove(); }}}



function trim_7(n){
    if(b_param[n][7]==1){
        let sp=document.querySelector('.skin-page');
        let css;
        css=selector(n) +' { background-attachment: fixed; }';

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



function total_css(){
    let css='<style>'; // style開始タグを追加

    for(let k=1; k<8; k++){
        if(b_param[k][0]==1){
            if(b_param[k][2]==0){ // 背景の透過指定をした要素
                css+=selector(k) +' { background: none; } '; }
            else{ // 背景画像を指定した要素
                css+=selector(k) +' { background: url('+ b_param[k][2] +'); ';
                if(b_param[k][3]==1){
                    css+='background-size: contain; '; }
                else if(b_param[k][3]==2){
                    css+='background-size: cover; '; }
                let posx=b_param[k][4];
                let posy=b_param[k][5];
                css+='background-position: '+ posx +'% '+ posy +'%; ';
                if(b_param[k][6]==1){
                    css+='background-repeat: no-repeat; '; }
                if(b_param[k][7]==1){
                    css+='background-attachment: fixed; '; }
                css+='} ';
            }}}

    css+='</style>'; // style終止タグを追加

    copyClipboard(css);

    alert("CSSをコピーしました");

} // 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_title1"], input.inputText, '+
        'input[type="checkbox"], #imageList .actionControl, #moreUpload, '+
        '#imageList .imageBox .btnDefault, #mailBlog, #ucsMainRight, '+
        '#footerAd, #globalFooter { display: none !important; } '+
        '#ucsContent { width: 770px !important; 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(3)) { 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 profileIndex=document.querySelector('#profileIndex');
    let editArrange=document.querySelector('#editArrange');

    if(profileIndex || editArrange){ // 画像フォルダウインドウの場合に動作する
        edit_w(); }});

function edit_w(){
    let css=
        '#globalHeader, #ucsHeader, .l-ucs-sidemenu-area, #ucsMainRight, '+
        'ul.editTools , .infoArea , #footerAd, #globalFooter '+
        '{ display: none !important; } '+
        '#ucsContent { width: 770px !important; 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; }';

    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()

「Skin Coordinate」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

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

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