<p>による改行と <br>による改行
アメブロの「通常表示の編集画面」で「Enter」キーを押すと、それまでの文字列を「p要素」に丸め、次の「p要素」を生成する事で「改行」になります。
例えば、下図の赤マークの位置で「Enter」キーを押して改行をしたとします。
この部分の「HTML」を表示すると、下の様に「p要素」で各行が括られています。
「p要素」は本来は「段落」を生成するタグですが、現代の「WYSIWYG」エディターは、上の様に各行を「p要素」にしてしまいます。 昔は改行位置に「brタグ」があると考えれば良かったのですが、現在これは通用しません。
しかし「brタグ」が不要になったのではありません。 場合によっては改行に必要不可欠で、アメブロ編集画面では「Shift + Enter」を押すことで入力できます。
通常の文書内でこの「brタグ」を使った改行を行うと、「通常表示」の画面からでは全く区別できません。 しかし「HTML」は異なり、上の例で2行目で「br」の改行をすると下の様なHTMLになります。
改行位置での「Step Size ⭐」の仕様
「Step Size ⭐」は、HTMLタグを跨いだ範囲指定で動作しない仕様です。 跨いで動作可能とすると複雑な多くの場合に対応する必要が発生し、ユーザースクリプトツールとしては不利と判断したからです。 しかしその条件下でも実用性を考慮し「改行」の「pタグ」を跨いでいる場合は、特別に対応をしています。
これは「Step Size ⭐（4） 」で採り入れた機能で、下の青色の部分を選択して文字サイズを指定した場合は、赤枠の範囲のみを対象に文字サイズ指定の動作をします。 この場合は「pタグ」を跨いだ範囲指定ですが、特例として動作するわけです。
しかし「brタグ」を使った「改行」には未対応でした。 下は「brタグ」で改行されている場合で、これまでのバージョンでは「Step Size ⭐」は動作しません。
「通常表示」からは「pタグ」の改行と全く同じに見えて、「Step Size ⭐」のショートカットで赤枠の範囲が修飾されないので、これはユーザーを混乱させます。
（注）通常、文書中に「brタグ」は生成され難いのですが、他文書のコピーや、その他の理由で「brタグ」が紛れ込む事が生じます。
そこで「brタグ」の「改行」の場合も、「pタグ」と同じ動作をする様に改めました。 つまり、上の様な範囲選択で「Step Size ⭐」を動作させると、赤枠の文字列のみに文字サイズの指定が適用されます。
「Step Size ⭐」の操作マニュアル
「Step Size ⭐」は、このツール専用のショーカットを覚えるだけで使えます。
● 通常「文字サイズ指定」をする場合、指定する文字列をマウス操作やキーボードによるキャレット操作で「反転」させます。「Step Size ⭐」で文字サイズを指定する場合も、全く同様に先ず文字列の範囲を選択をして「反転」します。
● 文字サイズの指定は以下ショートカットをキー入力します。
「Alt+⇧」： 文字サイズを「＋0.1em」単位で拡大指定
「Alt+⇩」： 文字サイズを「－0.1em」単位で縮小指定
「Ctrl+⇧」： 文字サイズを「＋0.1em」単位で拡大指定 行間隔変化を抑止
「Ctrl+⇩」： 文字サイズを「－0.1em」単位で縮小指定 行間隔変化を抑止
● 選択範囲の「反転」状態が続く限り、ショートカットを連続入力できます。 連続した操作で、文字サイズを自由に調節できます。「Alt+」の指定の途中から「Ctrl+」の指定に変更する事が可能です。
● サイズ指定をする範囲は、文字列の状態が均一（HTMLタグを跨がない）でなければなりません。 不適当な範囲を選択した場合はツールは動作しません。 選択範囲の詳細については 「Step Size ⭐（1） 」を参照ください。
「Step Size ⭐」ver. 0.5 の導入手順
このツールは、Chrome・Edge / Firefox の各ブラウザ版「Tampermonkey」で動作を確認しています。「Tampermonkey」にページ末尾の掲載コードを登録する事で、このツールを利用することが出来ます。
◎ 新旧バージョンを「Tampermonkey」に登録する事は可能ですが、同時に「ON」にすると正常動作を期待できません。 基本的には旧バージョンの削除がお勧めです。
◎「Editor Keeper ⭐ ver. 3.0」 以降を常駐使用している場合は「Step Size」を同梱しているので、改めて導入する必要はありません。 誤って同時使用しても問題は生じませんが、無駄な導入になります。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Step Size ⭐ 〕ver. 0.5
// ==UserScript==
// @name Step Size ⭐
// @namespace http://tampermonkey.net/
// @version 0.5
// @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 ua_n=2; // Chromeの場合
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){ ua_n=3; } // Firefoxの場合
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', block_key);
document.addEventListener('keydown', block_key);
function block_key(event){
if(event.altKey && event.keyCode==37){ //「Alt+⇦」を無効化
event.preventDefault(); }}
iframe_doc.addEventListener('keydown', check_key);
document.addEventListener('keydown', check_key);
function check_key(event){
// disp_tag(); // 取得range状態のチェック用 ●
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); }
else if(check_tag()==ua_n){
more2(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); }
else if(check_tag()==ua_n){
more2(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); }
else if(check_tag()==ua_n){
more2(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); }
else if(check_tag()==ua_n){
more2(event.ctrlKey, event.keyCode); }}
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; }}
// function disp_tag(){ // 取得range状態のチェック用 ●
// let box=document.querySelector('#cke_8');
// box.style.font="bold 16px/30px Meiryo";
// box.innerHTML=check_tag(); }
} // check_key()
function first(ac, key){
insert_node=iframe_doc.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=range.toString();
try{
range.surroundContents(insert_node);
disp_tag(insert_node); }
catch(e){;}}
function more(ac, key){
let span=clone.querySelector('span');
if(span){
let size_raw=span.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=iframe_doc.createElement('span');
insert_node.setAttribute('style', size_css);
insert_node.textContent=range.toString();
try{
range.deleteContents();
range.insertNode(insert_node);
disp_tag(insert_node); }
catch(e){;}}}
let br=clone.querySelector('br');
if(br){
more2(ac, key); }}
function more2(ac, key){
if(range.startContainer.nodeType==Node.TEXT_NODE){
let latter=range.startContainer.splitText(range.startOffset);
range.setStartBefore(latter);
range.setEndAfter(latter);
insert_node=iframe_doc.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=range.toString();
try{
range.surroundContents(insert_node);
disp_tag(insert_node); }
catch(e){;}}}
function disp_tag(inserted_node){
let lineheight;
if(inserted_node.style.lineHeight=='0'){
lineheight='♦' }
else{
lineheight=' ' }
let size=inserted_node.style.fontSize;
let cke_lavel;
if(ua_n==3){
cke_lavel=document.querySelector('#cke_6_text'); }
else{
cke_lavel=document.querySelector('#cke_7_text'); }
cke_lavel.textContent=lineheight + size;
cke_lavel.removeAttribute('id');
cke_lavel.parentNode.style.background='#2196f3';
cke_lavel.style.color='#fff';
setTimeout(()=>{
if(ua_n==3){
cke_lavel.parentNode.style.background='';
cke_lavel.style.color='';
cke_lavel.setAttribute('id', 'cke_6_text'); }
else{
cke_lavel.parentNode.style.background='';
cke_lavel.style.color='';
cke_lavel.setAttribute('id', 'cke_7_text'); }
}, 500); }
}}}} // main()
「Step Size ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Step Size ⭐」は、後に「Editor Keeper ⭐📛」に統合されています。 その最新バージョンへのリンクは、以下のページのリンクリストから探せます。
