ブログ背景画像を差替えるツール〔新タイプスキン版〕（13）/ JavaScript

プリセットの「セレクタ」データと初期表示のコードを分離

「新タイプ」は対象要素ごとに、背景画像の処理の最初に表示される「範囲表示のCSSコード」を、内的なデータペース（配列）に登録していました。

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] 　背景プロパティ

これは、対象要素が少なく限られている場合は管理が楽でした。 配列の2個目は、それだけで「対象要素の選択時の最初のクリア表示をするCSSコード」になります。

ところが、「旧タイプ」を手掛けた段階でこの方式は合わなくなりました。「旧タイプ」は対象要素の種類が多く、プリセットでは対応できません。 対象要素のセレクタをデータベース化する際、既に取得したセレクタ（同一セレクタが複数ある場合）は排除しますが、「新タイプ」方式だと、「CSSコード部」を外して「セレクタ」だけにして比較する、まわりくどい操作が必要になります。 これはどう考えても、配列の2個目を「セレクタ」のみにして管理する方が楽です。

で、データベースを「セレクタ」だけの形に改め、「旧タイプスキン版」が完成しました。 そのコードはすっきりしていて「新タイプスキン版」も改めるべきと確信しました。 実用上は、以前の方式で問題ないのですが、対象要素の追加や変更があれば、旧タイプ版の方式は対応し易いでしょう。

以上の経緯で、新タイプスキン版の「Skin CoordinateⅠ」のコードを書換えました。

新しいデータベースは以下の様にシンプルです。

let b_param=[
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, '.skin-bgHeader', 0, 0, 50, 50, 0, 0],
    [0, '.skin-bgHeader > div', 0, 0, 50, 50, 0, 0],
    [0, '.skin-page', 0, 0, 50, 50, 0, 0],
    [0, '.skin-page::before', 0, 0, 50, 50, 0, 0],
    [0, '.skin-blogBody', 0, 0, 50, 50, 0, 0],
    [0, 'body', 0, 0, 50, 50, 0, 0],
    [0, 'html', 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] 　背景プロパティ

また、対象要素を選択した場合に、背景をクリアして範囲を枠線表示するのは、以下のコードで行っています。 これは「旧タイプスキン版」からの逆輸入です。

function edit_view(hk){
    let selector=b_param[hk][1];
    if(selector!=0){
        let target=document.querySelectorAll(selector);
        if(target.length!=0){
            for(let k=0; k<target.length; k++){
                if(hk<6){
                    target[k].style.boxShadow='rgb(33, 150, 243) 0 0 0 3px inset, '+
                        'rgb(255, 255, 255) 0 0 0 4px inset'; }
                if(hk==6){
                    if(b_param[hk][2]==0){
                        target[k].style.boxShadow='rgb(0, 220, 220) 0 0 0 8px inset'; }}
                if(hk==7){
                    if(b_param[hk][2]==0){
                        target[k].style.boxShadow='rgb(221, 221, 221) 0 0 0 14px inset'; }}
            }}}}

以前のコードは「5種類」の枠線で、下層の対象要素を区別し易くしていましたが、実際には余り重要でないと考え、「3種類」の表示に減らしました。 下図は、色々な対象要素が重なった様子です。

少しあっさりした表示になりましたが、実用上で問題はないと思います。

 「Skin CoordinateⅠ」のコード

「新タイプスキン版」は「Skin CoordinateⅠ」ver. 1.2 が現在の最新版です。

このスクリプトコードは Chrome / 新Edge / Firefox で動作を確認しています。 

◎ このバージョンは「新タイプスキン」を対象に制作したもので、「旧タイプスキン」では動作しません。

◎「新タイプスキン」「新タイプのCSS編集用デザイン」のページ、またはスキン変更時のプレビュー画面で「新タイプスキン」を仮設定している場合に動作します。

◎ 実際に利用できるスキンアレンジを行うには、事前に「Skin Coordinate 移殖ツール」で、「公式スキン」を「CSS編集用デザイン」の環境に移植した上で、このツールでアレンジコードを生成します。（アレンジのテストは移植前でも可能です）

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

◎ ページに任意の背景画像をテスト表示して、ページを表示下で画像の配置調節ができます。 画像配置の設定後にアレンジ用のCSSコードを出力します。

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

以下のコードを「Tampermonkey」に登録する事で、「Skin CoordinateⅠ」を利用することが出来ます。

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

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

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

〔 Skin CoordinateⅠ 〕ver. 1.2  新タイプスキン版

// ==UserScript==
// @name         Skin CoordinateⅠ
// @namespace    http://tampermonkey.net/
// @version      1.2
// @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 g_open=0; // サブパネル ON/OFF

let b_param=[
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, '.skin-bgHeader', 0, 0, 50, 50, 0, 0],
    [0, '.skin-bgHeader > div', 0, 0, 50, 50, 0, 0],
    [0, '.skin-page', 0, 0, 50, 50, 0, 0],
    [0, '.skin-page::before', 0, 0, 50, 50, 0, 0],
    [0, '.skin-blogBody', 0, 0, 50, 50, 0, 0],
    [0, 'body', 0, 0, 50, 50, 0, 0],
    [0, 'html', 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'); // 新タイプスキン
    let sb=document.querySelector('.skinBody'); // 旧タイプスキン
    if(sp){ // ページ表示エリアの取得が条件
        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){
        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="Get CSS">'+
        '<input id="css_edit" type="submit" value="CSS Edit">';

    let css=
        '#panel1 { position: fixed; bottom: 40px; 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; }'+
        '#panel1 input { font: normal 16px meiryo; color: #000; '+
        'margin-right: 12px; padding: 4px 6px 2px; } '+
        '#b1, #b2, #b3, #b4, #b5, #b6 { outline: none; } '+
        '#b7 { margin-right: 30px !important; } '+
        '#upload, #get_css, #css_edit '+
        '{ border: 2px solid #07c5b4; background: #3df7e5; }';

    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" type="text" placeholder="背景用の画像SRCを入力">'+
        '<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: 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: 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 css_edit=document.querySelector('#css_edit');


    b1.onclick=function(){ onclick_n(1); }
    b2.onclick=function(){ onclick_n(2); }
    b3.onclick=function(){ onclick_n(3); }
    b4.onclick=function(){ onclick_n(4); }
    b5.onclick=function(){ onclick_n(5); }
    b6.onclick=function(){ onclick_n(6); }
    b7.onclick=function(){ onclick_n(7); }

    function onclick_n(n){
        if(b_param[n][0]==0){
            b_param[n][0]=1;
            if(this_b(n)!=b7){
                this_b(n).style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff'; }
            if(this_b(n)==b7){
                this_b(n).style.boxShadow='0 0 0 4px #fff';
                this_b(n).style.outline='2px dotted #000'; }
            edit_view(n);
            check_back(n); }
        else{
            if(g_open==1){
                g_open=0;
                un_view(n);
                undo_impose(n); }
            else{
                b_param[n][0]=0;
                this_b(n).style.boxShadow='none';
                un_view(n);
                undo_check(n); }}}

    function this_b(n){
        switch (n){
            case 1: return b1; break;
            case 2: return b2; break;
            case 3: return b3; break;
            case 4: return b4; break;
            case 5: return b5; break;
            case 6: return b6; break;
            case 7: return b7; }}


    b1.oncontextmenu=function(){ oncontextmenu_n(1, event); }
    b2.oncontextmenu=function(){ oncontextmenu_n(2, event); }
    b3.oncontextmenu=function(){ oncontextmenu_n(3, event); }
    b4.oncontextmenu=function(){ oncontextmenu_n(4, event); }
    b5.oncontextmenu=function(){ oncontextmenu_n(5, event); }
    b6.oncontextmenu=function(){ oncontextmenu_n(6, event); }
    b7.oncontextmenu=function(){ oncontextmenu_n(7, event); }

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


    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(n){
    set_skintag2(n);
    set_skintag3(n);
    set_skintag4(n);
    set_skintag6(n);
    set_skintag7(n); }



function undo_check(n){
    remove_skintag(n, 2);
    remove_skintag(n, 3);
    remove_skintag(n, 4);
    remove_skintag(n, 6);
    remove_skintag(n, 7); }


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



function edit_view(hk){
    let selector=b_param[hk][1];
    if(selector!=0){
        let target=document.querySelectorAll(selector);
        if(target.length!=0){
            for(let k=0; k<target.length; k++){
                if(hk<6){
                    target[k].style.boxShadow='rgb(33, 150, 243) 0 0 0 3px inset, '+
                        'rgb(255, 255, 255) 0 0 0 4px inset'; }
                if(hk==6){
                    if(b_param[hk][2]==0){
                        target[k].style.boxShadow='rgb(0, 220, 220) 0 0 0 8px inset'; }}
                if(hk==7){
                    if(b_param[hk][2]==0){
                        target[k].style.boxShadow='rgb(221, 221, 221) 0 0 0 14px inset'; }}
            }}}}


function un_view(hk){
    let selector=b_param[hk][1];
    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 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;
        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'; }
    else{
        g1.value=b_param[n][2];
        g1.disabled=true;
        g2.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;
        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';

        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値リセット

        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;
            g2.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';

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


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


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


    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 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 sp=document.querySelector('.skin-page');
    let css;

    if(b_param[n][2]==0){ // アレンジ画像がない場合
        if(n!=7){ // プリセット「7」以外
            css=b_param[n][1] +' { background: none; }'; } // 背景を非表示
        else{ // プリセット「7」
            css=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{ // SRC指定 アレンジ画像を表示
        css=b_param[n][1] +' { background: url('+ b_param[n][2] +'); }'; }

    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 set_skintag3(n){
    let sp=document.querySelector('.skin-page');

    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_'+ n +'3';
    style.setAttribute('id', s_id);
    style.innerHTML=css;
    if(document.querySelector('#'+s_id)){
        document.querySelector('#'+s_id).remove(); }
    sp.appendChild(style); }



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

    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_'+ n +'4';
    style.setAttribute('id', s_id);
    style.innerHTML=css;
    if(document.querySelector('#'+s_id)){
        document.querySelector('#'+s_id).remove(); }
    sp.appendChild(style); }



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

        let css;
        css=b_param[n][1] +' { 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 set_skintag7(n){
    if(b_param[n][7]==1){
        let sp=document.querySelector('.skin-page');
        let css;
        css=b_param[n][1] +' { 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='';

    for(let k=1; k<8; k++){
        if(b_param[k][0]==1){
            if(b_param[k][2]==0){ // 背景の透過指定をした要素
                css+=b_param[k][1] +' { background: none; } \n\n'; }
            else{ // 背景画像を指定した要素
                css+=b_param[k][1] +' { 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'; }
                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」最新版について 

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

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

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