やはり「危険」なショートカット「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 ⭐📛」に統合されています。 その最新バージョンへのリンクは、以下のページのリンクリストから探せます。
