やはり「危険」なショートカット「Alt + ⇦」
前ページで少し書きましたが、ブラウザのデフォルトショートカットで「Alt + ⇦」は、「編集画面」では嬉しくないものです。 Chrome でテストをすると、一回目の「Alt + ⇦」でアメブロの警告ダイアログが出ます。 これは気の利いた計らいです。 しかし、この状態でもう一度「Alt + ⇦」を押すだけで「編集画面」が閉じてしまいます。 これは編集データを失いかねません。
「Alt + 方向キー」は余り使わないショートカットと思いますが、「Step Size ⭐」で「Alt + ⇧」「Alt + ⇩」を使うと、自然に指が「⇦」に触れる事もあるでしょう。 念のために以下のコードで「Alt + ⇦」を無効化しました。
◎ この無効化コードは編集画面でのみ機能し、他の画面では無効化されません。
◎「Step Size ⭐」を「OFF」にして開いた編集画面では、無効化は機能しません。
◎「Alt + ⇨」は、実際上で機能しない場合が多いので、無効化をしていません。
行間隔に影響しない拡大
一般にフォントサイズの拡大を指定すると、同時に行間隔が拡がります。 正確には段落全体の行間隔は不変で、拡大した文字列が上下の行を排斥する形です。
拡大した文字列だけに小さな行間隔を指定すれば、この排斥を生じない様にすることが可能です。 下は行間隔を「0」に指定して排斥を抑えた結果で、行間隔の乱れがなくなりました。
しかし良く見ると、拡大した文字列が上の行の一部を隠しています。
これは、文字背景色が「白」に設定されているからで、これを透過に指定すると、上の行の文字が全て見える様になります。 この場合は文字が重なっていますが、文字背景を透過させれば、文字が重なるぎりぎり手前まで拡大を設定できます。
下の様に、上側の行に文字の無い隙間がある場合は、行間隔を乱さずに文字が重ならないレイアウトが可能になります。
◎ 通常の文字拡大は行間隔が広くなるが、文字は重ならない
◎「行間隔0」と「文字背景透過」を指定すれば、行間隔は崩れない
この2種の拡大指定を、場合によって使いわける事が出来る様にしました。
行間隔を崩さない「Ctrl + ⇧」「Crtl + ⇩」の文字サイズ指定
行間隔を崩さない文字サイズ指定は、サイズ指定と同時に「行間隔0」と「文字背景透過」を指定します。 ショートカットは「Ctrl + ⇧」「Crtl + ⇩」としましたが、これまでの「Step Size ⭐」の操作と対比して覚え易いと思います。
● 文字サイズを指定する文字列の範囲を選択して、ショートカットを押します。 操作の要領は、通常の文字サイズ指定と全く同じです。
● 文字サイズを指定する文字列の範囲選択の制限は、従来の「Step Size」と同じです。 制限の詳細については「Step Size ⭐」(1) を参照ください。
●「Alt + ⇧」「Alt + ⇩」で文字サイズ指定を開始して、途中から「Ctrl + ⇧」「Crtl + ⇩」の文字サイズ指定に変更することや、その逆の変更が可能です。
「Step Size ⭐」ver. 0.2 の導入手順
「Step Size ⭐」ver. 0.2 は、以上の機能の更新を行いました。
このツールは、Chrome・Edge / Firefox の各ブラウザ版「Tampermonkey」で動作を確認しています。「Tampermonkey」にページ末尾の掲載コードを登録する事で、このツールを利用することが出来ます。
なお、ver. 0.1 と ver. 0.2 の両方を「Tampermonkey」に登録する事は可能ですが、両方を同時に「ON」にすると正常な動作を期待できません。 必ず片方だけを「ON」にする様にしてください。 基本的には旧バージョンの削除がお勧めです。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Step Size ⭐ 〕ver. 0.2
// ==UserScript== // @name Step Size ⭐ // @namespace http://tampermonkey.net/ // @version 0.2 // @description ブログ編集画面で緻密な文字サイズ指定を可能にする // @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 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){ clearInterval(interval); main(); }} function main(){ let target=document.getElementById('cke_1_contents'); // 監視 target let monitor=new MutationObserver(flex_edit); monitor.observe(target, {childList: true}); // ショートカット待受け開始 flex_edit(); function flex_edit(){ let editor_iframe; let iframe_doc; let selection; let range; let clone; let tags; let insert_node; editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ iframe_doc=editor_iframe.contentWindow.document; if(iframe_doc){ iframe_doc.addEventListener('keydown', check_key); document.addEventListener('keydown', check_key); function check_key(event){ if(event.altKey && event.keyCode==38){ event.preventDefault(); event.stopImmediatePropagation(); if(check_tag()==0){ first(event.altKey, event.keyCode); } else if(check_tag()==1){ more(event.altKey, event.keyCode); }} if(event.altKey && event.keyCode==40){ event.preventDefault(); event.stopImmediatePropagation(); if(check_tag()==0){ first(event.altKey, event.keyCode); } else if(check_tag()==1){ more(event.altKey, event.keyCode); }} if(event.ctrlKey && event.keyCode==38){ event.preventDefault(); event.stopImmediatePropagation(); if(check_tag()==0){ first(event.ctrlKey, event.keyCode); } else if(check_tag()==1){ more(event.ctrlKey, event.keyCode); }} if(event.ctrlKey && event.keyCode==40){ event.preventDefault(); event.stopImmediatePropagation(); if(check_tag()==0){ first(event.ctrlKey, event.keyCode); } else if(check_tag()==1){ more(event.ctrlKey, event.keyCode); }} if(event.altKey && event.keyCode==37){ //「Alt+⇦」を無効化 event.preventDefault(); } function check_tag(){ selection=iframe_doc.getSelection(); range=selection.getRangeAt(0); clone=selection.getRangeAt(0).cloneContents(); tags=clone.querySelectorAll( 'span, p, a, b, br, div, em, h1, h2, h3, h4, i, img, s'); if(range.collapsed){ return -1; } // 選択範囲が無い時は動作しない else{ return tags.length; }} } // check_key() function first(ac, key){ insert_node=document.createElement('span'); if(ac==event.altKey){ if(key==38){ insert_node.setAttribute('style', 'font-size:1.1em'); } else if(key==40){ insert_node.setAttribute('style', 'font-size:0.9em'); }} else if(ac==event.ctrlKey){ if(key==38){ insert_node.setAttribute('style', 'font-size:1.1em;'+ 'line-height:0;background:transparent;'); } else if(key==40){ insert_node.setAttribute('style', 'font-size:0.9em;'+ 'line-height:0;background:transparent;'); }} insert_node.textContent=clone; try{ range.surroundContents(insert_node); } catch(e){;}} function more(ac, key){ let style=clone.querySelector('span').style; let size_raw=style.getPropertyValue('font-size'); if(size_raw.indexOf('em')!=-1 && size_raw.indexOf('rem')==-1){ let size=parseFloat(size_raw.replace(/[^0-9\.]/g, '')); if(key==38 && size<3){ size=Math.round((size+0.1)*10)/10; } else if(key==40 && size>0.3){ size=Math.round((size-0.1)*10)/10; } let size_css; if(ac==event.altKey){ size_css='font-size:' +size+ 'em'; } else if(ac==event.ctrlKey){ size_css='font-size:' +size+ 'em;'+ 'line-height:0;background:transparent;'; } insert_node=document.createElement('span'); insert_node.setAttribute('style', size_css); insert_node.textContent=range.toString(); try{ range.deleteContents(); range.insertNode(insert_node); } catch(e){;}}} }}}} // main()
「Step Size ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Step Size ⭐」は、後に「Editor Keeper ⭐📛」に統合されています。 その最新バージョンへのリンクは、以下のページのリンクリストから探せます。