「画像ダイアログ/画像パレット」の設定をシンクロ
ver1.6 までのコードは、画像をクリックして表示される「画像ダイアログ」には「画像サイズ」の設定ボタンがありますが、ここでの設定は記録しない仕様でした。 一方で、「画像配置」は「画像ダイアログ」にしか設定ボタンが無く、ここで配置設定を記録していました。
しかしこの仕様は操作が判り難く、「画像ダイアログ」の「サイズ」「配置」の設定も、「画像パレット」の「サイズ」の設定も全てシンクロさせ、どこでボタンを押しても設定を記録する様に改めました。 このため「ダイアログ」で「サイズ設定ボタン」を押すと、画像パレット側の「サイズ設定」の表示も変化します。
画像サイズを調整する場合に、どちらで設定変更するかは場合により異なると思います。 どこで設定をしても、必ず設定が次に再現されるのは、アプリケーションで普遍的なインターフェイスなので、この方が慣れ易いと思います。
操作の仕様
このスクリプトコードは「Editor Keeper ⭐📛」に組み込んでいます。 このツールは常時ONにしておく常駐型ツールで、「画像サイズの選択」と「画像の配置位置の選択」を操作すると、その選択が保持される様になります。
● 編集画面を閉じても、ユーザーの選択は再び編集画面の起動時に再現されます。
● 画像の貼り付けサイズの保持
右の画像パレットで「貼り付けサイズ」を設定すると設定が保持され、また画像ダイアログで「貼り付けサイズ」の変更した場合も、その設定が保持されます。
● 画像の貼り付け位置の保持
画像設定ダイアログで配置位置を変更すると、その設定が記録され、次の画像貼り付け時に自動的に同じ設定が適用されます。
▪編集アイコンの「左寄せ・中央寄せ・右寄せ」で画像の位置を変更した場合は、その設定はツールに記録されません。
▪「画像パレット」や「デスクトップ」などから、ドラッグ&ドロップで画像を貼り付ける事が可能ですが、その操作ではデフォルトの左寄せの貼り付けになります。
「Editor Keeper ⭐📛」の本来機能の説明は、以下のページを参照ください。
編集画面を閉じずに「ブログトップ」「管理トップ」を開くスイッチ
「Editor Keeper ⭐📛」ver. 1.7
このツールは Chrome / 新Edge / Firefox の「Tampermonkey」で動作します。 以下のコードを「Tampermonkey」の新規スクリプトの作成画面にコピー&ペーストして保存する事で、このツールを利用する事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Editor Keeper ⭐📛 〕 ver. 1.7
// ==UserScript== // @name Editor Keeper ⭐📛 // @namespace http://tampermonkey.net/ // @version 1.7 // @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); button_disp(); keeper(); photo_set(); }} function button_disp(){ 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); } // button_disp() function keeper(){ 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'; });}}); } } // keeper() function photo_set(){ let aw_preset=[]; // Ameblo Writer のユーザー設定 let read_json=localStorage.getItem('AWriter_Preset'); // ローカルストレージ 保存名 aw_preset=JSON.parse(read_json); if(aw_preset==null){ aw_preset=[0,0,0]; } photo_size(); function photo_size(){ let ph_size=document.querySelectorAll('.js-photo-paste-size'); if(ph_size.length>0){ ph_size[aw_preset[0]].click(); } // サイズボタンをストレージ記録に従って押す for(let k=0; k<ph_size.length; k++){ ph_size[k].onclick=function(){ mem_size(k); }} function mem_size(k){ // サイズボタンの選択を記録 aw_preset[0]=k; let write_json=JSON.stringify(aw_preset); localStorage.setItem('AWriter_Preset', write_json); }} // ローカルストレージ 保存 dialogue(); let p_images=document.querySelector('.p-images-imageList__body'); // 監視 target let monitor=new MutationObserver(photo_pos); monitor.observe(p_images, {childList: true, subtree: true}); // 画像リストの変化を監視開始 function photo_pos(){ let item=document.querySelectorAll('.p-images-imageList__item'); for(let k=0; k<item.length; k++){ set_pos(k); } function set_pos(k){ // 画像の挿入時に配置指定を実行 item[k].addEventListener('mouseup', function(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; let post_img_p=iframe_doc.getSelection().anchorNode; if(aw_preset[1]==1){ post_img_p.setAttribute("style", "text-align: center;"); } else if(aw_preset[1]==2){ post_img_p.setAttribute("style", "text-align: right;"); } setTimeout(()=>{ dialogue(); }, 20); }}); } // set_pos() } // photo_pos() function dialogue(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; let post_img=iframe_doc.querySelectorAll('.cke_editable img'); for(let k=0; k<post_img.length; k++){ post_img[k].addEventListener('click', function(){ setTimeout(()=>{ get_set(); }, 20); }); } function get_set(){ // 画像ダイアログのサイズ・位置選択を取得 let size_button=document.querySelectorAll('.js-image-size-button'); for(let k=0; k<size_button.length; k++){ size_button[k].onclick=function(){ mem_pos(k); }} let pos_button=document.querySelectorAll('.ck-imgBalloon__justify__item'); for(let k=0; k<pos_button.length; k++){ pos_button[k].onclick=function(){ mem_pos(k+4); }} function mem_pos(k){ if(k<4){ aw_preset[0]=k; photo_size(); } // 右パレットのサイズボタンを押す if(k>3){ aw_preset[1]=k-4; let write_json=JSON.stringify(aw_preset); localStorage.setItem('AWriter_Preset', write_json); }} // ローカルストレージ 保存 } // get_set() }} // dialogue() } // photo_set()
「Editor Keeper ⭐📛」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Editor Keeper ⭐📛」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。