「Ameblo Wysiwyg ⭐」の機能
「Ameblo Wysiwyg ⭐」は編集画面の「Wysiwyg環境」を補強するツールです。 編集画面上とブログ記事の実際の記事表示を、出来る限り一致させる各種の設定が可能です。 このツールが与える影響は大きいので、「Ameblo Wysiwyg ⭐」が起動しているか否かで、編集環境はかなり異なって来ます。
この理由から、「Ameblo Wysiwyg ⭐」を基幹ツールに指定しました。
他の機能上の更新はありませんが、基幹ツールとして起動を表示するコードを追加し、バージョンを更新します。
基幹ツールの起動を監視するツール
今回の更新は、基幹ツールを監視する機能の実装に対応したものです。 この機能の詳細は以下のページを参照ください。
今回の更新で追加した「起動を表示するコード」は以下の部分です。
「Ameblo Wysiwyg ⭐」 ver. 1.9 51行~
コメントに「📛」を書き込んでいますが、これは今後の起動監視に関して、各ツールのメンテナンス上で、検索をし易くするためです。
「Ameblo Wysiwyg ⭐」の扱い方
このツールの操作の詳細は、以下のページを参考にしてください。
「Ameblo Wysiwyg ⭐」を利用するには
このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。
このツールは「Tampermonkey」上で常にONにする常駐型ツールで、ブログ編集画面を開いた時に、自動的にその環境を最適化します。 ユーザーは、上記の環境設定を行った後は、何もする必要がありません。
以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Ameblo Wysiwyg ⭐ 〕 ver. 1.9
// ==UserScript== // @name Ameblo Wysiwyg ⭐ // @namespace http://tampermonkey.net/ // @version 1.9 // @description Ameba編集画面とブログページの Wysiwygを管理 // @author Ameba Blog User // @match https://blog.ameba.jp/ucs/entry/srventry* // @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do* // @grant none // ==/UserScript== let ua=0; let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラッグ let FontAwesomeURL= 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'; let help_url='https://ameblo.jp/personwritep/entry-12803805376.html'; let menu_view=0; // メニューの表示・非表示 let wywg_set=[]; // Ameblo Wywg のユーザー設定 let read_json=localStorage.getItem('Wywg_set'); // ローカルストレージ 保存名 wywg_set=JSON.parse(read_json); if(wywg_set==null){ wywg_set=[0, 16, 1.6, 1, 1, 1, 1, "#3970b5", "#cccccc", 1, "#ffffff", "#2b5d75", 1, 1, 1, 1, 1, 1, 1, 0, 0]; } if(wywg_set.length<21){ wywg_set[20]=0; } let write_json=JSON.stringify(wywg_set); localStorage.setItem('Wywg_set', write_json); // ローカルストレージ 保存 let retry=0; let interval=setInterval(wait_target, 100); function wait_target(){ retry++; if(retry>10){ // リトライ制限 10回 1sec clearInterval(interval); } let target=document.getElementById('cke_1_contents'); // 監視 target if(target){ main(); }} function main(){ sessionStorage.setItem("jslord_1", "1"); // 📛 let target=document.getElementById('cke_1_contents'); // 監視 target let monitor=new MutationObserver(insert_tag); monitor.observe(target, {childList: true}); // ショートカット待受け開始 insert_tag(); setTimeout(()=>{ stylus_active(); }, 200); } // main() function insert_tag(){ let l_body=document.querySelector('.l-body'); let bgc1=window.getComputedStyle(l_body, null).getPropertyValue('background-color'); let cke_contents=document.querySelector('.cke_contents'); let bgc2=window.getComputedStyle(cke_contents, null).getPropertyValue('background-color'); let bdc1=window.getComputedStyle(cke_contents, null).getPropertyValue('border-color'); let style_text=''; style_text+='.cke_editable { '; if(wywg_set[0]==0){ style_text+='font-family: Meiryo, sans-serif !important; '; } else if(wywg_set[0]==1){ style_text+='font-family: "MS Pゴシック", sans-serif !important; '; } style_text+='font-size: '+ wywg_set[1] +'px !important; line-height: '+ wywg_set[2] +'; } '; if(wywg_set[3]==1){ if(wywg_set[0]==0){ style_text+= '.cke_editable img[src*="emoji.ameba.jp"], '+ '.cke_editable img[src*=char2] { vertical-align: -2px; } '+ '.cke_editable img[src*=char3], '+ '.cke_editable img[src*=char4] { vertical-align: -3px; margin-top: -4px; } '; } else if(wywg_set[0]==1){ style_text+= '.cke_editable img[src*="emoji.ameba.jp"], '+ '.cke_editable img[src*=char2] { vertical-align: 0; margin: 0; } '+ '.cke_editable img[src*=char3], '+ '.cke_editable img[src*=char4] { vertical-align: -3px; margin-top: -4px; } '; }} if(wywg_set[4]==1){ style_text+='video, img { vertical-align: middle; } '; } if(wywg_set[5]==1){ style_text+= '.cke_editable h2, .cke_editable h3, .cke_editable h4 '+ '{ font-weight: bold; line-height: '+ wywg_set[2] +'; } '; } if(wywg_set[6]==1){ style_text+= 'a, a:visited { color: '+ wywg_set[7] + '; text-decoration-color: '+ wywg_set[8] +'; } '; } if(wywg_set[9]==1){ style_text+= 'body :not(img)::selection { color: '+ wywg_set[10] + '; background: '+ wywg_set[11] +'; } '; } if(wywg_set[12]==1){ style_text+= 'body img[src*="/img/char/"]::selection { background: rgba(96, 125, 139, 0.2); } '+ 'body img[src*="/img/decoPeta/"]::selection { background: rgba(96, 125, 139, 0.2); } '+ 'body a > img::selection { background: transparent; } '+ 'body img:hover { outline: 1px solid #2196f3; opacity: 1; } '+ '.ck-imgmask { border: 2px solid #2196f3; } '; } if(wywg_set[13]==1){ style_text+= '.cke_editable iframe[src*="youtube"] { '+ 'display: block; margin: 0 auto; width: 80%; height: 320px; } '; } if(wywg_set[14]==1){ style_text+= '.youtube_iframe { pointer-events: auto; } '; } if(wywg_set[15]==1){ style_text+= '.cke_editable pre { font-size: 1em; font-family: inherit; } '; } if(wywg_set[16]==1){ let style_text_head= '@import url("'+ FontAwesomeURL +'"); ' style_text=style_text_head + style_text; } if(wywg_set[17]==1){ style_text+= '.cke_editable { min-height: 100vh; overflow-y: scroll; '+ 'margin: 0 auto !important; padding: 12px 8px 0; color: #000; '+ 'box-shadow: #f8f8f8 0 -8px 0 8px inset, '+ bgc2 + ' 0 0 0 50vw; } '+ '.cke_editable:focus { outline: none; } '+ '.cke_editable_black { '+ 'box-shadow: inset 0 -8px 0 8px #3a3a3a, '+ bgc2 +' 0 0 0 50vw; '+ 'color: #fff; } '; } if(wywg_set[18]==1){ style_text+= '::-webkit-scrollbar { width: 16px; } '+ '::-webkit-scrollbar-track { background: ' + bgc2 + '; } '+ '::-webkit-scrollbar-thumb { background: ' + bgc1 + '; '+ 'box-shadow: inset 0 0 0 .5px ' + bdc1 + '; } '+ 'html { scrollbar-color: ' +bgc1+' '+bgc2+ '; } '; } let insert_style; let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; if(iframe_doc){ let iframe_body=iframe_doc.querySelector('body.cke_editable'); let iframe_html=iframe_doc.querySelector('html'); insert_style=iframe_doc.createElement("style"); insert_style.appendChild(iframe_doc.createTextNode(style_text)); insert_style.setAttribute("class", "iframe_style"); if(!iframe_doc.querySelector('.iframe_style')){ iframe_html.appendChild(insert_style); }}} let outer_style_text=''; // body側(iframe外)に適用するCSS if(wywg_set[16]==1){ let outer_style_text_head= '@import url("'+ FontAwesomeURL +'"); '; outer_style_text+=outer_style_text_head; } if(wywg_set[20]==1){ outer_style_text+='.p-photos-editorDropArea { display: none; } '; } let insert_outer_style=document.createElement("style"); insert_outer_style.appendChild(document.createTextNode(outer_style_text)); insert_outer_style.setAttribute("class", "outer_style"); if(!document.querySelector('.outer_style')){ document.documentElement.appendChild(insert_outer_style); } } // insert_tag() function setup(){ let bfont=document.getElementsByName('bfont'); if(bfont.length==3){ if(wywg_set[0]==0){ bfont[0].checked=true; } else if(wywg_set[0]==1){ bfont[1].checked=true; } else{ bfont[2].checked=true; }} for(let k=0; k<bfont.length; k++){ bfont[k].addEventListener('change', function(){ if(bfont[k].checked){ wywg_set[0]=k; } let write_json=JSON.stringify(wywg_set); localStorage.setItem('Wywg_set', write_json); // ローカルストレージ 保存 renew_insert_tag(); }); } let if_check=document.getElementsByName('if_check'); if(if_check.length==3){ if(wywg_set[19]==0){ if_check[0].checked=true; } else if(wywg_set[19]==1){ if_check[1].checked=true; } else if(wywg_set[19]==2){ if_check[2].checked=true; }} for(let k=0; k<if_check.length; k++){ if_check[k].addEventListener('change', function(){ if(if_check[k].checked){ wywg_set[19]=k; } let write_json=JSON.stringify(wywg_set); localStorage.setItem('Wywg_set', write_json); // ローカルストレージ 保存 }); } input_value_setter(1); input_value_setter(2); checkbox_setter(3); checkbox_setter(4); checkbox_setter(5); checkbox_setter(6); input_value_setter(7); input_value_setter(8); checkbox_setter(9); input_value_setter(10); input_value_setter(11); checkbox_setter(12); checkbox_setter(13); checkbox_setter(14); checkbox_setter(15); checkbox_setter(16); checkbox_setter(17); checkbox_setter(18); checkbox_setter(20); } // setup() function checkbox_setter(k){ let wywg=document.querySelector('#wywg'+k); if(wywg){ if(wywg_set[k]==1){ wywg.checked=true; } else{ wywg.checked=false; } wywg.onclick=function(){ if(wywg_set[k]==1){ wywg.checked=false; wywg_set[k]=0; } else{ wywg.checked=true; wywg_set[k]=1; } let write_json=JSON.stringify(wywg_set); localStorage.setItem('Wywg_set', write_json); // ローカルストレージ 保存 renew_insert_tag(); }}} function input_value_setter(k){ let wywg=document.querySelector('#wywg'+k); if(wywg){ wywg.value=wywg_set[k]; wywg.onchange=function(){ wywg_set[k]=wywg.value; let write_json=JSON.stringify(wywg_set); localStorage.setItem('Wywg_set', write_json); // ローカルストレージ 保存 renew_insert_tag(); }}} function renew_insert_tag(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; if(iframe_doc){ let iframe_body=iframe_doc.querySelector('body.cke_editable'); let iframe_html=iframe_doc.querySelector('html'); if(iframe_doc.querySelector('.iframe_style')){ iframe_doc.querySelector('.iframe_style').remove(); }}} if(document.querySelector('.outer_style')){ document.querySelector('.outer_style').remove(); } insert_tag(); } function disp_panel(){ let css= '<style>'+ '.wywg_menu { position: absolute; top: 10px; right: 10px; font: 16px/28px Meiryo; '+ 'padding: 0.6em 1em; border: 1px solid #009688; border-radius: 4px; z-index: 15; '+ 'background: #f9fafa; box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.3); } '+ '.wywg_menu .title { padding: 3px 10px 1px; margin-bottom: 10px; font-weight: bold; '+ 'color: #fff; background: #2196f3; } '+ '.wywg_menu .title_sub { padding: 2px 10px 0; margin: 12px 0 7px; text-align: center; '+ 'color: #fff; background: #2196f3; } '+ '#wywg_close { display: inline-block; padding: 0 3px; height: 19px; '+ 'line-height: 20px; border: 1px solid #ddd; border-radius: 2px; cursor: pointer; } '+ '.wywg_menu input { height: 18px; font-family: system-ui; text-align: center; '+ 'margin-right: 6px; } '+ '.wywg_menu input[type="radio"] { margin-right: 3px; vertical-align: -3px; } '+ '.wywg_menu label { margin-left: 1em; } '+ '#wywg1, #wywg2 { width: 50px; } '+ '#wywg3, #wywg4, #wywg5, #wywg6, #wywg9, #wywg12, #wywg13, #wywg14, '+ '#wywg15, #wywg16, #wywg17, #wywg18, #wywg19, #wywg20 { '+ 'vertical-align: -3px; } '+ '#wywg7, #wywg8, #wywg10, #wywg11 { height: 26px; width: 22px; margin: 0; '+ 'border: none; background: none; vertical-align: -3px; } '+ '#bad, #good { height: 26px; margin-top: 4px; color: #fff; background: red; '+ 'display: none; } '; if(ua==1){ css+= '.wywg_menu input[type="radio"] { vertical-align: -1px; } '+ '#wywg3, #wywg4, #wywg5, #wywg6, #wywg9, #wywg12, #wywg13, #wywg14, '+ '#wywg15, #wywg16, #wywg17, #wywg18, #wywg20 { vertical-align: -1px; } '+ '#wywg7, #wywg8, #wywg10, #wywg11 { height: 18px; width: 18px; }'; } css+='</style>'; let help= '<a class="help_AW" href="'+ help_url +'" target="_blank">'+ '<svg class="help_svg_AW" width="20" height="20" viewBox="0 0 150 150">'+ '<path fill="#fff" d="M66 13C56 15 47 18 39 24C-12 60 18 146 82 137C92 '+ '135 102 131 110 126C162 90 128 4 66 13M68 25C131 17 145 117 81 '+ '125C16 133 3 34 68 25M69 40C61 41 39 58 58 61C66 63 73 47 82 57C84 '+ '60 83 62 81 65C77 70 52 90 76 89C82 89 82 84 86 81C92 76 98 74 100 66'+ 'C105 48 84 37 69 40M70 94C58 99 66 118 78 112C90 107 82 89 70 94z">'+ '</path></svg>'+ '<style>.help_AW { text-decoration: none; } '+ '.help_svg_AW { vertical-align: -4px; }</style></a>'; let menu_content= '<div class="wywg_menu">'+ '<p class="title">'+ help + ' 〔 Ameblo Wysiwyg Menu 〕 '+ '<b id="wywg_close">✖</b><p>'+ '基本フォント<label><input type="radio" name="bfont" value="1">Meiryo</label>'+ '<label><input type="radio" name="bfont" value="2">MS PGothic</label>'+ '<label><input type="radio" name="bfont" value="3">無指定</label><br>'+ '基本フォントサイズ '+ '<input id="wywg1" type="number" step="1" min="12" max="20">px<br>'+ '基本行間隔 '+ '<input id="wywg2" type="number" step=".1" min=".5" max="3"><br>'+ '<input id="wywg3" type="checkbox">アメブロ絵文字 位置補正(基本フォント連動)✜<br>'+ '<input id="wywg4" type="checkbox">画像・動画の下側行との間隔補正<br>'+ '<input id="wywg5" type="checkbox">h2・h3・h4 見出し 太字指定と行間隔補正<br>'+ '<input id="wywg6" type="checkbox">リンク文字列の色 '+ '文字色 <input id="wywg7" type="color"> '+ '下線色 <input id="wywg8" type="color"><br>'+ '<input id="wywg9" type="checkbox">選択文字列の反転色 ✜\u2002\u2008 '+ '文字色 <input id="wywg10" type="color"> '+ '背景色 <input id="wywg11" type="color"><br>'+ '<input id="wywg12" type="checkbox">選択した画像・動画・絵文字の透過マスク ✜<br>'+ '<input id="wywg13" type="checkbox">Youtube動画 中央配置<br>'+ '<input id="wywg14" type="checkbox">Youtube動画 編集枠内で再生可能にする<br>'+ '<input id="wywg15" type="checkbox">PRE枠内を基本フォントで表示<br>'+ '<input id="wywg16" type="checkbox">Font Awesome の @import指定<br>'+ '<input id="wywg17" type="checkbox">編集枠の余白部配色 ✜<br>'+ '<input id="wywg18" type="checkbox">編集枠スクロールバー配色 ✜<br>'+ '<input id="wywg20" type="checkbox">編集枠内へのドラック&ドロップを無効にする'+ '<br>'+ '<p class="title_sub">Ameblo Writer の環境管理と補完</p>'+ 'Ameblo Writer と Ameblo Wysiwyg の指定が競合<br>'+ 'する項目「✜」 は Ameblo Writer が優先になります<br>'+ '編集枠内の監視 '+ '<label><input type="radio" name="if_check">障害報告</label>'+ '<label><input type="radio" name="if_check">改善報告</label>'+ '<label><input type="radio" name="if_check">OFF</label><br>'+ '<p id="bad"> 📛「Stylus」の編集枠内のCSS修飾が無効です</p>'+ '<p id="good"> 📛「Stylus」の編集枠内のCSS修飾が有効です</p>'+ css +'</div>'; if(!document.querySelector('.wywg_menu')){ document.querySelector('.l-body').insertAdjacentHTML('beforeend', menu_content); } let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ let iframe_doc=editor_iframe.contentWindow.document; if(iframe_doc){ let stylus_tag=iframe_doc.querySelector('.stylus'); if(!stylus_tag && wywg_set[19]==0){ let bad=document.querySelector('.wywg_menu #bad'); bad.style.display='block'; } if(stylus_tag && wywg_set[19]==1){ let good=document.querySelector('.wywg_menu #good'); good.style.display='block'; }}} setup(); } // disp_panel() on_off_panel(); function on_off_panel(){ let l_form=document.querySelector('.l-form'); let wywg_sw=document.querySelector('.p-editorStyle'); let wywg_menu=document.querySelector('.wywg_menu'); if(l_form && wywg_sw){ wywg_sw.onclick=function(event){ if(event.ctrlKey){ event.preventDefault(); event.stopImmediatePropagation(); if(menu_view==0){ menu_view=1; disp_panel(); l_form.style.marginLeft='10px'; l_form.style.marginRight='auto'; } else{ menu_view=0; wywg_menu.remove(); l_form.style.marginLeft='auto'; l_form.style.marginRight='auto'; } on_off_panel(); }}} let close=document.querySelector('#wywg_close'); if(l_form && close && wywg_menu){ close.onclick=function(event){ event.preventDefault(); menu_view=0; wywg_menu.remove(); l_form.style.marginLeft='auto'; l_form.style.marginRight='auto'; }} let c_balloon=document.querySelector('.c-balloon__text'); if(c_balloon){ c_balloon.textContent='Ameblo Wysiwyg Menu ▼ Ctrl+Click'; let bolloon= 'Ameblo Wysiwyg Menu ▼ Ctrl+Click'+ '<style>#js-editorStyleBalloon { top: -57px !important; right: 30px !important; '+ 'width: 180px; padding: 8px 15px 6px 12px; }</style>'; c_balloon.innerHTML=bolloon; } } //on_off_panel() let once=0; function stylus_active(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ let iframe_doc=editor_iframe.contentWindow.document; if(iframe_doc){ if(once==0){ once=1; let stylus_tag=iframe_doc.querySelector('.stylus'); if(!stylus_tag && wywg_set[19]==0){ alert( "📛 拡張機能「Stylus」の編集枠内のCSS修飾が無効になりました\n\n"+ " この警告を停止にするには、「デザイン幅で表示」 を 「Ctrl+Click」\n"+ " して 「Ameblo Wysiwyg」 の 「編集枠内の監視」 を切換えます"); } if(stylus_tag && wywg_set[19]==1){ alert( "📛 拡張機能「Stylus」の編集枠内のCSS修飾が有効になりました\n\n"+ " この警告を停止にするには、「デザイン幅で表示」 を 「Ctrl+Click」\n"+ " して 「Ameblo Wysiwyg」 の 「編集枠内の監視」 を切換えます"); } }}} } // stylus_active()
「Ameblo Wysiwyg ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ameblo Wysiwyg ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。