旧タイプスキン版の主力機能
新タイプスキンは、背景画像を設定する対象要素の選択は、プリセットボタンで行います。 一方、旧タイプスキンは対象要素のパターンが複雑ですから、対象要素を選ぶ新しい仕組みを考えました。
下は、旧タイプスキン版のコントロールパネルで、左側の5個が対象要素の選択ボタンで、編成が異なります。
左端の ❶「Round Selector」は、その主力機能の起動ボタンです。 また、 ❷ ~ ❺ のボタンは、従来と同じプリセットボタンです。
ユニバーサルな選択機能「Round Selector」
「Round Selector」を押すと、他のボタンと同様にボタンに枠線が付き、起動した事を示します。 起動するとボタン上に数字の表示が出ます。
左側は、現在のインデックス(対象要素の順番)で「9」から始まります。(8以下はプリセットボタンに割り当てています) また、右側は対象要素の全候補の数です。
対象要素の選択はインデックスで行い、「⇦」「⇧」で先頭側、「⇩」「⇨」で末尾側へ移動します。 マウスは画面下層の対象要素を選択できないので、この様なキーで選択する方式にしています。(Firefoxでは「⇧」「⇩」キーで画面全体がスクロールするので、「⇦」「⇨」キーを使います)「Round Selector」が起動すると、インデックスで選択した対象要素にブルーのフィルターと、青枠が表示されます。
◎ 全てのインデックスは、割り当てられる対象要素が決まっているわけではなく、起動した時によって変動することがあります。
◎ 最初の「9」が「可視」の要素が選択されるとは限らず、起動しても判り難い場合事があります。 対象要素は必ず存在しますが、他の要素の下になっていたり、フォバーだけで表示され、見えないものもあります。 最初に「⇩」で末端まで移動して、どんな要素があるのかを確かめると良いでしょう。
サンプルで見るページ背景画像の指定
以下はサンプルページで「Round Selector」で対象要素を順に表示させたもので、22個の要素中で、ストレートに見えるのは半分位です。
◎ ブログヘッダー部より下が、同じ範囲で2度ブルー表示されますが、別要素が重なって同じ対象要素に見えている状態です。
◎ ブログヘッダー部は、幅の異なる2つの要素(範囲)が使えます。
◎ 中央のページャー上部はメッセージボードです。 良く見ると上下の2要素で囲みの背景を作っている事が判ります。
◎ 記事タイトル左の雪ダルマにも、ひとつの背景画像を使っています。
◎ 上図で見えませんが、本文の下端にも別の背景画像があります。
◎ サイドバーのメニュータイトルは、小画像をアクセントにしている場合が多い。
◎ 最後に「ユーザーアイコン」が選択されます。(これはアレンジ不可です)
以上の様に、「Round Selector」は、ページの背景レイアウトを教えてくれます。 選択される対象要素の殆どで、ユーザーの用意した画像を差替える事が可能です。
また、下層でインデックス選択で表示されない対象要素も、上層の要素を透過指定(後述)すると表示される場合があります。 フォバーした時にだけ表示されるメニューなどもありますが、インデックスの対象は必ずページの中に隠れています。 もっとも、その様な対象要素に背景指定をする必要は、余りないのですが。
「Round Selector」による背景画像の設定
❶「⇦」「⇧」「⇩」「⇨」で背景画像の差替えをする対象要素を選びます。
➋「Space」キーを押すと、その対象要素が非表示になります。 また、「コントロールパネル」の上側に「画像設定パネル」が表示されます。
この状態は対象要素の選択が固定され、「⇧」「⇩」の移動は出来ません。 再び「Space」キーまたはグリーンのボタンを押すと、移動可能になります。
❸「画像設定パネル」の「SRC枠」に背景画像として使用したい画像のSRCを入力して、「Set SRC」を押すと、取り込まれて背景画像として表示されます。
これ以降の背景画像の調整は、新タイプスキンと全く同じです。 詳細は以下のページを参照ください。
❹ 背景画像の設定が終了したら「Space」キーを押すか、グリーのボタンをクリックして編集状態から抜ける事が出来ます。 再び対象要素の選択をする状態に戻ったので、設定した画像にブルーのフィルターが表示されます。
以上の様にして、好みの対象要素の背景画像を差替えます。 ツールは単に背景色の白を設定した要素も対象要素に拾い挙げるので、元は何も無い(例えば記事本文)に背景画像を設定する事ができる場合があります。
❺「ユーザー画像」の設定を取り止めたい時は、「画像設定パネル」で「New」を押して画像の「SRC枠」を空白にします。 設定した背景画像が削除され、画像設定に入った時の元画像が非表示の状態になりますが、「Space」キーかグリーンのボタンを押すと、画像設定の状態から抜けて、同時に元の背景画像が表示されます。
なお、以上の様な「Skin Coordinate」ツールによるページデザインのアレンジ操作は、アレンジコードをスキン登録するまでの実験的なものです。 どの様に手を加えても、変化しているのはユーザー自身のブラウザ表示だけで、他の閲覧者には判りません。 アレンジした表示は、ブラウザのリロードで簡単に元に戻ります。 安心してテストをくりかえして、納得が行くデザインを得ることが出来ます。
背景画像の非表示を指定する
背景画像の差替え機能と同時に必要なのは、不要な背景画像の非表示(背景削除)です。 これは「別の背景画像を設定」する代わりに、「背景なし」の設定をするだけですが、他の4個のプリセットボタンと、少し操作が違います。
● 他のプリセットボタンは一度押した状態でボタンに枠線が付くと、それが「背景なし」の指定になり、画面上の元の背景画像は非表示になります。
●「Round Selector」では、非表示(背景削除)にしたい対象要素をブルーのフィルターで指定して、「Ctrl + Space」を押します。
最初は迷うと思いますが、この状態は「画像設定パネル」や「グリーンのボタン」の表示がなく、移動可能な状態で「背景画像なし」の状態になっています。「画像設定」の状態から抜けると、差替えた画像か元の画像が表示されますが、この状態は、「背景画像なし」が指定された第3の状態で、移動した後も背景画像は非表示です。
また、この「背景画像の非表示」の設定を元に戻したい時は、再び「Ctrl + Space」を押します。
改善すべき問題
一応は使える様になりましたが、新タイプ版と旧タイプ版のスクリプトコードは、かなりの部分で違います。 当初は、両タイプに対応する構想もありましたが、現在はそれが困難な気がしています。
新タイプ版は、対象要素の上層・下層のイメージを掴み易くしましたが、旧タイプ版はその様な余裕が無く、DevToolsに似た対象要素の表示に落ち着きました。「Round Selector」では、対象要素の背景の非表示設定が、プリセットボタンと同様にはできないので、苦労しました。
現在、一番の問題は、複雑なセレクタに対応出来ていない事です。 例えば、上記のサンプルスキンの「メッセージボード」に関して、ツールは「.skinMessageBoard」というセレクタを取得して、そのアレンジコードを生成します。
しかし、このスキンのデフォルトのCSSは、下の様なセレクタ表記が使われていて、太字の文字のセレクタが有効になっています。
この場合、セレクタが「.skinMessageBoard」の「background」の修飾コードは、無効になります。 それはCSSの規則で、後方の指定より、精密なセレクタ指定が優先されるからです。 結果として、ユーザーの背景画像を指定する生成コードは効かないので、この対象要素はアレンジができません。
これを改善するには「.columnB .skinMessageBoard」までのセレクタを取得するか、「!important」の指定を追加するしかありません。 私は「!important」を余り使いたくないのですが、セレクタのデータ取得で、同一クラス名の統合をしていて、その親要素のセレクタまで管理するのは荷が重い話です。 ここは「!important」指定の導入しかないかも知れません。
これは、次のバージョンで検討したいと思います。
「Skin CoordinateⅡ」のコード
「新タイプスキン版」は「Skin Coordinate」ver. 1.0 が最新版ですが、「旧タイプスキン版」はこのコードを継承した上での開発なので、「Skin CoordinateⅡ」ver. 1.0 としました。
このスクリプトコードは Chrome / 新Edge / Firefox で動作を確認しています。
◎ このバージョンは「旧タイプスキン」を対象に制作したもので、「新タイプスキン」では動作しません。
◎「旧タイプスキン」「旧タイプのCSS編集用デザイン」のページ、またはスキン変更時のプレビュー画面で「旧タイプスキン」を仮設定している場合に動作します。
◎ 実際に利用できるスキンアレンジを行うには、事前に「Skin Coordinate 移殖ツール」で、「公式スキン」を「CSS編集用デザイン」の環境に移植した上で、このツールでアレンジコードを生成します。(アレンジのテストは移植前でも可能です)
◎「画像フォルダ」のサブウインドウで「画像SRC」のコピー機能が動作します。
◎ ページに任意の背景画像をテスト表示して、ページを表示下で画像の配置調節ができます。 画像配置の設定後にアレンジ用の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 hk; // 編集対象要素のデータベース上のインデックス let b_param=[ [0, '', 0, 0, 0, 0, 0, 0], [0, '', 0, 0, 50, 50, 0, 0], [0, '', 0, 0, 50, 50, 0, 0], [0, '', 0, 0, 50, 50, 0, 0], [0, '.skinBody { background: none; '+ 'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }', 0, 0, 50, 50, 0, 0], [0, '.skinBody::before { background: none; '+ 'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px 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(sb){ // ページ表示エリアの取得が条件 document.addEventListener("keydown", check_key); function check_key(event){ let gate=-1; if(event.altKey==true){ if(event.keyCode==118){ event.preventDefault(); gate=1; }} // ショートカット「Alt+F7」 if(gate==1){ event.stopImmediatePropagation(); event.preventDefault(); main(); }} // ツールの実効関数 }} // catch_key function main(){ if(task==0){ task=1; panel1_disp(); coordinate(); } else if(task==1){ task=0; panel1_remove(); panel2_remove(); }} function panel1_disp(){ let panel=document.createElement('section'); panel.setAttribute('id', 'panel1'); panel.innerHTML= '<input id="b1" type="submit" value="Round Selector">'+ '<input id="b2" type="submit" value="予備②">'+ '<input id="b3" type="submit" value="予備③">'+ '<input id="b4" type="submit" value="SkinBodyⅠ">'+ '<input id="b5" type="submit" value="SkinBodyⅡ">'+ '<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); '+ 'padding: 15px 0 15px 20px; background: rgba(0, 95, 86, 0.8); '+ 'border: 2px solid #fff; border-radius: 4px; width: 980px; z-index: 10; }'+ '#panel1 input { font: normal 16px meiryo; color: #000; '+ 'margin-right: 12px; padding: 4px 6px 2px; } '+ '#b1, #b2, #b3, #b4, #b5, #b6 { outline: none; } '+ '#b1 { padding-left: 15px !important; width: 210px; text-align: left; } '+ '#b2, #b3 { visibility: hidden; position: absolute; } '+ '#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('section'); 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(){ 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_neo(); } else{ if(g_open==1){ g_open=0; panel2_remove(); b1.style.background=''; b1.style.borderStyle=''; for(let k=1; k<8; k++){ let b_id='#b'+k; document.querySelector(b_id).disabled=false; } if(b_param[hk][2]==0){ // ユーザー画像がない場合 b_param[hk][0]=0; // 編集フラグ 0 undo_check(hk); } else { // ユーザー画像があると 編集フラグ1 b_param[hk][0]=1; }} // 編集フラグ1 else{ b_param[1][0]=0; b1.style.boxShadow='none'; undo_check_back_neo(); }}} 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'; } check_back(n); } else{ if(g_open==1){ g_open=0; undo_impose(n); } else{ b_param[n][0]=0; this_b(n).style.boxShadow='none'; undo_check(n); }}} function this_b(n){ switch (n){ case 4: return b4; break; case 5: return b5; break; case 6: return b6; break; case 7: return b7; }} 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_neo(){ div_db(); let write_json=JSON.stringify(b_param); localStorage.setItem('SkinCoor', write_json); // ローカルストレージ 保存 hk=8; let b1=document.querySelector('#b1'); b1.value='Round Selector '+ (hk+1) +'/'+ b_param.length; view(hk); // 初期表示 document.addEventListener('keydown', round_key); function round_key(event){ event.preventDefault(); event.stopImmediatePropagation(); // 両方とも必須 if(b_param[1][0]==1){ if(event.keyCode==37 || event.keyCode==38){ //「←」「↑」 back(); } if(event.keyCode==39 || event.keyCode==40){ //「→」「↓」 forward(); } if(event.keyCode==32 && event.ctrlKey==false){ //「Space」で解除 edit_in_out(); } // 背景画像のアレンジ if(event.keyCode==32 && event.ctrlKey==true){ //「Ctrl + Space」背景削除を戻す edit_delete_back(); }} function back(){ if(hk>8 && g_open==0){ un_view(hk); hk-=1; view(hk); }} function forward(){ if(hk<b_param.length-1 && g_open==0){ un_view(hk); hk+=1; view(hk); }} function edit_in_out(){ if(g_open==0 && b_param[1][0]==1){ // b1が押されている時 g_open=1; edit_view(hk); impose(hk); } else if(g_open==1 && b_param[1][0]==1){ // edit_inを終了時にフラグ決定する g_open=0; undo_impose(hk); view(hk); if(b_param[hk][2]==0){ // ユーザー画像がない場合 b_param[hk][0]=0; // 編集フラグ 0 undo_check(hk); } else { // ユーザー画像があると 編集フラグ1 b_param[hk][0]=1; }}} // 編集フラグ1 function edit_delete_back(){ if(b_param[hk][0]==0){ // クリア指定 b_param[hk][0]=1; b_param[hk][2]=0; // ユーザーの背景指定があれば削除 set_skintag2(hk); } // 実際の背景画像をクリア指定する else if(b_param[hk][0]==1){ // クリア指定を解除 b_param[hk][0]=0; undo_check(hk); } if(g_open==1){ g_open=0; view(hk); undo_impose(hk); }} } // check_key() function view(hk){ let selector=b_param[hk][1].split(' ')[0]; if(selector!=0){ let target=document.querySelector(selector); if(target){ target.style.boxShadow='rgba(0, 160, 255, 0.4) 0 0 0 200vw inset, '+ 'rgb(0, 160, 160) 0 0 0 3px inset'; b1.value='Round Selector '+ (hk+1) +'/'+ b_param.length; }}} function un_view(hk){ let selector=b_param[hk][1].split(' ')[0]; if(selector!=0){ let target=document.querySelector(selector); if(target){ target.style.boxShadow='none'; }}} function edit_view(hk){ let selector=b_param[hk][1].split(' ')[0]; if(selector!=0){ let target=document.querySelector(selector); if(target){ target.style.boxShadow='rgb(0, 160, 160) 0 0 0 3px inset'; }}} } // check_back_neo() function undo_check_back_neo(){ let b1=document.querySelector('#b1'); b1.value='Round Selector '; for(let k=8; k<b_param.length; k++){ let selector=b_param[k][1].split(' ')[0]; if(selector!=0){ let target=document.querySelector(selector); if(target){ target.style.boxShadow='none'; }}}} function div_db(){ // 背景画像のある対象要素のセレクタ・初期値の生成と配列への追加 let div_ele=document.querySelectorAll('.skinBody div'); for(let k=0; k<div_ele.length; k++){ let cumpStyle=window.getComputedStyle(div_ele[k], null); if(cumpStyle.backgroundImage!='none' || cumpStyle.backgroundColor!='rgba(0, 0, 0, 0)'){ if(get_selector(div_ele[k])){ let selector=get_selector(div_ele[k]); let same=0; for(let d=0; d<b_param.length; d++){ if(b_param[d][1].indexOf(selector)!=-1){ same=1; break; }} if(same==0){ let blank_back=selector +' { background: none; box-shadow: '+ 'rgba(0, 160, 255, 0.4) 0 0 0 200vw inset, rgb(0, 160, 160) 0 0 0 2px inset; }'; b_param.push( [0, blank_back, 0, 0, 50, 50, 0, 0]); }}}} } // div_db() function get_selector(ele){ let id_selector=ele.getAttribute('id'); if(id_selector!=null){ return '#'+ id_selector; } else{ let class_selector=ele.className.split(' ')[0]; if(class_selector==''){ return false; } else { return '.'+ class_selector; }}} function check_back(n){ set_skintag2(n); set_skintag3(n); set_skintag4(n); set_skintag6(n); set_skintag7(n); } // ボタン「n」の要素に #skin_n2~#skin_n7 のstyleタグを生成し適用 function undo_check(n){ remove_skintag(n, 2); remove_skintag(n, 3); remove_skintag(n, 4); remove_skintag(n, 6); remove_skintag(n, 7); } function remove_skintag(n, idn){ let id_selector='#skin_'+ String(n*10+idn); if(document.querySelector(id_selector)){ document.querySelector(id_selector).remove(); }} function impose(n){ panel2_disp(); let 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 n_agent; if(n<8){ n_agent=n; } else{ n_agent=1; } let b_id='#b'+ n_agent; document.querySelector(b_id).style.background='#3bff5c'; document.querySelector(b_id).style.borderStyle='solid'; for(let k=1; k<8; k++){ if(k!=n_agent){ let b_id='#b'+k; document.querySelector(b_id).disabled=true; }} if(n>7){ g8.style.visibility='hidden'; } 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 n_agent; if(n<8){ n_agent=n; } else{ n_agent=1; } let b_id='#b'+ n_agent; 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].split(' ')[0] ); alert( '背景画像が表示される範囲のサイズ\n\n '+ area.getBoundingClientRect().width +' × '+ area.getBoundingClientRect().height +'\n\n'+ '要素がウインドウ幅全体に拡がる場合は\n'+ '背景幅も変化する事に注意してください'); } function set_skintag2(n){ let ht=document.querySelector('html'); let css; if(b_param[n][2]==0){ css=b_param[n][1]; } // 内枠線を表示 else{ // SRC指定 アレンジ画像を表示 css=b_param[n][1].split(' ')[0] +' { background: url('+ b_param[n][2] +'); }'; } let style=document.createElement('style'); let s_id='skin_'+ String(n*10+2); style.setAttribute('id', s_id); style.innerHTML=css; if(document.querySelector('#'+s_id)){ document.querySelector('#'+s_id).remove(); } ht.appendChild(style); } function set_skintag3(n){ let ht=document.querySelector('html'); let css; // Size値指定 if(b_param[n][3]==0){ css=b_param[n][1].split(' ')[0] +' { background-size: ""; }'; } if(b_param[n][3]==1){ css=b_param[n][1].split(' ')[0] +' { background-size: contain; }'; } if(b_param[n][3]==2){ css=b_param[n][1].split(' ')[0] +' { background-size: cover; }'; } let style=document.createElement('style'); let s_id='skin_'+ String(n*10+3); style.setAttribute('id', s_id); style.innerHTML=css; if(document.querySelector('#'+s_id)){ document.querySelector('#'+s_id).remove(); } ht.appendChild(style); } function set_skintag4(n){ let ht=document.querySelector('html'); let css; let posx=b_param[n][4]; let posy=b_param[n][5]; css=b_param[n][1].split(' ')[0] +' { background-position: '+ posx +'% '+ posy +'%; }'; let style=document.createElement('style'); let s_id='skin_'+ String(n*10+4); style.setAttribute('id', s_id); style.innerHTML=css; if(document.querySelector('#'+s_id)){ document.querySelector('#'+s_id).remove(); } ht.appendChild(style); } function set_skintag6(n){ if(b_param[n][6]==1){ let ht=document.querySelector('html'); let css; css=b_param[n][1].split(' ')[0] +' { background-repeat: no-repeat; }'; let style=document.createElement('style'); let s_id='skin_'+ String(n*10+6); style.setAttribute('id', s_id); style.innerHTML=css; if(document.querySelector('#'+s_id)){ document.querySelector('#'+s_id).remove(); } ht.appendChild(style); } else{ let s_id='skin_'+ String(n*10+6); if(document.querySelector('#'+s_id)){ document.querySelector('#'+s_id).remove(); }}} function set_skintag7(n){ if(b_param[n][7]==1){ let ht=document.querySelector('html'); let css; css=b_param[n][1].split(' ')[0] +' { background-attachment: fixed; }'; let style=document.createElement('style'); let s_id='skin_'+ String(n*10+7); style.setAttribute('id', s_id); style.innerHTML=css; if(document.querySelector('#'+s_id)){ document.querySelector('#'+s_id).remove(); } ht.appendChild(style); } else{ let s_id='skin_'+ String(n*10+7); if(document.querySelector('#'+s_id)){ document.querySelector('#'+s_id).remove(); }}} function total_css(){ let css=''; for(let k=1; k<b_param.length; k++){ if(b_param[k][0]==1 && b_param[k][1].split(' ')[0]!=0){ if(b_param[k][2]==0){ // 背景の透過指定をした要素 css+=b_param[k][1].split(' ')[0] +' { background: none; } \n\n'; } else{ // 背景画像を指定した要素 css+=b_param[k][1].split(' ')[0] +' { 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」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。