「標準・タイル・リスト」の型式の変更機能
公式スキンをCSS編集用デザインのスキンに簡単に移植できる様になりました。 5種の公式スキンで、スキンのコードネームと異なるブログ型式（タイル・リスト）が適用される事だけが問題点で、他は問題なく使えます。
自動的にブログ型式・カラム指定を受け継ぎ、CSS編集用デザインに移植するのが、最初に考えた仕様です。 しかし、上記の特例の問題に対処できる様に、移植時に型式・カラムの設定を選択・変更できる機能を追加しました。
これにより、型式が変わってしまう5種は救済できます。 更に、トップページの「タイル」「リスト」が要らないという場合に、その変更が実現できます。 また逆に、これまでのデザインのままで「タイル」「リスト」表示を追加する事が出来ます。
（追加は、新タイプのスキンに限定されます）
また、カラム（サイドバー）の設定も、移植時に同時に変更出来る様にしました。
移植操作の前にバックアップ
移植の操作で「フリースペース」「フリープラグイン」「メッセージボード」等のデータが失われる事はありません。 しかし、「フリースペース」「フリープラグイン」の配置変化で、登録した表示や機能が一時的に無効になる場合があります。 スキン操作の前に、サイドバーの配置設定 の状態をスクリーンショットで記録しておくと安全です。
一番問題になるのは、既に「CSS編集用デザイン」のスキンを使用していて、ユーザー独自のCSSアレンジコードを記入している場合です。 このスキルのあるユーザーには自明の事と思いますが、あらゆるスキン操作の前に、現在のスキンCSSのバックアップを行ってください。
移植ツールの操作方法
ブログページを表示し、ショートカットの「Alt + F6」を押します。 下図の赤枠で示した コントロールパネルが表示されます。
左側の3個が主要な操作ボタンです。 ボタンを押すと、操作が右へ移って行きます。 ❶ は「コード枠」 ❷ は「設定パネル」を開閉し、❶ を閉じると ➋ も閉じ、両方が揃わないと ❸ が押せません。
❶「スキン情報」は最初に押すボタンで、現在表示中のページに適用されているスキンのコードネームとCSSコードが「コード枠」に表示されます。 アメブロのページは、全スキン共通の基本CSSが適用され、その上に「公式スキン」が色付けをする構造です。 ユーザーが選択・変更できるのは「公式スキン」です。
この「コード枠」が邪魔になる場合は、縦方向に伸縮できます。 表示内容はコピーが可能ですが編集は出来ません。「コード枠」の表示で ❷ のボタンが有効になります。
❷「トップページ型式・カラムの設定」を押すと「設定パネル」が表示されます。
パネルが開いた最初は、「型式」はコードネームに従った選択になります。 一方で「カラム」はユーザーがこれまで選択していた状態が表示されます。
最初に述べた様に「型式」は5種の特例を除き、現在のブログ型式の通りです。 旧タイプのスキンは「標準型」固定ですが、新タイプのスキンはここで自由に型式を変更できます。「カラム」はこの段階で変更できますが、後でいつでも変更が出来ます。
「設定パネル」が表示された段階で、❸ のボタンが有効になります。
❸「移植の実行」は、最後の決定ボタンです。
これを押すと、一瞬でコード上の画像URLの修正と、旧タイプの場合はリセットCSSが追加され、「コード枠」上に説明が出ます。 新タイプは変化が判りませんが、旧タイプは変化に気付くでしょう。
後は 10sec程度の間、自動的にスキンの設定操作が進行します。 モニター左隅に別ウインドウが表示され、最後に下の様な「CSS編集画面」が表示されます。
この反転表示の状態のまま「Ctrl + V」を押します。 元ウインドウで作成したCSSコードがクリップボードにコピーされているので、それがこの編集枠に上書きペーストされます。 ブルー反転が消えたら「保存」のボタンを押します。
編集枠内は元ページで作成した新しいCSSコードで、「保存」により適用されます。画面上部の「ブログ画面」を押すと、スキン移植をしたブログ画面が新しく表示されますから、デザイン上の問題が無いかを確認します。
移植の確認
移植が正常に完了した場合は、ブログ画面は元と同じ表示で違いは判りません。 これを確認するには、新しいブログ画面で移植ツールを起動します。
❶「スキン情報」を押すと、下の様に背景がグレーの説明が出ます。
CSS編集用デザインのスキンは、当たり前ですが移植操作が出来ません。
また、パネル右側の「CSS編集画面」のボタンが有効に変化しています。
●「CSS編集画面」のボタンを押すと、移植時に開いたCSS編集画面に直行できます。 もし、今後にスキンのCSS編集を行うなら、このボタンを利用すると便利です。
●「デザインの変更画面」のボタンは、公式スキンの選択画面です。
移植操作で何かのトラブルがあった場合、この画面から元のスキンを指定しなおして移植前の状態に戻す事が出来ます。（スキンを元に戻す機能は、今後に作ります）注*
また、右上の「レイアウトの変更」から「カラム設定」の変更ができます。
〔追記〕2020.06.16
注*）ユーザーCSSの保護の観点で、この機能は敢えて追加しない事にしました。 詳細は次ページを参照ください。
移植のやりなおし
「移植」の操作は、そう何度も行うものではなく、よく判らないまま失敗する事があるかも知れません。 失敗した場合は、ブログ画面を開くと真っ白な背景になりますが、慌てる必要はありません。
●「やりなおし」は、移植操作を開始した画面を閉じない事が、絶対の条件です。
移植操作を開始したウインドウまたはタブ画面は、ユーザーが閉じたりリロードしない限りは、下の状態で残っています。
❸「移植の実行」のボタンは何度でも押す事が出来、移植操作を再トライ出来ます。
また、「型式」「カラム」を変更して「移植の実行」を押すと、変更が移植結果に反映します。 目的通りの移植が完了するまで、最初の画面は閉じないのがお勧めです。
（閉じた場合は、元のスキンの再設定からやりなおす必要があります）
「Skin Coordinate Port」のコード
以下のスクリプトコードは Chrome / 新Edge / Firefox の「Tampermonkey」で動作を確認しています。
◎ この移植ツールは「公式スキン」を「CSS編集用デザイン」のスキンに移植するツールです。
◎ 公式スキンの背景画像のアレンジを簡単にする「Skin Coordinate」のブログ環境を作るために開発した補助ツールです。
◎ これまで利用してきた公式スキンのデザインを受け継いだまま、CSS編集が自由に出来る様になります。 フォントの変更、背景画像の入替え、細部のアレンジなど、アレンジの手を加えて行くための、最初で最適な環境作りが出来ます。
◎ 新タイプの公式スキンでは、トップページの「リスト」「タイル」型式を変更・追加・削除する事に利用出来ます。
◎ このツールは非常駐型で、スキン移植等の作業時のみONとして使用します。 これは、各種の機能ページに作業専用のアレンジが働くため、日常の操作を扱い難くする場合があるからです。
以下のコードを「Tampermonkey」に登録する事で、このツールが利用できます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Skin Coordinate Port 〕ver. 0.2
// ==UserScript==
// @name Skin Coordinate Port
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 公式スキンをCSS編集用デザインのスキンに移植する
// @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/*
// @match https://blog.ameba.jp/ucs/customize/*
// @match https://blog.ameba.jp/ucs/skin/*
// @match https://blog.ameba.jp/ucs/editcss/*
// @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 skin_code; // ブログスキンのコード名
let skincss; // ブログスキンのCSS
let b1_open=0; // スキンCSSの表示/非表示
let b2_open=0; // トップページ型式・カラムの設定パネル
let b3_open=0; // 移植の実行
let b4_open=0; // 移植の実行
let redo_navi=0; // 再実行のコントロール
let get=0; // 元スキンコードの取得完了のフラグ
let type; // トップページ型式
let layout; // カラム設定 2～6
let target=document.querySelector('head');
let monitor=new MutationObserver(catch_key);
monitor.observe(target, { childList: true });
catch_key();
function catch_key(){
let sb=document.querySelector('.skinBody'); // 旧タイプスキン
let sp=document.querySelector('.skin-page'); // 新タイプスキン
let previewDesign=document.querySelector('#previewDesign'); // スキンプレビュー画面
if((sb || sp) && !previewDesign){ // ページ表示エリアの取得が条件
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();
hide_css();
}}
function panel1_disp(){
let panel=document.createElement('div');
panel.setAttribute('id', 'panel1');
panel.innerHTML=
'<input id="b1" type="submit" value="スキン情報">'+
'<input id="b2" type="submit" value="トップページ型式・カラムの設定">'+
'<input id="b3" type="submit" value=" 移植の実行 ">'+
'<input id="b4" type="submit" value="移植の再実行">'+
'<input id="editor" type="submit" value="CSS編集画面">'+
'<input id="change_skin" type="submit" value="デザインの変更画面">';
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 { outline: none; } '+
'#b4, #b5 { visibility: hidden; }';
if(ua==1){
css+='#panel1 { padding: 14px 0 14px 20px; }'; }
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=
'<label for="t0">'+
'<input id="t0" type="radio" name="blog_type" value="ur_std_pf_cssedit">'+
'標準型</label>'+
'<label for="t1">'+
'<input id="t1" type="radio" name="blog_type" value="ur_list_pf_cssedit">'+
'リスト型</label>'+
'<label for="t2">'+
'<input id="t2" type="radio" name="blog_type" value="ur_tile_pf_cssedit">'+
'タイル型</label>'+
'<span style="color: #fff">カラム: </span>'+
'<label for="c2"><input id="c2" type="radio" name="column" value="2">'+
'<i class="c_m"> </i><i class="c_tx"> </i></label>'+
'<label for="c3"><input id="c3" type="radio" name="column" value="3">'+
'<i class="c_tx"> </i><i class="c_m"> </i></label>'+
'<label for="c4"><input id="c4" type="radio" name="column" value="4">'+
'<i class="c_s"> </i><i class="c_tx"> </i><i class="c_m"> </i></label>'+
'<label for="c5"><input id="c5" type="radio" name="column" value="5">'+
'<i class="c_m"> </i><i class="c_tx"> </i><i class="c_s"> </i></label>'+
'<label for="c6"><input id="c6" type="radio" name="column" value="6">'+
'<i class="c_tx"> </i><i class="c_s"> </i><i class="c_m"> </i></label>';
let css=
'#panel2 { position: fixed; bottom: 110px; left: calc(50% - 490px); '+
'width: 980px; padding: 14px 0 14px 20px; background: #005f56; '+
'border: 2px solid #fff; border-radius: 4px; font: normal 16px meiryo; z-index: 10;} '+
'#panel2 input { height: 16px; width: 16px; margin: 0 4px 0 0; vertical-align: -2px; } '+
'input#c2, input#c3, input#c4, input#c5, input#c6 '+
'{ margin-right: 10px; vertical-align: -3px; }'+
'#panel2 label { display: inline-block; padding: 6px 12px 4px; margin-right: 10px; '+
'border-radius: 2px; color: #000; height: 25px; } '+
'label[for="t0"], label[for="t1"], label[for="t2"] { background: #d2edff; } '+
'label[for="t2"] { margin-right: 20px !important; } '+
'label[for="c2"], label[for="c3"], label[for="c4"], label[for="c5"], label[for="c6"] '+
'{ background: #fff; } '+
'#panel2 .c_s { display: inline-block; border: 1px solid #000; '+
'background: #ff9da2; width: 10px; height: 22px; margin-right: -1px; } '+
'#panel2 .c_m { display: inline-block; border: 1px solid #000; '+
'background: #ff9da2; width: 16px; height: 22px; margin-right: -1px; } '+
'#panel2 .c_tx { display: inline-block; border: 1px solid #000; '+
'background: #fff; width: 28px; height: 22px; margin-right: -1px; } ';
if(ua==1){
css+=''; }
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 manual_set_start(){
let t0=document.querySelector('#t0');
let t1=document.querySelector('#t1');
let t2=document.querySelector('#t2');
let c2=document.querySelector('#c2');
let c3=document.querySelector('#c3');
let c4=document.querySelector('#c4');
let c5=document.querySelector('#c5');
let c6=document.querySelector('#c6');
let page_html=document.querySelector('html');
if(skin_code.includes('wu_pf')){
t0.checked=true;
t1.disabled=true;
t2.disabled=true; }
if(skin_code.includes('ur_std_pf')){
t0.checked=true; }
if(skin_code.includes('ur_list_pf')){
t1.checked=true; }
if(skin_code.includes('ur_tile_pf')){
t2.checked=true; }
if(page_html.classList.contains('columnA')){
c2.checked=true; }
if(page_html.classList.contains('columnB')){
c3.checked=true; }
if(page_html.classList.contains('columnC')){
c4.checked=true; }
if(page_html.classList.contains('columnD')){
c5.checked=true; }
if(page_html.classList.contains('columnE')){
c6.checked=true; }}
function manual_set_get(){
let t0=document.querySelector('#t0');
let t1=document.querySelector('#t1');
let t2=document.querySelector('#t2');
let c2=document.querySelector('#c2');
let c3=document.querySelector('#c3');
let c4=document.querySelector('#c4');
let c5=document.querySelector('#c5');
let c6=document.querySelector('#c6');
let page_html=document.querySelector('html');
if(t0.checked==true){
if(skin_code.includes('wu_pf')){
type='wu_pf_cssedit'; }
else{
type=t0.value; }}
if(t1.checked==true){
type=t1.value; }
if(t2.checked==true){
type=t2.value; }
if(c2.checked==true){
layout=c2.value; }
if(c3.checked==true){
layout=c3.value; }
if(c4.checked==true){
layout=c4.value; }
if(c5.checked==true){
layout=c5.value; }
if(c6.checked==true){
layout=c6.value; }}
function coordinate(){
let b1=document.querySelector('#b1');
let b2=document.querySelector('#b2');
let b3=document.querySelector('#b3');
let b4=document.querySelector('#b4');
let editor=document.querySelector('#editor');
let change_skin=document.querySelector('#change_skin');
task_navi_reset(); // CSSコードを取得するまで、b2・b3は押せない
b1.onclick=function(){
if(b1_open==0){
b1_open=1;
b1.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
open_css();
task_navi(); }
else{
b1_open=0;
b1.style.boxShadow='none';
hide_css();
if(b2_open==1){ // b1が閉じた場合は、panel2も閉じる
b2_open=0;
b2.style.boxShadow='none';
panel2_remove(); }
if(b3_open==1){
b3_open=0;
b3.style.boxShadow='none'; }
task_navi_reset(); }}
b2.onclick=function(){
if(b2_open==0){
b2_open=1;
b2.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
panel2_disp();
manual_set_start();
b3.disabled=false;
// if(redo_navi==1){
// b4.disabled=false; }
}
else{
b2_open=0;
b2.style.boxShadow='none';
panel2_remove();
b3.disabled=true;
// if(redo_navi==1){
// b4.disabled=true; }
}}
b3.onclick=function(){
if(b3_open==0 || b3_open==1){
b3_open=1;
b3.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
// b4.style.visibility='visible'; // redoボタンの表示
// b4.disabled=false;
if(redo_navi==0){
redo_navi=1; // 初回移植処理の実効済
rewrite_css(); }
else{ // 再処理は表示CSSをリセット
hide_css();
open_css();
setTimeout(()=>{
if(get==1){
rewrite_css(); }
}, 100); } // 処理までにCSSコード取得のタイミング必要
setTimeout(()=>{
open_skinselect();
}, 200); }}
/*
b4.onclick=function(){
if(redo_navi==1 && b4_open==0){
get=0; // スキンコード取得フラグのリセット
b4_open=0;
b4.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
redo_navi=1; // 移植再実行の実効済
}}
*/
editor.onclick=function(){
let open_url='https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do';
window.open(open_url, null, 'top=50,left=100,width=880,height=920'); }
change_skin.onclick=function(){
let open_url='https://blog.ameba.jp/ucs/skin/skinselecttop.do';
window.open(open_url, null, 'top=50,left=100,width=880,height=920'); }
} // coordinate()
function task_navi(){
let b2=document.querySelector('#b2');
let b3=document.querySelector('#b3');
let b4=document.querySelector('#b4');
let editor=document.querySelector('#editor');
if(check_user_css()==0){
b2.disabled=false;
b3.disabled=true;
// b4.disabled=true;
editor.disabled=true; }
if(check_user_css()==1){
b2.disabled=true;
b3.disabled=true;
// b4.disabled=true;
editor.disabled=false; }}
function task_navi_reset(){
let b2=document.querySelector('#b2');
let b3=document.querySelector('#b3');
let b4=document.querySelector('#b4');
let editor=document.querySelector('#editor');
if(check_user_css()==0){
b2.disabled=true;
b3.disabled=true;
// b4.disabled=true;
editor.disabled=true; }
if(check_user_css()==1){
b2.disabled=true;
b3.disabled=true;
// b4.disabled=true;
editor.disabled=false; }}
function check_user_css(){
let page_html=document.querySelector('html');
skin_code=page_html.getAttribute('data-skin-code');
if(skin_code){
if(skin_code.includes('cssedit')){
return 1; } // ページのスキンがCSS編集用デザイン
else{
return 0; }}} // ページのスキンが通常の公式スキン
function open_css(){
let page_html=document.querySelector('html');
skin_code=page_html.getAttribute('data-skin-code');
if(skin_code){
disp_css(0); // コード表示枠「#output」を表示
disp_css(1); // スキンコード名を表示
document.querySelector('#output_n').innerHTML='skin-code ： '+ skin_code;
if(skin_code.includes('cssedit')){
disp_css(3); } // ページのスキンがCSS編集用デザインの場合は表示
let xmlhttp=new XMLHttpRequest();
let css_url='https://stat100.ameba.jp/p_skin/'+ skin_code +'/css/skin.css';
xmlhttp.open('GET', css_url ); // CSSコードを取得する
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
let output=document.querySelector('#output');
output.textContent=xmlhttp.responseText; // 取得したCSSを output枠に表示
get=1; } // 取得終了のフラグ
else{
alert('status='+ xmlhttp.status); }}}}
} // open_css()
function disp_css(mode){
let output;
let style;
if(mode==0){
output=document.createElement('textarea'); }
else{
output=document.createElement('div'); }
if(mode==0){
style=
'position: fixed; top: 120px; right: 20px; width: 600px; height: 600px; '+
'padding: 15px; border: 8px solid #90a4ae; color: #000; background: #fff; '+
'font: normal 16px/1.6 Meiryo; outline: none; white-space: pre; '+
'resize: vertical; z-index: 2020;';
output.setAttribute('id', 'output');
output.setAttribute('readonly', ''); }
if(mode==1){
style=
'position: fixed; top: 85px; right: 20px; width: 600px; color: #fff; '+
'padding: 2px 15px 0; border: 8px solid #90a4ae; background: #90a4ae; '+
'font: bold 16px/1.6 Meiryo; z-index: 2020;';
output.setAttribute('id', 'output_n'); }
if(mode==2 || mode==3){
style=
'position: fixed; top: 20px; right: 20px; width: 600px; color: #fff; '+
'padding: 5px 15px 0; font: normal 16px/1.6 Meiryo; z-index: 2020; ';
if(mode==2){
style+='border: 8px solid #2196f3; background: #2196f3;' }
if(mode==3){
style+='border: 8px solid #90a4ae; background: #90a4ae;' }
output.setAttribute('id', 'output_s'); }
if(mode==2){
output.innerHTML=
'このページの移植用のCSSを作成して クリップボードにコピーしました<br>'+
' ▶ サブ画面の CSS編集枠を空白にした上で ペーストして保存をしてください'; }
if(mode==3){
output.innerHTML=
'⚪ このページは CSS編集用デザインのスキンを使用しています<br>'+
' 以下は CSS編集用デザインの基本CSSで 移植処理の対象ではありません'; }
output.setAttribute('style', style)
if(!document.querySelector('#output')){
document.querySelector('html').appendChild(output); }
if(!document.querySelector('#output_n')){
document.querySelector('html').appendChild(output); }
if(!document.querySelector('#output_s')){
document.querySelector('html').appendChild(output); }}
function hide_css(){
if(document.querySelector('#output')){
document.querySelector('#output').remove(); }
if(document.querySelector('#output_n')){
document.querySelector('#output_n').remove(); }
if(document.querySelector('#output_s')){
document.querySelector('#output_s').remove(); }}
function rewrite_css(){
if(check_user_css()==0){
let output=document.querySelector('#output')
let total_css='';
if(skin_code.includes('wu_pf')){
let reset_css=[
'@charset "utf-8";',
'',
'/*===========================================',
'CSS編集用デザインをスキン移植で利用する場合のリセットコード',
'============================================*/',
'',
'.skinFrame {',
'padding-top: 0; }',
'',
'.skinBlogHeadingGroupArea {',
'padding: 0; }',
'',
'.skinDescription {',
'color: #fff; }',
'',
'.skinMessageBoard {',
'border-top: none;',
'border-bottom: none;',
'background: none; }',
'',
'.skinMessageBoard3 { padding: 0; }',
'',
'.skinArticle {',
'padding: 0;',
'border: none;',
'background: none; }',
'',
'.skinArticleHeader {',
'margin: 0;',
'padding: 0;',
'border-left: none; }',
'',
'.skinArticleTitle,',
'.skinArticleTitle:hover,',
'.skinArticleTitle:focus,',
'.skinArticleTitle:visited {',
'font-weight: normal; }',
'',
'.skinArticleBody2 {',
'margin: 0; }',
'',
'.skinArticleFooter {',
'border-top: none; }',
'',
'.skinMenu {',
'background: none; }',
'',
'.skinMenuHeader {',
'padding: 0;',
'background: none; }',
'',
'.skinMenuBody {',
'margin: 0;',
'padding: 0;',
'background: none; }',
'',
'.skinSubHr,',
'.skinSubList li {',
'border-bottom: none; }',
'',
'',
'',
''].join('\n');
total_css=reset_css; } // 旧タイプのスキンのみ reset_cssを追加
skincss=output.textContent;
let rewite_url='https://stat100.ameba.jp/p_skin/'+ skin_code +'/img/';
skincss=skincss.replace(/\.\.\/img\//g, rewite_url); //「..img」コードの修正
total_css+=skincss;
let selection=getSelection();
output.textContent=total_css;
output.select();
document.execCommand('copy'); // クリップボードにコピー
selection.removeAllRanges();
output.blur();
disp_css(2); // CSS変換処理が済んだ事を報告
}} // rewrite_css()
function open_skinselect(){
if(!user_check()){ // 別ユーザーのページで実行不可：CSS編集デザインのCSSを失うのを防止
alert(
' ⛔ 他のユーザーのページで、アレンジ用CSSの取得は可能ですが\n'+
' CSS編集用デザインへ自動で変更する機能は動作しません\n'+
' これは CSS編集用デザインを運用しているユーザーが、誤って\n'+
' 適用中のスキンCSSを失う事を防ぐためです\n\n'+
' CSS編集用デザインへの変更は、手動で行ってください'); }
else{
manual_set_get();
let open_url='https://blog.ameba.jp/ucs/skin/srvskinpreview.do?'+
'skin_code='+ type + '&use_layout=' + layout + '&sc'
window.open(open_url, null, 'top=10,left=40,width=880,height=920'); }}
function user_check(){
let login_user;
let blog_user=window.location.pathname.split('/')[1];
if(blog_user){
login_user=document.querySelector('._2ZOYA4pw').textContent;
if(login_user){
if(blog_user==login_user){
return true; }}}}
window.addEventListener('DOMContentLoaded', function(){
let designTop=document.querySelector('#designTop');
let category=document.querySelector('#category');
let editCss=document.querySelector('#editCss');
let previewDesign=document.querySelector('#previewDesign');
let completeMsg=document.querySelector('#completeMsgArea');
if(designTop || category){ //「デザインの変更」の画面で動作する
edit_w();
select_new_skin(); }
else if(editCss){ //「CSSの編集」の画面で動作する
edit_w();
editcss(); }
else if(previewDesign){ //「ブログデザインの表示確認」の画面で動作する
set_newskin(); }
else if(completeMsg){ //「ブログデザイン適用完了」の画面で動作する
complete(); }
});
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 select_new_skin(){
let ucsContent=document.querySelector('#ucsContent');
ucsContent.style.maxWidth='840px'; }
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(-3); // 自動処理でCSS編集を開いた場合
if(query=='?sc'){
let css_text=document.querySelector('#contentsForm textarea');
css_text.select(); } // コードを全選択にする
} // editcss()
function set_newskin(){
let query=location.href.toString().slice(-3); // 自動処理で開いた場合
if(query=='&sc'){
let apply=document.querySelector('#sbmtBtn input[name="applyBtn"]');
setTimeout(()=>{
if(apply){
apply.click(); }
}, 40); }}
function complete(){
let cssCustom=document.querySelector('.cssCustomBtn');
let link_Blg=document.querySelector('.pubBlogBtn a');
let link_Cus=document.querySelector('.cssCustomBtn a');
if(cssCustom){
link_Cus.setAttribute('href', 'https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do?sc');
setTimeout(()=>{
link_Cus.click();
}, 40); }
else{
link_Blg.removeAttribute('target');
setTimeout(()=>{
link_Blg.click();
}, 40); }}
「Skin Coordinate Port」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Skin Coordinate Port」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
