「Skin Coordinate Port」とは
「公式スキン」を設定したブログを「CSS編集用デザイン」の環境に変更するツールです。
◎ スキン移植機能で、適用していたスキンデザインを引き継ぐことが出来ます。
◎ 環境の移行時に、サイドバーのカラムの設定を変更出来ます。
◎「新タイプの公式スキン」から移行する場合は、「標準型・タイル型・リスト型」の好みのトップページ型式に変更できます。
「CSS編集用デザイン」の環境は、ブログページの実用的なアレンジを可能にします。 これは、満足の行くブログページのデザインを得るための、基本環境です。
「移植ツール」の使用上の注意
既に「CSS編集用デサイン」の環境で、ページデザインをカスタマイズして運営されている場合は、このツールを使う事で、これまでの「ユーザーCSS」の内容が失われます。 もし「ユーザーCSS」のバックアップがなければ、元のデザインに戻す事が不可能になります。
「移植ツール」を利用される場合は、事前に「CSS編集画面」を開き、編集枠内の「ユーザーCSS」のコードをメモ帳等にコピーして保存をしてください。
また「簡単カスタマイズ 」によるカスタマイズ内容も同様に失われます。「カスタム可能」スキンの「カスタマイズ内容」はバックアップが出来ないので、「移植ツール」を使うとデザインを元に戻せない事に注意してください。
「移植ツール」を利用される場合は、事前に「CSS編集画面」を開き、編集枠内の「ユーザーCSS」のコードをメモ帳等にコピーして保存をしてください。
また「簡単カスタマイズ 」によるカスタマイズ内容も同様に失われます。「カスタム可能」スキンの「カスタマイズ内容」はバックアップが出来ないので、「移植ツール」を使うとデザインを元に戻せない事に注意してください。
◎ 一般の「公式スキン」を利用している場合は、その「公式スキン」を再設定する事で「CSS編集用デザイン」から元の状態に戻すことが出来ます。
◎ スキン変更をすると、サイドバーの配置設定が変わる場合があります。 サイドバーに表示するパネルの設定を元に戻すには、以下のページでスクリーンショットを撮っておくと楽です。
これは、この移植ツールの「メニュー配置」のボタンからも開く事ができます。
「Skin Coordinate Port」の操作方法
「Tampermonkey」にインストールした「Skin Coordinate Port」をONにしてブログページを表示します。 ショートカットの「Alt + F6」を押すと、下図のコントロールパネルが表示されます。「移植ツール」を終了するには再び「Alt + F6」を押します。
左側の3個が主要な操作ボタンで、ボタンを押すと操作が右へ移ります。
❶は「コード枠」 ❷は「設定パネル」を開閉し、両方が揃うと ❸が押せます。
❶「スキン情報」を押すと、画面右上に「コード枠」が表示されます。
枠上部に現在適用している公式スキンの「コードネーム」、枠内に「CSSコード」が表示されます。 この内容はツール自体に必要でが、ユーザーには参考データです。
❷「トップページ型式・カラムの設定」を押すと「設定パネル」が表示されます。
パネルが開くと、「トップページ型式」はこれまでのブログ型式の通りが選択されますが、「新タイプスキン」はこの移植時に自由に型式を変更できます。
ただし「旧タイプスキン」の場合は、「リスト型」「タイル型」が選択できないので、下の様なパネル表示になります。
「カラム設定」は、ユーザーがこれまで選択していた状態が表示されます。「カラム設定」もこの段階で変更できますが、これは後でいつでも変更が出来ます。
❸「移植の実行」は、最後の決定ボタンです。
これを押すと、コード上の画像URLの修正、旧タイプの場合はリセットCSSが追加され、「コード枠」上に下の説明が出ます。 コード内容を詳しく調べないと変化が判りませんが、コード枠内は「移植用コード」に変わっています。
後は 10sec程度の間、自動的に移植操作が進行します。 モニター左隅に別ウインドウが表示され、最後に下の様な「CSS編集画面」が表示されます。
この反転表示の状態のまま「Ctrl + V」を押します。「移植用コード」がクリップボードにコピーされているので、それがこの編集枠に上書きペーストされます。 ブルー反転が消えたら「保存」のボタンを押します。
その右の「ブログ画面」のボタンを押すと、スキン移植をしたブログ画面が新しく表示されますから、デザイン上の問題が無いかを確認します。
移植の確認
移植が正常に完了した場合は、ブログ画面は元と同じ表示で違いは判りません。 新しいブログ画面で移植ツールを起動し ❶「スキン情報」を押すと、下の様に背景がグレーの説明が出ます。 CSS編集用デザインのスキンからは移植操作が出来ません。
また、パネル右側の「CSS編集画面」のボタンが有効に変化しています。
●「CSS編集画面」のボタンを押すと、移植時に開いたCSS編集画面に直行できます。 もし、今後にスキンのCSS編集を行うなら、このボタンを利用すると便利です。
●「デザインの変更」のボタンは、公式スキンの選択画面です。
移植操作で何かのトラブルがあった場合、この画面から元のスキンを指定しなおして移植前の状態に戻す事が出来ます。 また、右上の「レイアウトの変更」から「カラム設定」の変更ができます。
●「メニュー配置」は、サイドメニューの配置設定画面を開く便利スイッチです。
移植のやりなおし
「移植」の操作は、よく判らないまま失敗する事があるかも知れません。 失敗した場合は、ブログ画面を開くと真っ白な背景になりますが、慌てる必要はありません。
●「やりなおし」は、移植操作を開始した画面を閉じない事が条件です。
移植操作を開始したウインドウまたはタブ画面は、ユーザーが閉じたりリロードしない限りは、下の状態で残っています。
❸「移植の実行」のボタンは何度でも押す事が出来、移植操作を再トライ出来ます。
また、「型式」「カラム」を変更して「移植の実行」を押すと、変更が移植結果に反映します。 目的通りの移植が完了するまで、最初の画面は閉じない事がお勧めです。
（閉じた場合は、元のスキンの再設定からやりなおす必要があります）
「Skin Coordinate Port」ver. 0.6c
基本機能は変化がありませんが、ver. 0.6 で設定パネルの表示を更新しました。
以下のスクリプトコードは Chrome / 新Edge / Firefox の「Tampermonkey」で動作を確認しています。
◎ この移植ツールは「公式スキン」を「CSS編集用デザイン」のスキンに移植するツールです。
◎ 公式スキンの背景画像のアレンジを簡単にする「Skin Coordinate」のブログ環境を作るために開発した補助ツールです。
◎ これまで利用してきた公式スキンのデザインを受け継いだまま、CSS編集が自由に出来る様になります。 フォントの変更、背景画像の入替え、細部のアレンジなど、アレンジの手を加えて行くための、最初で最適な環境作りが出来ます。
◎ 新タイプの公式スキンでは、トップページの「リスト」「タイル」型式を変更・追加・削除する事に利用出来ます。
◎ このツールは非常駐型で、スキン移植等の作業時のみONとして使用します。 これは、各種の機能ページに作業専用のアレンジが働くため、日常の操作を扱い難くする場合があるからです。
「Skin Coordinate Port」を使用するには
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Skin Coordinate Port 〕ver. 0.6c
// ==UserScript==
// @name Skin Coordinate Port
// @namespace http://tampermonkey.net/
// @version 0.6c
// @description 公式スキンをCSS編集用デザインのスキンに移植する
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @match https://blog.ameba.jp/ucs/skin/*
// @match https://blog.ameba.jp/ucs/editcss/*
// @match https://blog.ameba.jp/ucs/sidebar/*
// @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(){
if(check_user_css()==0 || check_user_css()==1){ // 実際のブログページが起動条件
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 check_user_css(){
let page_html=document.querySelector('html');
if(!page_html.classList.contains('fixed')){
return -1; } // プレビュー画面の場合の判定
else{ // 実際のブログ画面の場合と判定
skin_code=page_html.getAttribute('data-skin-code');
if(skin_code){
if(skin_code.includes('cssedit')){
return 1; } // ページのスキンがCSS編集用デザインの判定
else{
return 0; }}}} // ページのスキンが通常の公式スキンの判定
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="デザインの変更">'+
'<input id="sidebar" type="submit" value="メニュー配置">';
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: 15px; padding: 4px 6px 2px; } '+
'#b1, #b2, #b3, #b4 { outline: none; } '+
'#b4 { visibility: hidden; } '+
'#sidebar { margin: 0 !important; }';
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');
let htm=document.querySelector('html');
if(!panel1){
htm.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" id="t0_l">'+
'<input id="t0" type="radio" name="blog_type" value="ur_std_pf_cssedit">'+
'標準型</label>'+
'<label for="t1" id="t1_l">'+
'<input id="t1" type="radio" name="blog_type" value="ur_list_pf_cssedit">'+
'リスト型</label>'+
'<label for="t2" id="t2_l">'+
'<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: rgba(0, 95, 86, 0.8); '+
'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');
let htm=document.querySelector('html');
if(!panel2){
htm.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 t1_l=document.querySelector('#t1_l');
let t2_l=document.querySelector('#t2_l');
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;
t1_l.style.opacity='0.4';
t2_l.style.opacity='0.4'; }
if(skin_code.includes('ur_std_pf')){
t0.checked=true; }
if(skin_code.includes('ur_list_pf')){
t1.checked=true;
t1_l.style.opacity='1'; }
if(skin_code.includes('ur_tile_pf')){
t2.checked=true;
t2_l.style.opacity='1'; }
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');
let sidebar=document.querySelector('#sidebar');
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();
if(check_user_css()==0){
b2.disabled=false; }}
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; }
else{
b2_open=0;
b2.style.boxShadow='none';
panel2_remove();
b3.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';
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);
setTimeout(()=>{
editor.disabled=false;
editor.style.visibility='visible';
}, 1000); }}
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'); }
sidebar.onclick=function(){
let open_url='https://blog.ameba.jp/ucs/sidebar/srvsidebarupdateinput.do';
window.open(open_url, null, 'top=50,left=100,width=880,height=800'); }
} // coordinate()
function task_navi_reset(){
let b2=document.querySelector('#b2');
let b3=document.querySelector('#b3');
let b4=document.querySelector('#b4');
let editor=document.querySelector('#editor');
b1_open=0;
b2_open=0;
if(check_user_css()==0){
b2.disabled=true;
b3.disabled=true;
if(redo_navi==0){
editor.disabled=true;
editor.style.visibility='hidden'; }
else{
editor.disabled=false;
editor.style.visibility='visible'; }}
if(check_user_css()==1){
b2.disabled=true;
b3.disabled=true;
editor.disabled=false;
editor.style.visibility='visible'; }}
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: 30vh; '+
'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 original='\n\n/* Original Skin Code:::' + skin_code +'::: */\n\n\n';
total_css+=original; // 元のスキン情報を追加
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('._3UwSsVVD').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');
let editArrange=document.querySelector('#editArrange');
if(designTop || category){ //「デザインの変更」の画面で動作する
edit_w();
select_new_skin(); }
else if(editCss){ //「CSSの編集」の画面で動作する
edit_w();
editcss(); }
else if(previewDesign){ //「ブログデザインの表示確認」の画面で動作する
set_newskin(); }
else if(completeMsg){ //「ブログデザイン適用完了」の画面で動作する
complete(); }
else if(editArrange){ //「サイドバーの配置設定」の画面で動作する
edit_w(); }});
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';
let design_img=document.querySelector('#design .skinThum img');
let img_src=design_img.getAttribute('src');
if(img_src.includes('pf_cssedit')){ // CSS編集用デザインの環境の場合はアラート表示
alert(
" 🔴 現在のブログは「CSS編集用デザイン」を適用しています\n\n"+
" スキン変更を行うと 現在のページをデザインする「ユーザーCSS」を失い\n"+
" 再び元のデザインに戻す事ができなくなります。\n"+
" これを防ぐために、スキンを変更する前に「ユーザーCSS」をバックアップ\n"+
" する事を強くお勧めします。 バックアップは「CSS編集画面」を開いて\n"+
" 「編集枠」の全内容をメモ帳等にコピーして保存するだけです。"); }}
function editcss(){
let myUcsPage=document.querySelector('#myUcsPage');
myUcsPage.innerHTML=
'<input id="blog" type="submit" value="ブログ画面">';
let css=
'.textarea1 { font-size: 16px; } '+
'#ucsHeader { position: fixed; left: calc( 50% - 387px); bottom: 0; '+
'padding: 20px 12px; width: 750px; } '+
'#ucsSubMenu { top: 13px !important; } '+
'#myUcsPage { display: flex !important; } '+
'#ucsHeader li:not(:first-child){ visibility: hidden; } '+
'#ucsMainLeft { position: static !important; } '+
'.actionControl { padding-bottom: 30px; } '+
'#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; bottom: 14px; '+
'left: calc(50% - 140px); box-shadow: inset 0 0 0 40px #00a08e; }';
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); }}
〔追記〕2020.10.13
ブログページのクラス名変更に修復対応しました。 上記の ver. 0.6 は修復済です。
「Skin Coordinate Port」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Skin Coordinate Port」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
