「ベース背景」の濃さを下げました
「Skin Coordinate」で、背景画像・背景色の設定を調べる機能は、背景描画が重なった状態を把握する大事な機能です。 この機能で、ユーザーはどの部分の背景を差替えれば目的を達する事ができるかを理解できます。
背景を消して別の背景に変更する際、その上層・下層に表示されている各種の要素との関係を、できるだけ判り易くする配慮が必要です。 あらゆる表示物の一番基底にある「html」は特別で、「background: none;」を指定しても他層の様に透明化せずに「白」に表示されます。 その結果として、他の上層の要素の白背景の有無が判別し難くなります。 そこで「html」には、特別に格子状の背景描画をして「ベース背景」としています。
「ベース背景」は、上層の要素に指定された背景画像・背景色を判定しやすくする役目があります。 そして「html」に特定の配色をしたスキンの場合は、これを置換えて配色設定に気付かせるためにも必要です。
ベース背景の描画
「ベース背景」は画像ではなく、CSSの指定だけで描画しています。 このテクニックは、以下のページで教わったもので、CSSコードをアレンジして使用しています。
CSSのみで描画すると、テクスチャー画像の様なトラフィックが発生せず、自由にアレンジする事も可能で非常に有効です。
最初は基準色を「#aaa」にしていましたが「#ddd」に変更しました。 たとえば「ブログヘッダー部」には「ブログタイトル」などの表示物があります。 この変更は、その「タイトル」などの表示（下図の青矢印）を見分け易くする目的です。
背景調査の最初に「べース背景」をONにする事は、有効な調査方法です。「html」のボタンをONにした場合は、特別な縞の枠線を表示する様にしました。
各ボタンに設定された層で、背景画像・背景色を削除したスキンの編集結果は、最終的に「見たまま」の状態で、アレンジ用CSSに出力する予定です。 しかし「html」の層だけは、格子の背景の場合は「白」の指定を出力します。「background：none;」を出力しても結果は同じになりますが、当然、格子の表示は出力しません。
画像の登録とSRC取得機能の制作
差替え用の「背景画像」は、ブログに挿入する画像と同様にアップロードして、それを「背景画像」として使います。 これは編集画面を開き、画像をアップロードし、ユーザー画像サーバーに登録されたその画像のSRCを調べるという手順で可能です。
しかし記事の編集は不要なので、「管理メニュー」→「管理・設定」→「画像フォルダ」のメニュー画面を直接呼び出すことにしました。 上記の「コントロールパネル」で、右端の「Upload」ボタンを押せば、このメニュー画面が開く様にしました。
この「画像フォルダ」は基幹メニューながら、編集画面で殆どの事が出来るので、今は目に着かない所に置かれています。 デフォルトでは以下のデザインです。
「Skin Coordinate」のサブウインドウとして開くので、この画面をスクリプト上でアレンジしました。 不要なボタンなどを全て省き、「画像」の「アップロード・削除」と、アップロード後の「画像のSRC」取得の専用画面にしています。
サブウインドウは本来の3/4ほどの幅で、しかもサムネイルは拡大しています。「背景画像」は、横長でサイズが大きい場合が多く、通常のサムネイル表示方法では細い帯になりがちです。 これを改め、高精細な元画像を取得し、サムネイルの高さに拡張する表示仕様に変えています。
ファイルのアップロード方法は一般的で、「ファイルを選択」を押し、ファイルを指定したら「アップロード」ボタンを押という手順です。
下のサムネイル群には、この「画像フォルダ」や「編集画面」でアップロードした「画像」が並びます。 本来はサムネイルのクリックで、画像の名前付け機能が起動します。 しかし「Skin Coordinate」が起動中は、サムネイルの左クリックで「画像のSRC」がクリップボードにコピーされます。
表面上で何も起こらず、ユーザーはコピー動作が判らないので、クリックしたサムネイルに 2secだけ赤枠を表示します。 別のサムネイルをクリックすると、そのSRCがコピーされ、クリップボードは上書きされます。
ここでコピーした「SRC」は、再び元のメインウインドウに戻って、「背景画像」を差し替えるために入力しますが、この部分は未だ作っていません。
なお、サムネイルのクリックで、自動的にメインウインドウに「画像SRC」を持ち込みたいところですが、これはブラウザのセキュリティ壁により出来ません。
「Skin Coordinate」のコード
以下のスクリプトコードは Chrome / 新Edgeで動作を確認しています。 ツールは未だ開発の最初の段階です。
◎ ページャーの細い「旧タイプ」のスキンでは、正しく動作しません。
◎「画像フォルダ」のサブウインドウでは「画像SRC」のコピー機能が動作します。
以下のコードを「Tampermonkey」に登録する事で、ページ背景設定の調査ツールとして動作させる事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Skin Coordinate 〕ver. 0.3
// ==UserScript==
// @name Skin Coordinate
// @namespace http://tampermonkey.net/
// @version 0.3
// @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*
// @run-at document-start
// @noframes
// @grant none
// ==/UserScript==
let task=0;
let h1=0;
let h2=0;
let b1=0;
let b2=0;
let b3=0;
let bo=0;
let ht=0;
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();
act(); }} // ツールの実効関数
}} // catch_key
/*
panel_disp();
coordinate();
*/
function act(){
if(task==0){
task=1;
panel_disp();
coordinate(); }
else if(task==1){
task=0;
panel_remove(); }}
function panel_disp(){
let panel=document.createElement('div');
panel.setAttribute('id', 'skin_panel');
panel.innerHTML=
'<input id="h1_type" type="submit" value="Header 1">'+
'<input id="h2_type" type="submit" value="Header 2">'+
'<input id="b1_type" type="submit" value="BlogText 1">'+
'<input id="b2_type" type="submit" value="BlogText 2">'+
'<input id="b3_type" type="submit" value="BlogText 3">'+
'<input id="body_type" type="submit" value="body">'+
'<input id="html_type" type="submit" value="html">'+
'<input id="upload" type="submit" value="Upload">';
let css=
'#skin_panel { 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; }'+
'#skin_panel input { font: normal 16px meiryo; color: #000; '+
'margin-right: 20px; padding: 4px 8px 2px; }';
let style=document.createElement('style');
style.innerHTML=css;
panel.appendChild(style);
let skin_panel=document.querySelector('#skin_panel');
if(!skin_panel){
document.querySelector('body').appendChild(panel); }} // panel_disp()
function panel_remove(){
let skin_panel=document.querySelector('#skin_panel');
skin_panel.remove(); }
function coordinate(){
let h1_type=document.querySelector('#h1_type');
let h2_type=document.querySelector('#h2_type');
let b1_type=document.querySelector('#b1_type');
let b2_type=document.querySelector('#b2_type');
let b3_type=document.querySelector('#b3_type');
let body_type=document.querySelector('#body_type');
let html_type=document.querySelector('#html_type');
let upload=document.querySelector('#upload');
h1_type.onclick=function(){
if(h1==0){
h1=1;
h1_type.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
back_show(1); }
else{
h1=0;
h1_type.style.boxShadow='none';
back_hide(1); }}
h2_type.onclick=function(){
if(h2==0){
h2=1;
h2_type.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
back_show(2); }
else{
h2=0;
h2_type.style.boxShadow='none';
back_hide(2); }}
b1_type.onclick=function(){
if(b1==0){
b1=1;
b1_type.style.boxShadow='0 0 0 2px red, 0 0 0 4px #fff';
back_show(3); }
else{
b1=0;
b1_type.style.boxShadow='none';
back_hide(3); }}
b2_type.onclick=function(){
if(b2==0){
b2=1;
b2_type.style.boxShadow='0 0 0 2px red, 0 0 0 4px #fff';
back_show(4); }
else{
b2=0;
b2_type.style.boxShadow='none';
back_hide(4); }}
b3_type.onclick=function(){
if(b3==0){
b3=1;
b3_type.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
back_show(5); }
else{
b3=0;
b3_type.style.boxShadow='none';
back_hide(5); }}
body_type.onclick=function(){
if(bo==0){
bo=1;
body_type.style.boxShadow='0 0 0 2px #0b8, 0 0 0 4px #fff';
back_show(6); }
else{
bo=0;
body_type.style.boxShadow='none';
back_hide(6); }}
html_type.onclick=function(){
if(ht==0){
ht=1;
html_type.style.boxShadow='0 0 0 4px #fff';
html_type.style.outline='2px dotted #000';
back_show(7); }
else{
ht=0;
html_type.style.boxShadow='none';
html_type.style.outline='none';
back_hide(7); }}
upload.onclick=function(){
window.open('https://blog.ameba.jp/ucs/upload/srvimagelist.do',
null, 'top=50,left=100,width=800,height=640'); }
} // coordinate()
function back_show(n){
let css;
let s_id;
let sp=document.querySelector('.skin-page');
if(n==1){
css='.skin-bgHeader { background: none; '+
'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }'; }
if(n==2){
css='.skin-columnA .skin-bgHeader > div, '+
'.skin-columnB .skin-bgHeader > div { background: none; '+
'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }'; }
if(n==3){
css='.skin-page { background: none; '+
'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }'; }
if(n==4){
css='.skin-page::before { background: none; '+
'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }'; }
if(n==5){
css='.skin-blogBody { background: none; '+
'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }'; }
if(n==6){
css='body { background: none; '+
'box-shadow: #0b8 0 0 0 10px inset, #fff 0 0 0 12px inset; }'; }
if(n==7){
css='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; }'; }
let style=document.createElement('style');
s_id='skin_'+n;
style.setAttribute('id', s_id);
style.innerHTML=css;
if(!document.querySelector('#'+s_id)){
sp.appendChild(style); }}
function back_hide(n){
let s_id;
s_id='skin_'+n;
document.querySelector('#'+s_id).remove(); }
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);
}); }}
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; }
} // upload_w()
「Skin Coordinate」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Skin Coordinate」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
