ブログを書いていて画像を挿入して「中央寄せ」の配置にした後（下図の❶）、キャレット（カーソル）が「中央寄せ」❷ になってイラっとする事はありませんか？
文字も「中央寄せ」ならそれで良いですが、多くの方は文字は「左寄せ」なので、きっと「左寄せ 」のアイコンを押して、その都度、キャレット位置を訂正されているのではないでしょうか。
これが編集中の文末で生じるのが嫌で、これまでにも「Elements Palette 」で「抜けるためのツール」を作って使って来ました。 ただこのツールは、動作条件を記事末尾の編集に絞ったコードで、記事の中ほどの再編集の場合には使えません。
今回は再度の挑戦で、これまでと全く違うアプローチで、このキャレット位置の対策を試みました。
〔従来の方式〕
本文の末尾に空白行の「p要素」を作り、そこにキャレットを移動。
〔今回の方式〕
「Enter」で出来た「p要素」が「中央寄せ」「右寄せ」の場合、「左寄せ」に変更。
今回の方式はキャレットが必ず画像の次行に出て、記事の途中でも使えて快適です。
ツールの仕様
コードは、「編集枠」内で「Enter」キーの入力を常に監視し、その直後に発生した「p要素」を「左寄せ」にします。「画像」以外にも、「中央寄せ」を指定した「おねだり」のバナー、「動画」等の場合にも、その次の行は「左寄せ」になります。
要するに、意図的に配置を指定しない「p要素」は全て「左寄せ」になります。 文書が「左寄せ」のユーザーにとっては、快適な編集環境になると思います。
ただ、現在の所はとても快適ですが、これはもう少し使って、不都合な場合が無いかの検証が必要です。 現在は独立したツール「Keep Left」として使い、問題がなければ、「Editor Keeper ⭐📛」に統合しようと考えています。
現在の問題点
Chromeでは全く問題ないのですが、Firefoxでは不可解な問題が生じます。
Firefoxでは、ツールを使用した以降で「p要素」が「div要素」に入れ代わります。 色々と「p要素」に戻すコードを試しましたが戻せません。
このツールを使った場所より手前のHTML （本来の形）
<p> </p>
<p>画像の直後から左寄せに書けます。</p>
<p> </p>
このツールを使った場所以降のHTML
<div> </div>
<div>画像の直後から左寄せに書けます。</div>
<div> </div>
画像の後にこのツールで左寄せにして書くと、それ以降が「div」だらけになります。 表面的には「問題」なく、ツールの目的は達せられますが。
スクリプトで「p要素」のタグ内を書換えを操作すると、「p要素」に書き換えたものが、入力された後で全て「div要素」に置き換えられる様に見えます。 アメーバ以外のブログで、デフォルトで記事本文が「div」だらけになる編集システムがあり、また、ブラウザにより「p」と「div」が変化するブログもあります。 これは、編集システムの問題で、気にしないでも良い様な気がしますが、アメブロ / Firefoxのデフォルトは「p」なので、戻せれば戻したいのですが。
「Keep Left」ver. 0.1
以下のコードは Chrome / 新Edge の「Tampermonkey」上で動作を確認しています。
使用方法は、スクリプトをONにして常駐させておくだけです。「中央寄せ」画像の右辺にキャレットがある場合も、「Enter」で次行の左端にキャレットが移動します。
〔 Keep Left 〕ver. 0.1
// ==UserScript==
// @name Keep Left
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @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(align_left);
monitor.observe(target, {childList: true}); // ショートカット待受け開始
align_left();
function align_left(){
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){ // iframe読込みが実行条件
let iframe_doc=editor_iframe.contentWindow.document;
let iframe_body=iframe_doc.querySelector('body.cke_editable');
iframe_doc.addEventListener("keydown", check_key);
function check_key(event){
if(event.keyCode==13){ //「Enter」キー入力
setTimeout(()=>{
let ac_node=iframe_doc.getSelection().anchorNode;
if(ac_node.tagName=='P' &&
(ac_node.style.textAlign=='center' || ac_node.style.textAlign=='right')){
ac_node.style.textAlign=null;
if(ac_node.outerHTML.indexOf('<p style="">')!=-1){
ac_node.outerHTML=ac_node.outerHTML.replace('<p style="">', '<p>'); }}
else if(ac_node.tagName=='DIV' &&
(ac_node.style.textAlign=='center' || ac_node.style.textAlign=='right')){
ac_node.style.textAlign=null;
if(ac_node.outerHTML.indexOf('<div style="">')!=-1){
ac_node.outerHTML=ac_node.outerHTML.replace('<div style="">', '<div>'); }}
}, 40); }}}
} // align_left()
} // main()
