背景画像の配置コントロール
背景画像の配置コントロールは、作り始めるまでに色々と推敲しました。「用意した画像のサイズ」と当てはめる「画像エリアのサイズ」との大小で、画像の配置の仕方は、いく通りもあります。 画像の一部を切り取る（隠す）トリミング表示の場合や、画像エリアに小型の画像をタイル状に敷き詰める場合、中サイズの画像をページの片方に偏らせたり、中央に配置したりする場合も考えられます。
それらの多くの場合に対応して、しかも扱い易いコントロールの仕様を求めて、色々なサイズの画像を使って試しました。 その結果から、コントロールのボタンを、以下の5個に纏めています。
❶ 画像エリアに対するフィットのさせかた
Size A background-size: auto; （無指定）
Size B background-size: contain;
Size C background-size: cover;
❷ background-position: x% y%;
横方向の移動（x値） 0% 左端 / 50% 中央 / 100% 右端
❸ background-position: x% y%;
縦方向の移動（y値） 0% 上端 / 50% 中央 / 100% 下端
❹ タイル表示
タイル表示あり background-repeat: （無指定）
タイル表示なし background-repeat: no-repeat;
❺ スクロールしない固定表示
スクロールする background-attachment: （無指定）
スクロールしない background-attachment: fixed;
実際の操作の例
❶「contain」の指定は、画像エリアに内接して、最も大きく表示する設定です。
上の場合は上辺/下辺で内接していますが、画像が横長の場合は、左辺/右辺で内接する場合もあります。 この例は ❷ のコントロールだけが有効で、下図の様に左右方向の調節が出来ます。
❶「cover」の指定は、画像エリアの背景が露出しない様な、最小のサイズで表示する設定です。 調節し易い様に ❶ を切換えると最初は中央で表示します。
この例では、画像の左辺/右辺に画像エリアが内接し、上下方向のみが調節可能です。
また、「contain」「cover」を指定しない場合は、画像の拡大/縮小が生じません。 下の様に、画像エリアに対して十分に小さな画像の場合は、エリア内で上下左右に移動する調節が可能です。
これは、背景画像というより、アクセントの画像パーツを配置する事に使えます。
反対に用意した画像が十分に大きな場合は、画像の一部を表示するトリミング表示になります。 画像編集なしで必要な部分だけを背景に使えますが、不要なトラフィックを避けるために、調整結果を参考に画像アプリで不要な部分をカットして、実使用の背景画像を作って再アップロードするのが理想です。
❹「Repeat」はタイル表示で、ボタンを押すと「No Rep」の1個の表示になります。
ページ端部の背景切れが生じないので、ページ全体の背景にはタイル表示が大変に良く使われます。 また、縦方向がとても長いウェブページは、縦方向に背景を繰り返すのが定石です。 しかし、画像エリアが固定されたヘッダーの様な部分で、繰り返し表示をさせたくない場合は「No Rep」を指定します。
❺「background-attachment」の指定は、背景を固定し、その上を記事だけがスライドする効果が得られます。 このブログページも控え目にこれを使っています。
以上のコントロールで、通常必要な調節がほぼ可能です。 画面の状態を見ながら配置の調節ができ、これはDevToolsを使っているのと同じです。 もし、背景用画像の編集ができるなら、このツールと組み合わせて完璧な設定が出来るでしょう。
以上の画像の配置調節機能だけではなく、他の多くの部分を作り込みました。 それは、次ページで纏めます。
「Skin Coordinate」のコード
以下のスクリプトコードは Chrome / 新Edgeで動作を確認しています。 ツールは開発の最終段階です。
◎ ページャーの細い「旧タイプ」のスキンでは、正しく動作しません。
◎「画像フォルダ」のサブウインドウで「画像SRC」のコピー機能が動作します。
◎ ページに任意の背景画像をテスト表示でき、調節後にCSSコードを出力できます。
◎ 背景を表示する「画像エリア」のピクセルサイズを表示する機能があります。
◎ ページを表示しながら、画像の配置調節をできる機能を追加しました。
◎ CSSコードを登録する「フリースペース」の編集ページを開くボタンを追加しました。 また、その編集画面をアレンジして編集し易くしました。
以下のコードを「Tampermonkey」に登録する事で、ページ背景画像の設定ツールとして動作させる事が出来ます。 今後、細部のブラッシュアップと、「旧タイプ」スキンへの対応を進める予定です。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Skin Coordinate 〕ver. 0.6
// ==UserScript==
// @name Skin Coordinate
// @namespace http://tampermonkey.net/
// @version 0.6
// @description 「ヘッダー背景画像」のチェック
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @match https://blog.ameba.jp/ucs/skin/srvskinpreview*
// @match https://blog.ameba.jp/ucs/upload/srvimage*
// @match https://blog.ameba.jp/ucs/profile/*
// @match https://blog.ameba.jp/ucs/sidebar/*
// @run-at document-start
// @noframes
// @grant none
// ==/UserScript==
let task=0; // メイン ON/OFF
let g_open=0; // サブパネル ON/OFF
let b_param=[
['0', '0', '0', '0', '0', '0', '0', '0'],
['0', '.skin-bgHeader { background: none; box-shadow: '+
'#2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }', '0', '0', '50', '50', '0', '0'],
['0', '.skin-bgHeader > div { background: none; '+
'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }', '0', '0', '50', '50', '0', '0'],
['0', '.skin-page { background: none; '+
'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }', '0', '0', '50', '50', '0', '0'],
['0', '.skin-page::before { background: none; '+
'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }', '0', '0', '50', '50', '0', '0'],
['0', '.skin-blogBody { background: none; '+
'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }', '0', '0', '50', '50', '0', '0'],
['0', 'body { background: none; '+
'box-shadow: #0b8 0 0 0 16px inset, #fff 0 0 0 18px inset; }', '0', '0', '50', '50', '0', '0'],
['0', 'html { background: #fff; '+
'background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, '+
'transparent 75%, #ddd 75%, #ddd), '+
'linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 75%, '+
'#ddd 75%, #ddd); background-size: 10px 10px; }', '0', '0', '50', '50', '0', '0']];
// b_param[n][0] 0:デフォルト 1:アレンジCSS適用
// b_param[n][1] CSS初期値
// b_param[n][2] SRC
// b_param[n][3] ～ b_param[n][7] 背景プロパティ
let target=document.querySelector('head');
let monitor=new MutationObserver(catch_key);
monitor.observe(target, { childList: true });
catch_key();
function catch_key(){
let sp=document.querySelector('.skin-page');
if(sp){ // ページ表示エリアの取得が条件
document.addEventListener("keydown", check_key);
function check_key(event){
let gate=-1;
if(event.altKey==true){
if(event.keyCode==117){
event.preventDefault(); gate=1; }} // ショートカット「Alt＋F6」
if(gate==1){
event.stopImmediatePropagation();
event.preventDefault();
main(); }} // ツールの実効関数
}} // catch_key
function main(){
if(task==0){
task=1;
panel1_disp();
coordinate(); }
else if(task==1){
task=0;
panel1_remove();
panel2_remove(); }}
function panel1_disp(){
let panel=document.createElement('div');
panel.setAttribute('id', 'panel1');
panel.innerHTML=
'<input id="b1" type="submit" value="Header①">'+
'<input id="b2" type="submit" value="Header②">'+
'<input id="b3" type="submit" value="BlogText③">'+
'<input id="b4" type="submit" value="BlogText④">'+
'<input id="b5" type="submit" value="BlogText⑤">'+
'<input id="b6" type="submit" value="Body⑥">'+
'<input id="b7" type="submit" value="Html⑦">'+
'<input id="upload" type="submit" value="Upload">'+
'<input id="get_css" type="submit" value="GetCSS">'+
'<input id="fspace" type="submit" value="FSpace">';
let css=
'#panel1 { position: fixed; bottom: 40px; left: calc(50% - 490px); '+
'width: 980px; padding: 15px 0 15px 20px; background: #005f56; '+
'border: 2px solid #fff; border-radius: 4px; z-index: 10; }'+
'#panel1 input { font: normal 16px meiryo; color: #000; '+
'margin-right: 15px; padding: 4px 6px 2px; } '+
'#b1, #b2, #b3, #b4, #b5, #b6 { outline: none; }';
let style=document.createElement('style');
style.innerHTML=css;
panel.appendChild(style);
let panel1=document.querySelector('#panel1');
if(!panel1){
document.querySelector('body').appendChild(panel); }} // panel1_disp()
function panel1_remove(){
let panel1=document.querySelector('#panel1');
if(panel1){
panel1.remove(); }}
function panel2_disp(){
let panel=document.createElement('div');
panel.setAttribute('id', 'panel2');
panel.innerHTML=
'<input id="gS" type="submit" value="S">'+
'<input id="g0" type="submit" value="New">'+
'<input id="g1" placeholder="背景用の画像SRCを入力" autocomplete="off">'+
'<input id="g2" type="submit" value="Set SRC">'+
'<input id="g3" type="submit">'+
'<div id="wper1"><input id="g4" type="number" min="0" max="100"></div>'+
'<div id="wper2"><input id="g5" type="number" min="0" max="100"></div>'+
'<input id="g6" type="submit">'+
'<input id="g7" type="submit">'+
'<input id="g8" type="submit" value="X">';
let css=
'#panel2 { position: fixed; bottom: 110px; left: calc(50% - 490px); '+
'width: 980px; padding: 15px 0 15px 20px; background: #005f56; '+
'border: 2px solid #fff; border-radius: 4px; z-index: 10;} '+
'#panel2 input { position: relative; font: normal 16px meiryo; color: #000; '+
'margin-right: 15px; padding: 4px 6px 2px; } '+
'#g1 { width: 300px; } #g3, #g6, #g7 { width: 70px; }'+
'#g4, #g5 { width: 54px; text-align: center; padding: 4px 5px 2px 1px !important; }'+
'#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: #fff; }'+
'#g4:hover, #g5:hover { z-index: 1; }';
let style=document.createElement('style');
style.innerHTML=css;
panel.appendChild(style);
let panel2=document.querySelector('#panel2');
if(!panel2){
document.querySelector('body').appendChild(panel); }} // panel2_disp()
function panel2_remove(){
let panel2=document.querySelector('#panel2');
if(panel2){
panel2.remove(); }}
function coordinate(){
let b1=document.querySelector('#b1');
let b2=document.querySelector('#b2');
let b3=document.querySelector('#b3');
let b4=document.querySelector('#b4');
let b5=document.querySelector('#b5');
let b6=document.querySelector('#b6');
let b7=document.querySelector('#b7');
let upload=document.querySelector('#upload');
let get_css=document.querySelector('#get_css');
let fspace=document.querySelector('#fspace');
b1.onclick=function(){
if(b_param[1][0]==0){
b_param[1][0]=1;
b1.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
check_back(1); }
else{
b_param[1][0]=0;
b1.style.boxShadow='none';
undo_check(1);
g_open=0;
undo_impose(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{
b_param[2][0]=0;
b2.style.boxShadow='none';
undo_check(2);
g_open=0;
undo_impose(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{
b_param[3][0]=0;
b3.style.boxShadow='none';
undo_check(3);
g_open=0;
undo_impose(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{
b_param[4][0]=0;
b4.style.boxShadow='none';
undo_check(4);
g_open=0;
undo_impose(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{
b_param[5][0]=0;
b5.style.boxShadow='none';
undo_check(5);
g_open=0;
undo_impose(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{
b_param[6][0]=0;
b6.style.boxShadow='none';
undo_check(6);
g_open=0;
undo_impose(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{
b_param[7][0]=0;
b7.style.boxShadow='none';
b7.style.outline='none';
undo_check(7);
g_open=0;
undo_impose(7); }}
b1.oncontextmenu=function(event){
event.preventDefault();
if(g_open==0 && b_param[1][0]==1){
g_open=1;
impose(1); }
else{
g_open=0;
undo_impose(1); }}
b2.oncontextmenu=function(event){
event.preventDefault();
if(g_open==0 && b_param[2][0]==1){
g_open=1;
impose(2); }
else{
g_open=0;
undo_impose(2); }}
b3.oncontextmenu=function(event){
event.preventDefault();
if(g_open==0 && b_param[3][0]==1){
g_open=1;
impose(3); }
else{
g_open=0;
undo_impose(3); }}
b4.oncontextmenu=function(event){
event.preventDefault();
if(g_open==0 && b_param[4][0]==1){
g_open=1;
impose(4); }
else{
g_open=0;
undo_impose(4); }}
b5.oncontextmenu=function(event){
event.preventDefault();
if(g_open==0 && b_param[5][0]==1){
g_open=1;
impose(5); }
else{
g_open=0;
undo_impose(5); }}
b6.oncontextmenu=function(event){
event.preventDefault();
if(g_open==0 && b_param[6][0]==1){
g_open=1;
impose(6); }
else{
g_open=0;
undo_impose(6); }}
b7.oncontextmenu=function(event){
event.preventDefault();
if(g_open==0 && b_param[7][0]==1){
g_open=1;
impose(7); }
else{
g_open=0;
undo_impose(7); }}
upload.onclick=function(){
window.open('https://blog.ameba.jp/ucs/upload/srvimagelist.do',
null, 'top=50,left=100,width=800,height=640'); }
get_css.onclick=function(){
total_css(); }
fspace.onclick=function(){
window.open('https://blog.ameba.jp/ucs/profile/srvprofileupdateinput.do',
null, 'top=50,left=100,width=800,height=640'); }
} // coordinate()
function check_back(n){
trim_2(n);
trim_3(n);
trim_4(n);
trim_6(n);
trim_7(n); }
function undo_check(n){
let s_id2='skin_'+ n +'2';
if(document.querySelector('#'+s_id2)){
document.querySelector('#'+s_id2).remove(); }
let s_id3='skin_'+ n +'3';
if(document.querySelector('#'+s_id3)){
document.querySelector('#'+s_id3).remove(); }
let s_id4='skin_'+ n +'4';
if(document.querySelector('#'+s_id4)){
document.querySelector('#'+s_id4).remove(); }
let s_id6='skin_'+ n +'6';
if(document.querySelector('#'+s_id6)){
document.querySelector('#'+s_id6).remove(); }
let s_id7='skin_'+ n +'7';
if(document.querySelector('#'+s_id7)){
document.querySelector('#'+s_id7).remove(); }}
function impose(n){
panel2_disp();
let gS=document.querySelector('#gS');
let g0=document.querySelector('#g0');
let g1=document.querySelector('#g1');
let g2=document.querySelector('#g2');
let g3=document.querySelector('#g3');
let g4=document.querySelector('#g4');
let g5=document.querySelector('#g5');
let g6=document.querySelector('#g6');
let g7=document.querySelector('#g7');
let g8=document.querySelector('#g8');
let wper1=document.querySelector('#wper1');
let wper2=document.querySelector('#wper2');
let b_id='#b'+n
document.querySelector(b_id).style.background='#3bff5c';
for(let k=1; k<8; k++){
if(k!=n){
let b_id='#b'+k;
document.querySelector(b_id).disabled=true; }}
if(b_param[n][2]==0){ // SRC入力無し 未処理・初期化後
g1.value='';
g1.disabled=false;
g3.disabled=true;
g4.disabled=true;
g5.disabled=true;
g6.disabled=true;
g7.disabled=true;
wper1.style.opacity='0.3';
wper2.style.opacity='0.3'; }
else{
g1.value=b_param[n][2];
g1.disabled=true;
g3.disabled=false;
g4.disabled=false;
g5.disabled=false;
g6.disabled=false;
g7.disabled=false;
wper1.style.opacity='1';
wper2.style.opacity='1'; }
if(b_param[n][3]==0){ // Size値
g3.value='Size A'; }
else if(b_param[n][3]==1){
g3.value='Size B'; }
else if(b_param[n][3]==2){
g3.value='Size C'; }
g4.value=b_param[n][4]; // Psition値
g5.value=b_param[n][5]; // Psition値
if(b_param[n][6]==0){ // Repeat値
g6.value='Repeat'; }
else{
g6.value='No Rep'; }
if(b_param[n][7]==0){ // Fix Position値
g7.value='Not Fix'; }
else{
g7.value='Fixed'; }
check_back(n); // 全ての設定値を適用してページを再表示
gS.onclick=function(){
show_size(n); }
g0.onclick=function(){ // 処理を初期化する
g1.disabled=false;
g3.disabled=true;
g4.disabled=true;
g5.disabled=true;
g6.disabled=true;
g7.disabled=true;
wper1.style.opacity='0.3';
wper2.style.opacity='0.3';
g1.value='';
b_param[n][2]=0; // SRCリセット
g3.value='Size A';
b_param[n][3]=0; // Size値リセット
g4.value=50; // Psition値リセット
b_param[n][4]=50;
g5.value=50; // Psition値リセット
b_param[n][5]=50;
g6.value='Repeat';
b_param[n][6]=0; // Repeat値リセット
g7.value='No Fix';
b_param[n][7]=0; // Fix Position値リセット
trim_2(n); // 内枠線表示
let s_id3='skin_'+ n +'3';
if(document.querySelector('#'+s_id3)){
document.querySelector('#'+s_id3).remove(); }
let s_id4='skin_'+ n +'4';
if(document.querySelector('#'+s_id4)){
document.querySelector('#'+s_id4).remove(); }
let s_id6='skin_'+ n +'6';
if(document.querySelector('#'+s_id6)){
document.querySelector('#'+s_id6).remove(); }
let s_id7='skin_'+ n +'7';
if(document.querySelector('#'+s_id7)){
document.querySelector('#'+s_id7).remove(); }}
g2.onclick=function(){
if(b_param[n][2]==0 && g1.value!=''){ // Newの状態のみ入力可
b_param[n][2]=g1.value; // SRCを取得
g1.disabled=true;
g3.disabled=false;
g4.disabled=false;
g5.disabled=false;
g6.disabled=false;
g7.disabled=false;
wper1.style.opacity='1';
wper2.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='';
for(let k=1; k<8; k++){
let b_id='#b'+k;
document.querySelector(b_id).disabled=false; }}
function selector(n){
if(n==1){
return '.skin-bgHeader'; }
if(n==2){
return '.skin-bgHeader > div'; }
if(n==3){
return '.skin-page'; }
if(n==4){
return '.skin-page::before'; }
if(n==5){
return '.skin-blogBody'; }
if(n==6){
return 'body'; }
if(n==7){
return 'html'; }}
function show_size(n){
let area;
area=document.querySelector(selector(n));
alert( area.getBoundingClientRect().width
+' × '+ area.getBoundingClientRect().height +'\n\n'+
'（注）要素がウインドウ幅いっぱいに拡がる場合は\n'+
' 背景の幅も変化する事に注意してください'); }
function trim_2(n){
let sp=document.querySelector('.skin-page');
let css;
if(b_param[n][2]==0){
css=b_param[n][1]; } // 内枠線を表示
else{
css=selector(n) +' { background: url('+ b_param[n][2] +'); }'; } // SRC指定
let style=document.createElement('style');
let s_id='skin_'+ n +'2';
style.setAttribute('id', s_id);
style.innerHTML=css;
if(document.querySelector('#'+s_id)){
document.querySelector('#'+s_id).remove(); }
sp.appendChild(style); }
function trim_3(n){
let sp=document.querySelector('.skin-page');
let css; // Size値指定
if(b_param[n][3]==0){
css=selector(n) +' { background-size: ""; }'; }
if(b_param[n][3]==1){
css=selector(n) +' { background-size: contain; }'; }
if(b_param[n][3]==2){
css=selector(n) +' { background-size: cover; }'; }
let style=document.createElement('style');
let s_id='skin_'+ n +'3';
style.setAttribute('id', s_id);
style.innerHTML=css;
if(document.querySelector('#'+s_id)){
document.querySelector('#'+s_id).remove(); }
sp.appendChild(style); }
function trim_4(n){
let sp=document.querySelector('.skin-page');
let css;
let posx=b_param[n][4];
let posy=b_param[n][5];
css=selector(n) +' { background-position: '+ posx +'% '+ posy +'%; }';
let style=document.createElement('style');
let s_id='skin_'+ n +'4';
style.setAttribute('id', s_id);
style.innerHTML=css;
if(document.querySelector('#'+s_id)){
document.querySelector('#'+s_id).remove(); }
sp.appendChild(style); }
function trim_6(n){
if(b_param[n][6]==1){
let sp=document.querySelector('.skin-page');
let css;
css=selector(n) +' { background-repeat: no-repeat; }';
let style=document.createElement('style');
let s_id='skin_'+ n +'6';
style.setAttribute('id', s_id);
style.innerHTML=css;
if(document.querySelector('#'+s_id)){
document.querySelector('#'+s_id).remove(); }
sp.appendChild(style); }
else{
let s_id='skin_'+ n +'6';
if(document.querySelector('#'+s_id)){
document.querySelector('#'+s_id).remove(); }}}
function trim_7(n){
if(b_param[n][7]==1){
let sp=document.querySelector('.skin-page');
let css;
css=selector(n) +' { background-attachment: fixed; }';
let style=document.createElement('style');
let s_id='skin_'+ n +'7';
style.setAttribute('id', s_id);
style.innerHTML=css;
if(document.querySelector('#'+s_id)){
document.querySelector('#'+s_id).remove(); }
sp.appendChild(style); }
else{
let s_id='skin_'+ n +'7';
if(document.querySelector('#'+s_id)){
document.querySelector('#'+s_id).remove(); }}}
function total_css(){
let css='';
for(let k=1; k<8; k++){
if(b_param[k][0]==1){
if(b_param[k][2]==0){ // 背景の透過指定をした要素
css+=selector(k) +' { background: none; } '; }
else{ // 背景画像を指定した要素
css+=selector(k) +' { background: url('+ b_param[k][2] +'); ';
if(b_param[k][3]==1){
css+='background-size: contain; '; }
else if(b_param[k][3]==2){
css+='background-size: cover; '; }
let posx=b_param[k][4];
let posy=b_param[k][5];
css+='background-position: '+ posx +'% '+ posy +'%; ';
if(b_param[k][6]==1){
css+='background-repeat: no-repeat; '; }
if(b_param[k][7]==1){
css+='background-attachment: fixed; '; }
css+='} ';
}}}
copyClipboard(css);
alert("CSSをコピーしました");
} // total_css()
function copyClipboard(str){ // クリップボードにコピーする関数
let tmp_area=document.createElement("textarea");
tmp_area.textContent=str;
let body=document.getElementsByTagName("body")[0];
body.appendChild(tmp_area);
tmp_area.select();
let retVal=document.execCommand('copy');
body.removeChild(tmp_area);
return retVal; }
window.addEventListener('DOMContentLoaded', function(){
let upl_index=document.querySelector('#uploadIndex');
if(upl_index){ // 画像フォルダウインドウの場合に動作する
upload_w(); }});
function upload_w(){
let css=
'#globalHeader, #ucsHeader, .l-ucs-sidemenu-area, '+
'.selectImg .numLabel, label[for="image_title1"], input.inputText, '+
'input[type="checkbox"], #imageList .actionControl, #moreUpload, '+
'#imageList .imageBox .btnDefault, #mailBlog, #ucsMainRight, '+
'#footerAd, #globalFooter { display: none !important; } '+
'#ucsContent { width: 770px !important; background: #fff; } '+
'#ucsMain { font-size: 16px; background: none; } '+
'#ucsMainLeft { width: 740px !important; } '+
'#uploadImgTitle h2 { font-size: 16px; padding-top: 4px; } '+
'.comment { font-size: 16px; width: 16em; overflow: hidden; '+
'white-space: nowrap; } '+
'.selectImg:not(:nth-child(3)) { display: none; } '+
'.selectImg .fileUp { width: 500px; padding: 10px; font-size: 16px; } '+
'input#upload { font-size: 16px; padding: 1px 0 0; } '+
'.imageBox { width: 187px; margin: 0; } '+
'.imageBox .thickboxEditTitle { display: block; overflow: hidden; '+
'width: 175px; } '+
'.imageBox dt label { color: transparent; } '+
'.imageBox img { height: 130px; width: auto; } '+
'html { overflow-y: scroll !important; }';
let style=document.createElement('style');
style.setAttribute('id', 'skin_upload');
style.innerHTML=css;
let skin_upload=document.querySelector('#skin_upload');
if(!skin_upload){
document.querySelector('html').appendChild(style); }
let target3=document.querySelector('form[name="imageListForm"]');
let monitor3=new MutationObserver(imagelist);
monitor3.observe(target3, { childList: true });
imagelist();
function imagelist(){
let imagebox_img=document.querySelectorAll('.imageBox img');
for(let k=0; k<imagebox_img.length; k++){
imagebox_img[k].parentNode.removeAttribute('href');
let rsrc=imagebox_img[k].getAttribute('src');
let src=rsrc.substring(0, rsrc.indexOf("?"));
imagebox_img[k].setAttribute('src', src);
imagebox_img[k].addEventListener('mousedown', function(event){
event.stopImmediatePropagation();
let gsrc=imagebox_img[k].getAttribute('src');
copyClipboard(gsrc);
imagebox_img[k].parentNode.style.outline='3px solid red';
imagebox_img[k].parentNode.style.outlineOffset='-3px';
setTimeout(()=>{
imagebox_img[k].parentNode.style.outline='none';
}, 2000); });
}}
} // upload_w()
window.addEventListener('DOMContentLoaded', function(){
let profileIndex=document.querySelector('#profileIndex');
let editArrange=document.querySelector('#editArrange');
if(profileIndex || editArrange){ // 画像フォルダウインドウの場合に動作する
edit_w(); }});
function edit_w(){
let css=
'#globalHeader, #ucsHeader, .l-ucs-sidemenu-area, #ucsMainRight, '+
'ul.editTools , .infoArea , #footerAd, #globalFooter '+
'{ display: none !important; } '+
'#ucsContent { width: 770px !important; background: #fff; } '+
'#ucsMain { font-size: 16px; background: none; } '+
'#ucsMainLeft { width: 740px !important; } '+
'.moreLink a { font-weight: bold; color: #000; } '+
'.textInputArea .textarea1 { width: 715px !important; height: 320px; '+
'font-size: 16px; } .limText { margin: 0; } '+
'html { overflow-y: scroll !important; }';
let style=document.createElement('style');
style.setAttribute('id', 'edit_w');
style.innerHTML=css;
let edit_w=document.querySelector('#edit_w');
if(!edit_w){
document.querySelector('html').appendChild(style); }
} // edit_w()
「Skin Coordinate」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Skin Coordinate」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
