ボタンデザインの修正更新
「Editor Keeper ⭐」は、「管理トップへ」のリンクを書き換えて「管理トップ」と「ブログトップ」へ「編集画面」を閉じずに移動できる様にします。 記事の再編集の際に「管理トップへ」のボタンを押すと、それまでの編集内容を失います。(新規作成時はバックアップが働きます) このツールの目的はこれを防ぐ事ですが、他にも2つの機能を受け持たせています。
先ず、このボタンを「Shift」を押しながらクリックすれば「ブログトップ」に行ける様にしています。 また、このボタンは「Editor Keeper ⭐」自身が有効になった事を示しますが、編集画面のツール群が起動すると、更にブルーの影を表示します。 つまりこのボタンは、編集画面のスクリプトツール群の正常動作のインジケーターです。
Firefox 新Edge のボタンデザインを修正
今回、Firefox と 新Edge のボタンデザインを修正しました。
◎ 下は Chromeのボタンデザインですが、これは変更ありません。
◎ Firefoxは、ボタンの絵文字のサイズを拡大し Chromeに近付けました。
◎ 新Edgeは、ボタンの絵文字(ameba-symbols)を変更しました。
「Shift」キー押下時の表示変更
各ブラウザのボタンで共通ですが、「Shift」を押すと開く画面が「ブログトップ」に変更される事を判り易くするために、表示に反映させました。
◎ 下は通常の場合のボタン表示です。
◎「Shift」を押した時のボタン表示です。
なお、「Editor Keeper ⭐」は、アメブロ新編集画面を「Ameblo Writer」もしくは「Ameblo Writer Compact」でアレンジをした環境を前提にしています。 この編集画面のアレンジについては、右サイドバーの「Ameblo Writer の概要と設定方法」のボタンを押して、説明記事を参照ください。
「Editor Keeper ⭐」ver. 1.3
このツールは Chrome / 新Edge / Firefox の「Tampermonkey」で動作します。 以下のコードを「Tampermonkey」の新規スクリプトの作成画面にコピー&ペーストして保存する事で、このツールを利用する事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Editor Keeper ⭐ 〕 ver. 1.3
// ==UserScript== // @name Editor Keeper ⭐📛 // @namespace http://tampermonkey.net/ // @version 1.3 // @description 編集画面を閉じず「管理トップ」「ブログトップ」に移動する // @author Ameblo Writer User // @match https://blog.ameba.jp/ucs/entry/srventry* // @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do* // @grant none // ==/UserScript== let retry=0; let interval=setInterval(wait_target, 100); function wait_target(){ retry++; if(retry>10){ // リトライ制限 10回 1sec clearInterval(interval); } let target=document.querySelector('.l-gHeaderLeft__link a'); // 監視 target if(target){ clearInterval(interval); main(); }} function main(){ let target=document.querySelector('.l-gHeaderLeft__link a'); target.setAttribute('target', '_blank'); target.onclick=function(){ if(event.shiftKey){ event.preventDefault(); let amebaId=document.querySelector('.amebaId').textContent; if(amebaId){ let blogurl='https://ameblo.jp/' + amebaId + '/'; window.open(blogurl, "_blank"); }}} window.addEventListener('keydown', function(event){ if(event.shiftKey==true){ target.textContent='ブログトップ'; target.style.boxShadow='#00e2ff -14px 0 0 0 inset'; window.addEventListener('keyup', function(event){ target.textContent='管理トップへ'; target.style.boxShadow='#79fbf6 -14px 0 0 0 inset'; });}}); let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; iframe_doc.addEventListener('keydown', function(event){ if(event.shiftKey==true){ target.textContent='ブログトップ'; target.style.boxShadow='#00e2ff -14px 0 0 0 inset'; iframe_doc.addEventListener('keyup', function(event){ target.textContent='管理トップへ'; target.style.boxShadow='#79fbf6 -14px 0 0 0 inset'; });}}); } let ua=0; // Chromeの場合のフラグ let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ if(agent.indexOf('edg') > -1){ ua=2; } // NEdgeの場合のフラグ // 以下 起動表示CSSを適用 📛 let css; if(ua==0){ css= '.l-gHeaderLeft__link a:before { content: "" !important; }'+ '.l-gHeaderLeft__link a:after { content: "⏏" !important; font-size: 24px !important; '+ 'line-height: 16px !important; top: 2px !important; left: 6px !important; }'+ '.l-gHeaderLeft__link a { text-indent: -6.3em !important; height: 31px !important; padding-top: 3px; }'+ '.l-gHeaderLeft__link a:hover { text-indent: 0.4em !important; background: #fff !important; '+ 'width: calc(28px + 6.7em) !important; box-shadow: -10px 0 1px 0 var(--bgc1) !important; } '+ '#globalHeader #gHeaderLeft { width: 280px; }'; } if(ua==1){ css= '.l-gHeaderLeft__link a:before { content: "" !important; }'+ '.l-gHeaderLeft__link a:after { content: "⏏" !important; font-size: 36px !important; '+ 'line-height: 4px !important; top: 7px !important; left: 2px !important; }'+ '.l-gHeaderLeft__link a { text-indent: -6em !important; height: 30px !important; padding-top: 4px; }'+ '.l-gHeaderLeft__link a:hover { text-indent: 0.7em !important; background: #fff !important; '+ 'width: calc(28px + 6.7em) !important; box-shadow: -10px 0 1px 0 var(--bgc1) !important; } '+ '#globalHeader #gHeaderLeft { width: 280px; }'; } if(ua==2){ css= '.l-gHeaderLeft__link a:before { content: "" !important; }'+ '.l-gHeaderLeft__link a:after { content: "\\EA37" !important; '+ 'font: normal 30px/8px ameba-symbols !important; top: 10px !important; left: 3px !important; }'+ '.l-gHeaderLeft__link a { text-indent: -6.3em !important; height: 31px !important; padding-top: 3px; }'+ '.l-gHeaderLeft__link a:hover { text-indent: 0.4em !important; background: #fff !important; '+ 'width: calc(28px + 6.7em) !important; box-shadow: -10px 0 1px 0 var(--bgc1) !important; } '+ '#globalHeader #gHeaderLeft { width: 280px; }'; } let style_tag=document.createElement("style"); // css設定styleタグ style_tag.type="text/css"; style_tag.appendChild(document.createTextNode(css)); document.querySelector('.l-body').appendChild(style_tag); }
「Editor Keeper ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Editor Keeper ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。