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

「Skin Coordinate」を実用化する環境

いよいよツールを実用化する条件が揃いました。 ブログスキンの背景画像の差し替えを、HTML・CSSの知識なしで可能にする道が見えて来ました。 これを実現するには以下の作業をします。

➀「Skin Coordinate Port」を起動して、使用している「公式スキン」を「CSS編集用デザイン」の環境に移植します。

（既に「CSS編集用デザイン」を利用している場合は、これまでのアレンジ内容がリセットされます。 事前に必ず「ユーザーCSS」のバックアップを行ってください。）

移殖は半分は自動的に行われ、用心しながら行っても数分程度で終了します。

手順は以下のページに纏めているので参照ください。

　　「公式スキン」を「CSS編集用デザイン」に自動移植するツール（3）  

➁「Skin Coordinate」を起動して、ブログ画面の画像の変更・削除などのアレンジ作業を行います。 これは、少々慣れが必要かもしれませんが、好みの背景画像を用意して色々と試す事で、すぐに扱いが理解できます。

このアレンジ作業の手順は、以下のページを参照ください。

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

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

最後に、「Get CSS」を押すと、クリップボードにアレンジしたCSSコードがコピーされます。「CSS編集画面」を開いて、編集枠のコードの最後にカーソルを入れて、「Ctrl + V」を押します。 アレンジ用コードが記入されたら「保存」を押します。

以上で、背景画像のアレンジがブログに適用されます。 操作は簡単ですから、何度でもアレンジをやりなおして、精密な背景画像の調整をする事も可能です。

ショートカットを変更しました 

実際にテストしていると「Skin Coordinate」と「Skin Coordinate Port」の両方を起動できる方が便利だと気付きました。 この目的で、両者のショートカットを別にしました。

●「Skin Coordinate Port」→ 「Alt + F6」

●「Skin Coordinate」→ 「Alt + F7」

「Skin Coordinate」と「Skin Coordinate Port」の連携 

「Skin Coordinate Port」が完成しましたが、これまでの「Skin Coordinate」は「フリースペース」に「styleタグ」の形でアレンジコードを書き込む仕様でした。「CSS編集用デザイン」は「ユーザーCSS」を直接編集できる環境です。「ユーザーCSS」は「CSS編集画面」を開いて編集しますが、そこで扱われるのは「CSS」という形式です。 

「CSS」形式のコードは、「styleタグ」から「<style>～</style>」のタグを外したものですが、間違いを生じない様に「CSS」形式で直接に出力する様にしました。

ユーザーは、ツールの「Get CSS」のボタンを押して、CSS編集枠の「末尾」にペーストするだけです。 但し、CSSは記述の位置で優先順位が決まるので、必ず「末尾」にペーストする必要があります。 これも間違いを減らすため、編集画面を開くと、自動的にCSSコードの末尾を表示する様にしています。

また、以前のバージョンはフリースペースを開くボタンを配置していましたが、ここは当然「CSS編集画面」を開く「CSS Edit」ボタンに改めました。

ちょっとテストして見ました 

現在の「Skin Coordinate」は、新タイプのスキンのみに対応しています。 旧タイプに対応するバージョンを開発していますが、これは少し時間がかかります。 新タイプは背景画像を設定する要素が限られて統一されていますが、旧タイプは散漫です。 これに対応するために、今までと違うアプローチになりそうです。

さて、背景画像の占める部分が多い下のスキンを、アレンジしてみました。

背景画像に使うのは使い回しのサンプル画像で、センスを疑われそうなものですが、以下の様なレイアウトがあっという間に出来ます。

「検索窓」の上にも小型の画像を置き、2枚の背景画像を使っています。 背景画像の大きさや縦横比などを画像アプリの切り出し等で調節すれば、色々なレイアウトの技が使えます。 透過画像を使用すれば、更に本格的なデザインを追求できます。

背景画像の透過度の調節、トリミング表示、変形表示、枠線追加など、その気になれば更に高度な表現をこのツールで設定できる様になります。 しかし、背景画像はページに合わせ画像アプリで完成させておいた方が、私は良いと思います。 ブラウザが異なると違って見える様では悲しいので。

「CSS編集用デザイン」でアレンジしたCSSを適用した場合は、ページの初期表示の速度は快適です。 やっとここまで漕ぎ着けました。

 「Skin Coordinate」のコード

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

◎ 現バージョンは「旧タイプ」のスキンでは動作しません。

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

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

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

◎ ページを表示しながら、画像の配置調節をできます。

◎ このバージョンは、CSS編集用デザインの「編集枠」に適したCSSコードを出力します。 フリースペースでは利用できません。

以下のコードを「Tampermonkey」に登録する事で、「Skin Coordinate」を動作させる事が出来ます。 今後は、「旧タイプ」スキン対応を進める予定です。

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

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

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

〔 Skin Coordinate 〕ver. 1.0

// ==UserScript==
// @name         Skin Coordinate
// @namespace    http://tampermonkey.net/
// @version      1.0
// @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 { 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');
    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: #005f56; '+
        '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: 20px !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: #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 css_edit=document.querySelector('#css_edit');

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


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

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

            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(
        '背景画像が表示される範囲のサイズ\n\n　　'+
        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='';

    for(let k=1; k<8; k++){
        if(b_param[k][0]==1){
            if(b_param[k][2]==0){ // 背景の透過指定をした要素
                css+=selector(k) +' { background: none; } \n\n'; }
            else{ // 背景画像を指定した要素
                css+=selector(k) +' { 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("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_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=
        '#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; top: 3px; '+
        'left: calc(50% - 140px); box-shadow: inset 0 0 0 40px #00a08e; } '+
        '#ucsSubMenu { top: 1px !important; } '+
        '#myUcsPage { display: flex !important; }'+
        '#ucsHeader li:not(:first-child){ visibility: hidden; }';

    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」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

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